quangpl Extension Dev
Detect the stack, find docs, implement the feature, debug. Do NOT just explain — execute the workflow.
Workflow (Execute This)
Step 1: Detect framework and UI stack
Run detection (see references/framework-detection.md):
ls wxt.config.ts plasmo.config.ts vite.config.ts manifest.json 2>/dev/null
cat package.json | grep -E '"wxt|plasmo|crxjs|react|vue|svelte"'
| File found | Framework |
|---|---|
wxt.config.ts |
WXT |
package.json has plasmo |
Plasmo |
vite.config has @crxjs |
CRXJS |
manifest.json in root, none above |
Vanilla |
Step 2: Fetch framework docs and style guides
Use docs-seeker skill or web search to find proper docs for the detected stack.
Extension framework docs:
- WXT: https://wxt.dev/ | Plasmo: https://docs.plasmo.com/ | CRXJS: Vite plugin docs
- Chrome APIs: https://developer.chrome.com/docs/extensions/reference/api
- Permissions: https://developer.chrome.com/docs/extensions/reference/permissions-list
UI framework docs (fetch based on detected framework):
| Framework | Docs | Style Guide |
|---|---|---|
| React | https://react.dev | https://react.dev/learn |
| Next.js | https://nextjs.org/docs | https://nextjs.org/docs/app |
| Vue | https://vuejs.org/guide | https://vuejs.org/style-guide |
| Svelte | https://svelte.dev/docs | https://svelte.dev/docs |
| SolidJS | https://solidjs.com/docs | https://solidjs.com/guides |
| Angular | https://angular.dev/guide | https://angular.dev/style-guide |
Code style guides (always follow):
- TypeScript: https://google.github.io/styleguide/tsguide.html
- JavaScript: https://google.github.io/styleguide/jsguide.html
Step 3: Implement the feature
Follow framework conventions:
- WXT: add entrypoints in
entrypoints/, configurewxt.config.ts - Plasmo: add pages/tabs/contents, use CSUI for content UI
- CRXJS: standard Vite + manifest-based setup
- Vanilla: edit
manifest.json, add JS files directly
For Chrome API usage, check references/chrome-api-quick-reference.md.
For messaging between contexts, check references/message-passing-patterns.md.
Step 4: Debug
See references/debugging-guide.md for context-specific DevTools access.
Quick map:
| Context | How to inspect |
|---|---|
| Service worker | chrome://extensions → "inspect" link |
| Content script | Page DevTools → Console → select extension context |
| Popup | Right-click popup → Inspect |
| Options / Side panel | Open page → F12 |
Step 5: Hot reload setup
| Framework | Command | Notes |
|---|---|---|
| WXT | pnpm dev |
Full HMR, auto-reloads extension |
| Plasmo | pnpm dev |
HMR for popup/content |
| CRXJS | vite dev |
Vite HMR |
| Vanilla | Manual | Reload at chrome://extensions |
Chrome API Quick Reference (Top 20)
| API | Purpose | Permission |
|---|---|---|
chrome.tabs |
Query, create, update tabs | tabs |
chrome.windows |
Manage browser windows | windows |
chrome.storage.local |
Persist data locally | storage |
chrome.storage.sync |
Sync data across devices | storage |
chrome.storage.session |
Session-only data | storage |
chrome.action |
Toolbar icon, popup, badge | — |
chrome.contextMenus |
Right-click menu items | contextMenus |
chrome.sidePanel |
Side panel UI | sidePanel |
chrome.notifications |
Desktop notifications | notifications |
chrome.scripting |
Inject scripts/CSS into pages | scripting |
chrome.runtime |
Messaging, lifecycle, manifest | — |
chrome.webRequest |
Intercept/modify network requests | webRequest |
chrome.declarativeNetRequest |
Block/redirect requests declaratively | declarativeNetRequest |
chrome.webNavigation |
Track page navigation events | webNavigation |
chrome.identity |
OAuth2, Google Sign-In | identity |
chrome.alarms |
Schedule periodic tasks | alarms |
chrome.commands |
Keyboard shortcuts | commands |
chrome.cookies |
Read/write cookies | cookies |
chrome.history |
Browser history access | history |
chrome.bookmarks |
Read/write bookmarks | bookmarks |
Message Passing (Quick Pattern)
One-time (popup → service worker):
// sender
const response = await chrome.runtime.sendMessage({ type: 'GET_DATA' });
// receiver (background)
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
if (msg.type === 'GET_DATA') { reply({ data: '...' }); return true; }
});
Content script → service worker: same pattern, return true for async.
Tab-targeted (background → content):
chrome.tabs.sendMessage(tabId, { type: 'ACTION' });
Full patterns in references/message-passing-patterns.md.
References
references/framework-detection.md— detect WXT/Plasmo/CRXJS/vanilla, dev commandsreferences/framework-styleguides.md— UI framework docs, style guides, extension framework docsreferences/chrome-api-quick-reference.md— 30+ APIs with permissions and doc linksreferences/message-passing-patterns.md— all messaging patterns with TypeScript examplesreferences/debugging-guide.md— DevTools per context, common errors, tips
Related Skills
extension-create— scaffold new extension with WXTextension-manifest— generate/validate manifest.jsonextension-test— write and run extension testsextension-analyze— analyze existing extension codebase