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
1.9 KiB
1.9 KiB
name, description
| name | description |
|---|---|
| chrome-extension | 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
npm create vite {{name}} -- --template react-ts- Add Chrome types:
npm install -D @types/chrome - Configure Vite for multi-entry
- Create manifest.json
npm run dev(watch mode)- 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