≈492 tokens on demand. Your agent reads this file only when SKILL.md points to it.
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
