chrome-extension-wxtlisted

# Chrome Extension Development with WXT Build modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase. ## When to Use This Skill Use this skill when: - Creating a new Chrome/browser extension - Setting up WXT development environment - Building extension features (popup, content scripts, background scripts) - Implementing cross-browser compatibility - Working with Manifest V3 (mandatory standard as of 2025, V2 deprecated) - Integrating React 19, Vue, Svelte, or Solid with extensions ## Quick Start Workflow ### 1. Initialize WXT Project ```bash # Create new project with framework of choice npm create wxt@latest # Or with specific template npm create wxt@latest -- --template react-ts npm create wxt@latest -- --template vue-ts npm create wxt@latest -- --template svelte-ts ``` ### 2. Project Structure WXT uses file-based conventions: ``` project/ ├── entrypoints/ # Auto-discovered entry points │ ├── background.ts # Service worker │ ├── content.ts # Content script │ ├── popup.html # Popup UI │ └── options.html # Options page ├── components/ # Auto-imported UI components ├── utils/ # Auto-imported utilities ├── public/ # Static assets │ └── icon/ # Extension icons ├── wxt.config.ts # Configuration └── package.json ``` ### 3. Develop