🌐 Website Asset Extractor

Website Asset Extractor is a powerful Chrome Extension that helps you instantly extract and inspect design and content assets from any website.
It’s like having a design microscope and content analyzer at your fingertips!

✨ Features

✅ Color Picker – Hover and pick any color on the page.
✅ Font Picker – Get font family, size, and copy CSS easily.
✅ Extract All Colors – Generate a full color palette used on the site.
✅ Inspect Element – Reveal CSS properties of any element visually.
✅ Component Snipper – Copy clean HTML of selected components.
✅ Tailwind Inspector – View and copy Tailwind CSS classes applied to elements.
✅ Video Extractor – Detect and download video sources from the page.
✅ SEO Analyzer – Quickly audit SEO meta tags, headers, links, and structured data.

🧩 Installation

Clone this repository:

git clone https://github.com/yourusername/website-asset-extractor.git
cd website-asset-extractor

Install dependencies:

npm install

Build the extension:

npm run build

(or if you’re using Vite/React, adjust accordingly)

Load into Chrome:

1. Open chrome://extensions/
2. Enable Developer mode
3. Click Load unpacked
4. Select the dist (or build) folder

⚙️ Usage

• Click the extension icon in your Chrome toolbar.
• The popup provides buttons for each tool.
• Click a tool to activate it on the current tab.
• Use visual overlays to inspect, copy, or download assets.

📁 Project Structure

/public
  manifest.json          Extension manifest
  icon16.png             Extension icon (16x16)
  icon48.png             Extension icon (48x48)
  icon128.png            Extension icon (128x128)
  videoPicker.js         Video extraction script
  colorPalate.js         Color extractor script
  snipper.js             Component snipper script
  inspector.js           General CSS inspector
  tailwindInspector.js   Tailwind CSS inspector
  fontPicker.js          Font inspector

/src
  App.jsx                Popup UI
  main.jsx               Entry point

package.json

📸 Screenshots

1. Popup UI

---

2. SEO Analyzer

---

3. Snip Component

---

4. Element Inspect