WXT（Web Extension Toolkit）是一个现代化、基于 Vite 的 Chrome（及其他浏览器）扩展（插件）开发工具包。它旨在简化浏览器扩展的开发、构建和发布流程，提供开箱即用的开发体验，尤其适合使用现代前端框架（如 React、Vue、Svelte 等）构建扩展。
核心特性
-
基于 Vite 构建
- 利用 Vite 的快速 HMR（热模块替换）和按需编译能力，大幅提升开发效率。
- 支持 TypeScript、JSX、CSS 预处理器等现代前端技术栈。
-
多页面架构支持
- 自动识别并处理扩展的多个入口（如 popup、options、background、content script、side panel 等）。
- 无需手动配置多个 HTML 入口，WXT 自动处理。
-
开箱即用的 Manifest V3 支持
- 默认生成符合 MV3 规范的
manifest.json。
- 自动处理 service worker（background）、content script 注入等细节。
-
插件系统
- 可通过插件扩展 WXT 功能（如添加 Sentry、i18n、自动发布等）。
- 社区提供常用插件，如
@wxt-dev/module-react、@wxt-dev/module-vue 等。
-
跨浏览器支持
- 支持 Chrome、Firefox、Safari、Edge 等主流浏览器。
- 可通过
wxt build --browser firefox 等命令构建特定浏览器版本。
-
开发服务器与自动重载
- 启动开发服务器后，修改代码会自动重新加载扩展（包括 popup、content script 等）。
- 支持模拟浏览器环境，提升调试体验。
-
类型安全
- 内置对
chrome.* / browser.* APIs 的 TypeScript 类型支持。
- 提供 WXT 特有的类型工具（如
defineBackground, defineContentScript）。
官方资源
适用场景
- 想用现代前端框架开发浏览器扩展
- 希望获得接近 Web App 的开发体验（HMR、TS、组件化）
- 需要同时支持多个浏览器
- 不想手动处理 manifest 和多入口构建配置
WXT 正在快速迭代，已成为现代浏览器扩展开发的热门选择，特别适合从 Web 开发转向扩展开发的团队或个人。
项目结构示例
my-extension/
├── entrypoints/
│ ├── popup.html # 弹出页面
│ ├── popup.tsx # 弹出页面逻辑（可使用 React/Vue）
│ ├── background.ts # 后台脚本（Service Worker）
│ ├── content.ts # 内容脚本（注入网页）
│ └── options.html # 选项页面
├── public/ # 静态资源（图标、manifest 图标等）
├── wxt.config.ts # WXT 配置文件
└── package.json
注意：WXT 会自动将 entrypoints/ 下的 .html 和同名 .ts/.tsx 文件配对，生成对应入口。
快速开始
-
初始化项目
npm create wxt@latest
# 或
pnpm create wxt@latest
-
开发
pnpm dev
# 自动打开浏览器并加载扩展（需手动在 chrome://extensions 启用“开发者模式”并加载 unpacked）
-
构建
pnpm build
# 输出到 .output/chrome-mv3 目录
-
构建其他浏览器版本
pnpm build --browser firefox
配置示例
import { defineConfig } from 'wxt';
export default defineConfig({
manifest: {
name: '我的扩展',
description: '一个基于 WXT 构建的 Chrome 扩展',
version: '1.0.0',
permissions: ['storage', 'activeTab']
},
// 启用 React 支持
modules: ['@wxt-dev/module-react']
});
调试技巧
- 使用
pnpm dev 后，在 Chrome 扩展管理页（chrome://extensions）加载 .output/chrome-mv3 文件夹。
- 修改代码后，WXT 会自动 rebuild 并通知浏览器重载扩展（需安装 WXT Devtools 插件以获得最佳体验）。