WXT Browser Extension Development Framework
WXT (Web eXtensions Tools) is a modern browser extension development framework built on Vite, designed specifically for Manifest V3.
Framework Overview
Core Advantages:
- Declarative entry point definition, automatically generates manifest configurations
- Blazing-fast build speed based on Vite
- Complete TypeScript type support
- Multi-framework support (Vanilla, Vue, React, Svelte, Solid)
- One-click build for multiple browsers (Chrome, Firefox, Edge, Safari)
- Built-in hot reload and development server
Official Resources
Module Navigation
This skill is divided into 5 core modules by function, and it is recommended to learn in order:
1. Guides (guides/)
Getting Started: Quick start based on official documentation, including environment preparation, project creation, entry points, static resources, front-end frameworks, permissions, message passing, data storage, and publishing.
Project Structure: Detailed explanation of project structure, including default structure, source code mode, and roles of core files.
Static Assets: Static asset management, including asset directories, reference methods, icon configuration, optimization strategies, and best practices.
Content Scripts: Content script development, including injection rules, page interaction, debugging methods, and complete examples.
Data Storage: Data storage solutions, including storage types, change listening, WXT storage tools, data migration, and best practices.
Internal Extension Communication: Internal extension communication, including one-time messages, long connections, cross-extension communication, communication patterns, and complete examples.
Internationalization: Internationalization configuration, including language files, dynamic switching, plural forms, variable interpolation, and complete examples.
Framework Setup: Complete configuration for Vanilla/Vue/React/Svelte/Solid frameworks.
Permissions Configuration: Permission declaration methods, dynamic permission requests, principle of least privilege, and best practices.
Browser Adaptation: Adaptation and compatibility configuration for Chrome, Firefox, Edge, and Safari.
Deployment Guide: Complete process of building, packaging, and publishing to various browsers.
2. Command Line (cli/)
Command Reference: All development, build, test, and packaging commands (Bun as the primary tool).
Bun Cheatsheet: Quick reference for commonly used Bun commands.
3. Lifecycle (lifecycle/)
Creating a Project: Complete process of creating a new project using bunx wxt.
Build Phases: Detailed explanation of 8 build phases.
Hook Functions: Complete documentation of build lifecycle hooks.
Flowchart: Complete build process diagram.
4. API (api/)
Entrypoint API: defineBackground, defineContentScript, etc.
Configuration API: defineConfig, defineManifest, etc.
Utility Functions: Storage, script injection, matching patterns, etc.
5. Examples (examples/)
Vanilla Example: Native JavaScript/TypeScript project.
Vue Example: Vue 3 project example.
React Example: React project example.
Svelte Example: Svelte project example (Recommended).
Solid Example: SolidJS project example (Recommended).
4. API (api/)
Interface Documentation: Detailed explanation of WXT core interfaces, including entrypoint interfaces, configuration interfaces, build interfaces, development server interfaces, etc.
Type Documentation: WXT type alias documentation, including configuration types, entrypoint types, browser types, module types, etc.
Entrypoint API: Entrypoint definition functions such as defineBackground, defineContentScript.
Configuration API: Configuration functions such as defineConfig, defineManifest.
Utility Functions: Utility functions for storage, script injection, matching patterns, etc.
5. Examples (examples/)
Vanilla Example: Native JavaScript/TypeScript project.
Vue Example: Vue 3 project example.
React Example: React project example.
Svelte Example: Svelte project example (Recommended).
Solid Example: SolidJS project example (Recommended).
Quick Start
Environment Preparation
bash
# Install Bun (Recommended)
curl -fsSL https://bun.sh/install | bash
# Verify installation
bun --version
Create Project
bash
# Create project
bunx wxt@latest init
# Select framework: Svelte (Recommended) or Solid
Start Development
bash
cd my-extension
bun run dev
Learning Path
Beginner Path: Guides (Getting Started → Framework) → Examples (Svelte) → Command Line (Development)
Advanced Path: Lifecycle (Phases → Hooks) → API (Entrypoints → Configuration → Utilities) → Deployment
Quick Start: Quick Start → Select Framework Example → Command Cheatsheet
Package Manager Support
This skill primarily uses Bun, and also supports other package managers:
| Operation | Bun | npm | pnpm | Yarn |
|---|
| Install Dependencies | | | | |
| Development | | | | |
| Build | | | | |
Framework Selection Recommendations
| Framework | Recommendation | Features | Use Cases |
|---|
| Svelte | ⭐⭐⭐⭐⭐ | Lightweight, high performance, gentle learning curve | Recommended as first choice |
| Solid | ⭐⭐⭐⭐⭐ | Reactive, high performance, fine-grained updates | Recommended as first choice |
| Vue | ⭐⭐⭐⭐ | Mature ecosystem, rich Chinese documentation | For developers familiar with Vue |
| React | ⭐⭐⭐⭐ | Huge ecosystem, abundant employment opportunities | For developers familiar with React |
| Vanilla | ⭐⭐⭐ | No framework dependencies, simple and direct | Simple extensions or teams without framework experience |
Official Resources
Trigger Scenarios
You can call this skill for help when you encounter the following situations:
- Creating a new browser extension project
- Configuring WXT project options
- Developing extensions using frameworks like Svelte/Solid
- Defining various types of entry points (background scripts, content scripts, popup pages, etc.)
- Using functions such as storage and script injection
- Building and packaging extensions
- Solving problems encountered during development
Skill Structure Explanation
This skill adopts a modular design, and each module is independent and complete:
- Guides Module: Theoretical learning and concept understanding
- Command Line Module: Practical operations and tool usage
- Lifecycle Module: In-depth understanding of build processes
- API Module: Looking up functions and configurations
- Examples Module: Referencing complete code
It is recommended to learn in module order, but you can also jump directly to the corresponding module according to your needs.