Posted on Jul 28

BeautyMatch – Smart Skin Compatibility for Beauty Products

#webdev #extensions #skincare #typescript

Introduction

BeautyMatch is a privacy-first Chrome Extension that analyzes beauty product pages from Amazon.in, Sephora India, and Nykaa, and shows whether a product is a Good Match, Caution, or Not Recommended based on your skin profile.

🚀 Features

🧠 Smart verdicts based on your skin tone, type, and allergies
🛍️ Automatically scrapes ingredient info from supported Indian websites
✍️ Quick onboarding to save your skin profile
🎨 Tailwind-powered popup UI with React
🔒 100% local – no server, no tracking, no data sharing

Watch it here : YouTube Video

Full Code here : GitHub Link

📁 Project Structure

BeautyMatch/ ├── public/ │ ├── manifest.json # Chrome extension config (MV3) │ ├── onboarding.html # Onboarding page HTML │ └── icons/ # Extension icons ├── src/ │ ├── pages/ │ │ └── Onboarding.tsx # Onboarding React component │ ├── content/ │ │ └── scraper.ts # Content script to scrape product info │ ├── background/ │ │ └── background.ts # Background service worker (MV3) │ ├── App.tsx # Verdict popup UI │ ├── main.tsx # React entry point │ └── styles/ # Tailwind CSS ├── index.html # Popup HTML ├── vite.config.ts # Vite + CRXJS build config └── README.md # You're here!

🧠 How It Works

You complete a short onboarding quiz
Your skin profile is saved in chrome.storage.sync
When visiting supported product pages, the extension:

Scrapes ingredients from the page
Compares them with your saved skin profile
Displays a personalized verdict in the popup

🛠 Tech Stack

Vite + React + TypeScript
Tailwind CSS for styling
@crxjs/vite-plugin for Manifest V3 Chrome Extension builds
Chrome Extension APIs: storage, runtime, scripting

🧪 Run Locally

# Install dependencies npm install # Build for Chrome (outputs to /dist) npm run build # Load in Chrome: # 1. Visit chrome://extensions # 2. Enable Developer Mode # 3. Click "Load unpacked" # 4. Select the /dist folder