chrome-ext-best-practiceslisted

This skill should be used when working on any Chrome extension project or when the user asks about Chrome extension best practices, conventions, or patterns. Trigger when: setting up a new Chrome extension, configuring WXT, asking about MV3 architecture, "Chrome extension project structure", "WXT config", "extension entrypoints", "manifest v3 setup", "when to use content script vs service worker", "extension context boundaries", "Chrome extension build", "wxt.config.ts", "extension packaging", "Chrome Web Store submission", "cross-browser extension".
RadOrigin-LLC/RAD-Claude-Skills · ★ 5 · Web & Frontend · score 75

Install: claude install-skill RadOrigin-LLC/RAD-Claude-Skills

# Chrome Extension Best Practices MV3 Chrome extensions operate across multiple isolated contexts with no shared memory. The architecture must respect these boundaries while maintaining clean code organization. WXT is the recommended framework — it provides file-based routing, automatic manifest generation, and Vite-powered builds. ## Core Mental Model Every extension context (service worker, content script, popup, side panel) is a separate process. Communication happens exclusively through async message passing with JSON-serializable data. The service worker is ephemeral — it wakes to handle events and terminates after ~30 seconds of inactivity. ## WXT Project Structure ``` my-extension/ ├── src/ │ ├── entrypoints/ # Isolated contexts (file-based routing) │ │ ├── background.ts # Service worker │ │ ├── popup/ # Popup UI (index.html + App.tsx) │ │ ├── sidepanel/ # Side panel UI │ │ ├── options/ # Options page │ │ └── content.ts # Content script (or *.content.ts) │ ├── components/ # Shared React components │ ├── hooks/ # Custom React hooks │ ├── utils/ # Shared utilities │ │ ├── messaging.ts # Protocol Map definitions │ │ └── storage.ts # Storage wrappers │ └── assets/ # CSS, images, SVGs ├── public/ # Static files (copied to output) ├── wxt.config.ts # WXT configuration ├── tsconfig.json └── pa