4e8e5069fa
- Added: api-patterns, app-builder, architecture, bash-linux, behavioral-modes, clean-code, code-review-checklist, database-design, deployment-procedures, docker-expert, documentation-templates, game-development, geo-fundamentals, i18n-localization, lint-and-validate, mobile-design, nestjs-expert, nextjs-best-practices, nodejs-best-practices, parallel-agents, performance-profiling, plan-writing, powershell-windows, prisma-expert, python-patterns, react-patterns, red-team-tactics, seo-fundamentals, server-management, tailwind-patterns, tdd-workflow, typescript-expert, vulnerability-scanner - Updated README: skill count 179 → 223 - Added credit for vudovn/antigravity-kit (MIT License) Source: https://github.com/vudovn/antigravity-kit
93 lines
1.9 KiB
Markdown
93 lines
1.9 KiB
Markdown
---
|
|
name: chrome-extension
|
|
description: Chrome Extension template principles. Manifest V3, React, TypeScript.
|
|
---
|
|
|
|
# Chrome Extension Template
|
|
|
|
## Tech Stack
|
|
|
|
| Component | Technology |
|
|
|-----------|------------|
|
|
| Manifest | V3 |
|
|
| UI | React 18 |
|
|
| Language | TypeScript |
|
|
| Styling | Tailwind CSS |
|
|
| Bundler | Vite |
|
|
| Storage | Chrome Storage API |
|
|
|
|
---
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
project-name/
|
|
├── src/
|
|
│ ├── popup/ # Extension popup
|
|
│ ├── options/ # Options page
|
|
│ ├── background/ # Service worker
|
|
│ ├── content/ # Content scripts
|
|
│ ├── components/
|
|
│ ├── hooks/
|
|
│ └── lib/
|
|
│ ├── storage.ts # Chrome storage helpers
|
|
│ └── messaging.ts # Message passing
|
|
├── public/
|
|
│ ├── icons/
|
|
│ └── manifest.json
|
|
└── package.json
|
|
```
|
|
|
|
---
|
|
|
|
## Manifest V3 Concepts
|
|
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| Service Worker | Background processing |
|
|
| Content Scripts | Page injection |
|
|
| Popup | User interface |
|
|
| Options Page | Settings |
|
|
|
|
---
|
|
|
|
## Permissions
|
|
|
|
| Permission | Use |
|
|
|------------|-----|
|
|
| storage | Save user data |
|
|
| activeTab | Current tab access |
|
|
| scripting | Inject scripts |
|
|
| host_permissions | Site access |
|
|
|
|
---
|
|
|
|
## Setup Steps
|
|
|
|
1. `npm create vite {{name}} -- --template react-ts`
|
|
2. Add Chrome types: `npm install -D @types/chrome`
|
|
3. Configure Vite for multi-entry
|
|
4. Create manifest.json
|
|
5. `npm run dev` (watch mode)
|
|
6. Load in Chrome: `chrome://extensions` → Load unpacked
|
|
|
|
---
|
|
|
|
## Development Tips
|
|
|
|
| Task | Method |
|
|
|------|--------|
|
|
| Debug Popup | Right-click icon → Inspect |
|
|
| Debug Background | Extensions page → Service worker |
|
|
| Debug Content | DevTools console on page |
|
|
| Hot Reload | `npm run dev` with watch |
|
|
|
|
---
|
|
|
|
## Best Practices
|
|
|
|
- Use type-safe messaging
|
|
- Wrap Chrome APIs in promises
|
|
- Minimize permissions
|
|
- Handle offline gracefully
|