chrome-extension-builder

# Chrome Extension Builder

Scaffold production-ready Chrome MV3 extensions using WXT + React + shadcn-UI.

## Quick Start

```bash
pnpm dlx wxt@latest init <project-name> --template react
cd <project-name>
pnpm install
pnpm dev
```

---

## Workflow

### Step 1: Gather Requirements

Ask user about extension type and features:

| Component | Purpose | When to Include |
|-----------|---------|-----------------|
| **Background** | Service worker, messaging hub, native messaging | Always |
| **Content Script** | DOM manipulation, page extraction | Interacting with web pages |
| **Side Panel** | Persistent UI alongside pages | Complex UIs, suggestion panels |
| **Popup** | Quick actions, settings access | Simple interactions |
| **Options Page** | Extension configuration | User preferences |
| **DevTools Panel** | Developer debugging tools | Development tooling |

### Step 2: Create Project Structure

```
/extension
├── entrypoints/
│   ├── background.ts           # Service worker
│   ├── popup/                   # Popup UI (optional)
│   │   ├── index.html
│   │   ├── App.tsx
│   │   └── style.css
│   ├── sidepanel/              # Side panel UI (optional)
│   │   ├── index.html
│   │   ├── App.tsx
│   │   └── style.css
│   └── options/                # Options page (optional)
│       ├── index.html
│       └── App.tsx
├── content/                    # Content scripts
│   ├── main.ts                 # Primary content script
│   └── [site-name].ts          # Site-specific scripts
├── lib/                        # Shared utilities
│   ├── storage.ts              # Storage wrapper
│   ├── messaging.ts            # Message protocol
│   └── types.ts                # Shared types
├── components/                 # React components (shadcn-ui)
│   └── ui/
├── wxt.config.ts              # WXT configuration
├── tailwind.config.js         # Tailwind CSS
├── package.json
└── tsconfig.json
```

### Step 3: Configure WXT

**wxt.config.ts:**
```typescript
import { defineConfig } from