Explain This UI 🔍

A production-ready Chrome Extension that lets you inspect any UI element on any webpage and instantly analyze it like a senior frontend developer — powered by Google Gemini AI.

---

✨ Features

🔎 Element Inspector

• Hover any element to see a live overlay with tag, classes, and dimensions
• Click to capture and analyze the element
• ESC to deactivate
• Keyboard shortcut: Ctrl+Shift+I

📊 Analysis Panels

🤖 AI Features (Gemini 1.5 Flash)

• Explain This Component — Beginner-friendly breakdown
• Generate React Component — TypeScript + TailwindCSS
• Improve This UI — Accessibility and responsive fixes
• Analyze Design — Color, typography, and hierarchy insights

📋 Export

• Export as JSON, Markdown, or PNG
• Copy CSS, Tailwind classes, or color palette with one click

⌨️ Keyboard Shortcuts

---

🚀 Quick Start

1. Clone & Install

git clone https://github.com/youruser/explain-this-ui
cd explain-this-ui
npm install

2. Configure API Key

cp .env.example .env

Edit .env:

VITE_GEMINI_API_KEY=your_key_here

Get a free Gemini API key at aistudio.google.com.

3. Build

npm run build

4. Load in Chrome

1. Open Chrome → chrome://extensions
2. Enable Developer mode (top right toggle)
3. Click "Load unpacked"
4. Select the dist/ folder

5. Use the Extension

1. Click the extension icon in Chrome toolbar
2. Click "Activate Inspector" or press Ctrl+Shift+I
3. Hover over elements on any webpage
4. Click any element to analyze it
5. View the side panel for full analysis

---

🏗️ Project Structure

src/
├── background/           # Service Worker (MV3)
├── content/              # Injected into pages
│   ├── inspector.ts      # Hover highlight + click capture
│   ├── analyzer.ts       # DOM + CSS extraction
│   ├── screenshot.ts     # Screenshot capture
│   └── styles.css        # Injected overlay styles
├── popup/                # Extension toolbar popup
├── sidepanel/            # Main analysis UI
│   ├── App.tsx
│   ├── components/
│   │   ├── layout/       # Header, CommandPalette
│   │   ├── panels/       # BasicInfo, Styles, A11y, Design, AI
│   │   ├── history/      # InspectionHistory
│   │   └── ui/           # Badge, Card, CopyButton, ColorSwatch, etc.
│   ├── hooks/            # useInspector, useAI, useTheme
│   ├── services/         # ai.service, export.service
│   └── store/            # Zustand stores (inspector, history, settings)
├── types/                # TypeScript interfaces
└── utils/                # color, css, accessibility, framework utils

---

🔧 Development

# Watch mode (rebuilds on save)
npm run dev

# Type check
npm run type-check

After any change in watch mode, go to chrome://extensions and click the refresh icon on the extension card.

---

🌐 Tech Stack

---

🔑 Environment Variables

---

📦 Build Output

The dist/ folder will contain:

• manifest.json
• background/index.js — Service worker
• content/index.js + content/styles.css — Injected scripts
• popup/index.html — Toolbar popup
• sidepanel/index.html — Main analysis panel

---

🙏 Credits

Built with Vite, CRXJS, TailwindCSS, and Google Gemini.

---

📄 License

MIT