WXT 是什么，凭什么选它

WXT 是什么

WXT（官方未给出全称）是一个现代、开源的浏览器扩展开发框架，灵感来自 Nuxt。它把自己定位成“下一代扩展框架”，目标只有两个：提供出色的开发体验（DX）；对主流浏览器提供一等支持。

一句话理解：原生扩展开发像手工记账，WXT 像给你配了套自动记账系统。它同时承担“框架 + 构建工具”的双重角色。

设计理念：五个关键词

• 约定优于配置：靠文件名和目录约定自动发现入口点，用合理的默认值减少开发者的配置负担；
• 类型安全：全程 TypeScript 支持，编译期就能发现错误；
• 开发体验：热重载、清晰的错误提示、自动打开调试浏览器；
• 现代化：基于 Vite，支持最新的前端技术栈（React、Vue、Svelte、Solid 等）；
• 跨浏览器：一套代码产出 Chrome、Firefox、Edge 等多个浏览器版本。

WXT 帮你做了什么

• 按文件名和目录发现入口点（如 background.ts、popup/）；
• 为不同浏览器生成对应的 manifest；
• 用 Vite 打包 TypeScript、React、CSS 和静态资源；
• 提供开发浏览器、热更新、zip 打包和商店提交命令；
• 生成 browser API、存储（storage）和入口定义所需的类型。

它不会替你决定产品权限、后端协议或 UI 结构。框架管“怎么建”，不管“建什么”。

为什么原生开发很痛

原生扩展开发要手工维护 manifest：每加一个内容脚本就要改一遍声明，不同浏览器的字段还有差异。调试时得反复手动“重新加载扩展”，没有热更新，类型提示基本靠猜。

WXT 把这几件事自动化了：入口文件写出来就自动进 manifest，开发模式改代码自动刷新，manifest 由框架按目标浏览器生成。这也是官方文档建议零基础读者先徒手写一个扩展的原因——亲身体验过痛，才知道框架省了什么。

和 Plasmo、CRXJS 比怎么样

官方对比页（Compare）有一张功能对照表，几个关键差异：

• 维护状态：WXT 活跃维护；Plasmo 疑似进入维护模式，功能开发基本停滞；CRXJS 维护迟缓；
• 浏览器支持：WXT 全浏览器且 MV2/MV3 双支持；CRXJS 只能二选一；
• 打包能力：WXT 能直接生成商店上传 zip 和 Firefox 源码包（sources zip），CRXJS 不支持；
• 自动导入与模块系统：WXT 独有，可复用的模块体系是它的招牌能力；
• 开发模式：WXT 自动打开带扩展的浏览器，Plasmo 不支持；UI、内容脚本的热更新覆盖也更全；
• 内置封装：WXT 内置存储、内容脚本 UI、i18n 封装，Plasmo 有消息通信封装，CRXJS 基本不提供。

结论：同为框架，WXT 在工程化能力上更全；CRXJS 本质是 Vite 插件，适合已有 Vite 工程做轻度改造。

前置知识要求

官方文档假定你已了解扩展的基本结构，并会使用扩展 API。零基础读者建议先按 Chrome 官方 Hello World 教程徒手写一个扩展，再回来学 WXT。

另外要明确一点：WXT 不改变扩展 API 的用法。browser.tabs、chrome.storage 这些 API 该怎么调还是怎么调，开发时仍要常查 Chrome 与 Mozilla 的官方文档。

小结

WXT 用“约定优于配置 + Vite + 类型安全”把扩展开发拉回现代前端体验。下一节就动手：装环境、建项目、跑起来。