extension-dev（扩展开发）

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"'

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):

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/, configure wxt.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:

Step 5: Hot reload setup

Chrome API Quick Reference (Top 20)

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 commands
• references/framework-styleguides.md — UI framework docs, style guides, extension framework docs
• references/chrome-api-quick-reference.md — 30+ APIs with permissions and doc links
• references/message-passing-patterns.md — all messaging patterns with TypeScript examples
• references/debugging-guide.md — DevTools per context, common errors, tips

Related Skills

• extension-create — scaffold new extension with WXT
• extension-manifest — generate/validate manifest.json
• extension-test — write and run extension tests
• extension-analyze — analyze existing extension codebase