FORGE-X: Upload source (chrome_extension.zip)

README.md

@@ -1,13 +1,68 @@
 ---
-title: Tailwind Css Component Preview Extension 10c0
-emoji: 📉
-colorFrom: green
-colorTo: purple
+title: "Tailwind CSS Component Preview Extension"
+emoji: 🎨
+colorFrom: yellow
+colorTo: blue
 sdk: gradio
-sdk_version: 6.14.0
-python_version: '3.13'
+sdk_version: 4.44.0
 app_file: app.py
 pinned: false
+license: mit
+tags:
+  - frontend
+  - web-development
+  - javascript
+  - react
+  - development
+  - extension
+  - tailwind
+  - component
 ---
+# Tailwind CSS Component Preview Extension
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Analyzes any webpage for Tailwind CSS utility class usage. Detects Tailwind components, counts utility classes by category, and shows which design patterns are used on the page.
+
+## Key Features
+
+- Detects whether a page uses Tailwind CSS
+- Counts utility classes by category: colors, spacing, layout, typography
+- Shows the most frequently used Tailwind classes on any page
+- Identifies how many elements use Tailwind utilities vs plain CSS
+- Helps developers learn Tailwind patterns from live sites
+
+## How It Works
+
+Click the extension icon on any webpage. The extension scans all DOM elements, identifies Tailwind CSS utility classes, and categorizes them by function (color, spacing, layout, typography). Results display instantly in the popup — no page reload needed.
+
+## What You Get
+
+- One-click Tailwind CSS detection and analysis
+- Class categorization by utility type
+- Works on any website — inspect any site's Tailwind usage
+- Privacy-first — all analysis runs locally in your browser
+
+## 🚀 Usage
+
+1. Click **Use in Spaces** above to run the demo directly
+2. Or clone the repository and run locally:
+
+```bash
+git clone https://huggingface.co/spaces/WealthFromAI/tailwind-css-component-preview-extension-10c0
+cd tailwind-css-component-preview-extension-10c0
+pip install -r requirements.txt
+python app.py
+```
+
+## 💰 Pricing
+
+- **Demo**: Free on Hugging Face Spaces
+- **Full Source Code**: $14.99
+- Available on [Gumroad](https://gumroad.com) and [Whop](https://whop.com)
+
+## 📄 License
+
+MIT License — free to use, modify, and distribute.
+
+---
+
+*Built with [FORGE-X](https://github.com/WealthFromAI) — automated digital product engine*

background/service-worker.js

@@ -0,0 +1,15 @@
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === 'install') {
+    console.log('Tailwind CSS Component Preview Extension installed');
+    chrome.storage.local.set({ installDate: Date.now(), version: '1.0.0' });
+  }
+});
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'getState') {
+    chrome.storage.local.get(null, (data) => {
+      sendResponse(data);
+    });
+    return true;
+  }
+});

content/content.js

@@ -0,0 +1,18 @@
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.action === 'analyze') {
+    try {
+      var data = {
+        status: 'ok',
+        title: document.title,
+      url: window.location.href,
+      headings: document.querySelectorAll('h1,h2,h3').length,
+      links: document.querySelectorAll('a[href]').length,
+      images: document.querySelectorAll('img').length
+      };
+      sendResponse(data);
+    } catch (e) {
+      sendResponse({ status: 'error', message: e.message });
+    }
+  }
+  return true;
+});

manifest.json

@@ -0,0 +1,54 @@
+{
+  "manifest_version": 3,
+  "name": "Tailwind CSS Component Preview Extension",
+  "short_name": "Tailwind CSS",
+  "version": "1.0.0",
+  "description": "",
+  "author": "ForgeX Empire",
+  "homepage_url": "https://gumroad.com",
+  "permissions": [
+    "activeTab",
+    "storage",
+    "scripting"
+  ],
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "background": {
+    "service_worker": "background/service-worker.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_title": "Tailwind CSS Component Preview Extension",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "32": "icons/icon32.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "content/content.js"
+      ],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  }
+}

popup/popup.css

@@ -0,0 +1,11 @@
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { width: 350px; min-height: 200px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; color: #1a1a1a; }
+header { background: #2d5be3; color: #fff; padding: 12px 16px; }
+header h1 { font-size: 14px; font-weight: 600; }
+.content { padding: 16px; }
+.btn { display: inline-block; background: #2d5be3; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; width: 100%; text-align: center; }
+.btn:hover { background: #1a3fa8; }
+.result { margin-top: 12px; padding: 10px; background: #f5f7ff; border-radius: 6px; font-size: 12px; }
+.upgrade { display: block; text-align: center; margin-top: 10px; font-size: 11px; color: #888; text-decoration: none; }
+.upgrade:hover { color: #2d5be3; }

popup/popup.html

@@ -0,0 +1,23 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'self';">
+    <meta name="viewport" content="width=350, initial-scale=1.0">
+    <title>Tailwind CSS Component Preview Extension</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Tailwind CSS Component Preview Extension</h1>
+        <p>Easily preview and inspect Tailwind CSS components in your browser.</p>
+        <h2>Main Feature</h2>
+        <p>Click on any Tailwind CSS class in a web page to see a preview of the component.</p>
+        <button>Get Started</button>
+        <a href="#" class="upgrade-btn">Upgrade to Pro</a>
+    </div>
+    <script src="popup.js"></script>
+</body>
+</html>
+```

popup/popup.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const btn = document.getElementById('analyze');
+  const result = document.getElementById('result');
+  if (btn) {
+    btn.addEventListener('click', () => {
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]) {
+          chrome.tabs.sendMessage(tabs[0].id, { action: 'analyze' }, (response) => {
+            if (chrome.runtime.lastError) {
+              result.textContent = 'Could not connect to page. Try refreshing.';
+              return;
+            }
+            result.textContent = response ? JSON.stringify(response, null, 2) : 'No data';
+          });
+        }
+      });
+    });
+  }
+});