简介

1. wxt-dev/wxt – 一个现代化、专为构建 Chrome 扩展而设计的构建工具（基于 Vite），支持多浏览器兼容。
2. guocaoyi/create-chrome-ext – 一个 Vite 模板生成器，用于快速搭建 Chrome 扩展项目，适合小巧轻量项目。

---

🧠 总体对比思路

特性维度	WXT (wxt-dev/wxt)	create-chrome-ext
🧱 本质	框架 + 构建工具（像 Vite for 扩展）	Vite 模板脚手架
🔧 功能定位	构建扩展工具链（包括构建、HMR、压缩、watch 等）	项目起步模板
📦 打包能力	支持复杂的模块打包（按功能分开）	基于 Vite 构建（但需手动管理 manifest 等）
💡 热重载	✅ 内建 HMR（可配置 dev server + watch）	❌ 没有热重载，需要手动刷新扩展
📁 文件组织	多入口（background, popup, options, content script）自动识别	全部自定义，结构需手动维护
📜 Manifest 支持	自动推导、类型安全支持、跨浏览器 manifest 转换（V2/V3）	手动维护 manifest.ts
💻 浏览器兼容	Chrome、Firefox、Edge（开发友好）	主要面向 Chrome
🌍 国际化支持	✅ 内建支持（_locales）	❌ 需要自行配置
🔌 插件支持	✅ 插件系统丰富	❌ 纯模板
📦 NPM 发布扩展	✅ 支持 Zip 自动打包	❌ 手动处理
🧪 测试支持	✅ 提供 Vitest/Playwright 示例	❌ 需用户配置
🧰 模块热替换开发体验	🔥 快速开发体验	📄 纯静态构建
🔍 社区活跃度	较新但活跃，受关注度高	成熟但主要用于项目初始化

---

✅ WXT 的优势（wxt-dev/wxt）

🔥 现代化开发体验

• 内建支持 热重载 (HMR)：改代码自动刷新页面或服务脚本
• 开发时用 wxt dev 代替 npm run build && reload，效率大幅提升

🛠️ 自动多页面支持

• 自动处理 popup, options, background, content scripts 等文件
• 自动构建并映射 manifest.json

💡 多浏览器支持

• 支持 Chrome / Firefox / Edge 的差异化构建（manifest V2 / V3 切换）

✨ 类型安全、易用 API

• 内建类型提示，如 defineManifest()、defineBackground() 等，开发者体验好

---

✅ create-chrome-ext 的优势（guocaoyi/create-chrome-ext）

🧩 极度轻量

• 没有额外复杂抽象，完全基于 Vite
• 不“绑架”构建逻辑，更适合已经熟悉 Vite 的开发者

⚙️ 结构直观

• 手动控制 manifest.ts、目录结构，无隐式逻辑
• 适合做“自定义集成”或用作最小启动模板

🪶 上手极快

• 不需要学习新 DSL，新框架结构，模板即项目

---

🧩 适用场景对比

场景	推荐工具	理由
快速创建 demo 或简单扩展	create-chrome-ext	模板即开干，结构易懂
多浏览器支持（Chrome + Firefox）	wxt	自动转换 manifest，内建 polyfill
需要热更新开发体验	wxt	支持内容脚本和服务脚本热替换
项目部署复杂（多个页面、模块）	wxt	自动分包构建
想精细控制 Vite + manifest 构建流程	create-chrome-ext	结构更可控
喜欢稳定、无依赖的传统结构	create-chrome-ext	没有抽象层干扰

---

🚀 实际建议

• ✅ 学习、入门、试验、轻量插件项目 👉 推荐 create-chrome-ext
• ✅ 长期维护、多功能、Firefox兼容项目 👉 推荐 wxt
• ✅ 如果你熟悉 Vue / React 且想做成生产级别插件，建议直接用 wxt

---

🧪 Demo 项目建议

你可以做一个两者对比的小项目，例如：

• 目标：构建一个扩展，包含 popup、options 页面和 content script
• 观察点：构建速度、开发体验、调试便利性、manifest 的管理