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 definitions with automatic manifest configuration generation
- Vite-based ultra-fast build speed
- Complete TypeScript type support
- Multi-framework support (Vanilla, Vue, React, Svelte, Solid)
- One-click builds for multiple browsers (Chrome, Firefox, Edge, Safari)
- Built-in hot reload and development server
Official Resources
- Official Website：https://wxt.dev
- GitHub：https://github.com/wxt-dev/wxt
- Quick Start：https://wxt.dev/guide/introduction.html
- Core Guides：https://wxt.dev/guide/essentials/
Module Navigation
This skill is divided into 5 core modules by function, and it is recommended to learn them in order:
1. Guides (guides/)
Getting Started Guide: A quick start based on the official documentation, including environment preparation, project creation, entry points, static assets, frontend frameworks, permissions, messaging, data storage, and publishing.
Project Structure: A detailed explanation of the project structure, including the default structure, source code mode, and the role 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, interaction with pages, debugging methods, and complete examples.
Data Storage: Data storage solutions, including storage types, listening for changes, WXT storage utilities, data migration, and best practices.
In-Extension Communication: In-extension communication, including one-time messages, long-lived 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 Configuration: Complete configuration for Vanilla/Vue/React/Svelte/Solid frameworks.
Permission Configuration: Permission declaration methods, dynamic permission requests, the principle of least privilege, and best practices.
Browser Adaptation: Adaptation and compatibility configuration for Chrome, Firefox, Edge, and Safari.
Deployment Guide: The complete process for building, packaging, and publishing to each browser.
2. Command Line (cli/)
Command Reference: All development, build, test, and packaging commands (primarily Bun).
Bun Cheat Sheet: A quick reference for common Bun commands.
3. Lifecycle (lifecycle/)
Create Project: The complete process for creating a new project using bunx wxt.
Build Phases: Detailed explanations of the 8 build phases.
Hook Functions: Complete documentation for build lifecycle hooks.
Flowchart: A complete diagram of the build process.
4. API（api/）
Entry Point API: defineBackground, defineContentScript, etc.
Configuration API: defineConfig, defineManifest, etc.
Utility functions: storage, script injection, match 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/）
API documentation: Detailed description of WXT core APIs, including entrypoint APIs, configuration APIs, build APIs, dev server APIs, 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, etc.
Configuration API: Configuration functions such as defineConfig, defineManifest, etc.
Utility functions: Utility functions such as storage, script injection, match 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
# 安装 Bun（推荐）
curl -fsSL https://bun.sh/install | bash
# 验证安装
bun --version
Create a project
# 创建项目
bunx wxt@latest init
# 选择框架：Svelte（推荐）或 Solid
Start development
cd my-extension
bun run dev
Learning path
Beginner path: Guide (Getting started → Framework) → Examples (Svelte) → Command line (Development)
Advanced path: Lifecycle (Stages → Hooks) → API (Entrypoints → Configuration → Utilities) → Deployment
Quick start: Quick start → Choose a framework example → Command cheat sheet
Package manager support
This skill is primarily based on Bun, while also supporting other package managers:
| Operation | Bun | npm | pnpm | Yarn |
|---|---|---|---|---|
| Install dependencies | bun i |
npm i |
pnpm i |
yarn |
| Development | bun run dev |
npm run dev |
pnpm dev |
yarn dev |
| Build | bun run build |
npm run build |
pnpm build |
yarn build |
Framework selection recommendations
| Framework | Recommendation level | Features | Use cases |
|---|---|---|---|
| Svelte | ⭐⭐⭐⭐⭐ | Lightweight, high performance, gentle learning curve | Recommended first choice |
| Solid | ⭐⭐⭐⭐⭐ | Reactive, high performance, fine-grained updates | Recommended first choice |
| Vue | ⭐⭐⭐⭐ | Mature ecosystem, rich Chinese documentation | Developers familiar with Vue |
| React | ⭐⭐⭐⭐ | Huge ecosystem, many job opportunities | Developers familiar with React |
| Vanilla | ⭐⭐⭐ | No framework dependency, simple and direct | Simple extensions or teams without framework experience |
Official resources
| Resource | Link |
|---|---|
| Installation guide | https://wxt.dev/guide/installation.html |
| Example projects | https://wxt.dev/examples.html |
| API reference | https://wxt.dev/api/reference/wxt/ |
| GitHub repository | https://github.com/wxt-dev/wxt |
When to use
You can use this skill to get help when you encounter the following situations:
- Create a new browser extension project
- Configure WXT project options
- Develop extensions using frameworks such as Svelte/Solid
- Define various types of entry points (background scripts, content scripts, popup pages, etc.)
- Use features such as storage and script injection
- Build and package extensions
- Solve problems encountered during development
Skill structure description
This skill uses a modular design, and each module is independent and complete:
- Guide module: theoretical learning and concept understanding
- Command-line module: practical operation and tool usage
- Lifecycle module: in-depth understanding of the build process
- API module: look up functions and configuration
- Examples module: refer to complete code
It is recommended to study the modules in order, but you can also jump directly to the corresponding module according to your needs.