Chrome 扩展开发框架对比: 从零开始选哪个

Chrome 扩展开发框架对比: 从零开始选哪个

CRXJS + Vite, Plasmo, WXT, Native Manifest V3 - 独立开发者的 Chrome 扩展开发选型指南
Chrome 扩展是独立开发者的一个绝佳产品形态: 开发周期短, 分发渠道明确 (Chrome Web Store), 用户获取成本低. 但 Manifest V3 的迁移让开发体验发生了很大变化, 原生开发的痛点催生了多个开发框架.
这篇文章对比 4 种 Chrome 扩展开发方案, 从开发体验, 框架能力, 学习曲线三个维度帮你选择最合适的起步方式.

1. CRXJS + Vite

定位: 轻量级 Vite 插件, 最小侵入性
CRXJS 不是一个完整的框架, 而是一个 Vite 插件. 核心价值是让你用 Vite 的开发体验来写 Chrome 扩展: HMR 热更新, 现代 JS/TS 支持, React/Vue 开箱即用.
核心优势:
  • HMR 热更新: 修改代码后扩展自动刷新
  • 和 Vite 生态完全兼容: 任何 Vite 插件都能用
  • 最小侵入性: 不改变你的项目结构
  • React, Vue, Svelte 等框架都支持
实测场景: 我的 amazon-data-scraper 扩展就是用 CRXJS + Vite + React 18 开发的, 已在 Chrome Web Store 上架到 v1.1.4. 开发体验非常好, 和写普通 React 应用几乎没区别.
价格: 免费开源

2. Plasmo

定位: 全功能 Chrome 扩展框架, 开箱即用
Plasmo 的目标是成为 Chrome 扩展开发的 Next.js: 约定大于配置, 内置 Messaging API, Storage API, Content Script 注入等功能.
核心优势:
  • 开箱即用: plasmo init 一条命令创建完整项目
  • 内置 Messaging: Background 和 Content Script 之间的通信封装好了
  • 内置 Storage API: 跨组件状态管理, 自动同步
  • 自动生成 manifest.json
价格: 免费开源 / Plasmo Itero (测试分发) 付费

3. WXT

定位: 新一代跨浏览器扩展框架
WXT 灵感来自 Nuxt, 采用约定式目录结构. 最大的差异化是对多浏览器的支持: Chrome, Firefox, Edge, Safari 一套代码.
核心优势:
  • 跨浏览器支持: 一套代码同时支持 Chrome, Firefox, Edge, Safari
  • 约定式目录结构: 文件放对位置就自动注册
  • TypeScript 优先: 类型提示完善
  • 活跃维护: 更新频率高, 社区在快速增长
价格: 免费开源

4. Native Manifest V3

定位: 不用框架, 直接写原生扩展
核心优势:
  • 零依赖: 不需要 Node.js, 不需要构建工具
  • 完全掌控: 没有框架黑盒
  • 学习 Chrome Extension API 的最佳方式
实测场景: 我的 xhs-publisher 扩展组件最初就是用原生 Manifest V3 写的, 因为功能单一, 不需要框架的额外抽象.
价格: 免费

横向对比

Chrome 扩展开发框架横向对比
Chrome 扩展开发框架横向对比
CRXJS + Vite
好
原生支持
支持
低
React 开发者
Plasmo
好
原生支持
支持
最低
快速上手
WXT
好
支持
优先
中等
跨浏览器
Native MV3
无
手动配置
手动配置
高
简单扩展

怎么选?

你是 React 开发者, 想用熟悉的工具链: CRXJS + Vite. 最小侵入性, 和普通 Vite + React 项目几乎一样的开发体验.
你想最快速度出一个扩展产品: Plasmo. 从零到 Chrome Web Store 上架的路径最短.
你的扩展需要支持多个浏览器: WXT. 一套代码支持 Chrome + Firefox + Edge + Safari.
功能简单, 或者想深入学习 Chrome Extension API: Native Manifest V3. 没有框架抽象层, 直接和浏览器 API 打交道.

我的实际选择

我个人用 CRXJS + Vite 做主力开发框架:
  1. 技术栈是 React + TypeScript, CRXJS 完全兼容
  1. HMR 热更新对开发效率提升巨大
  1. 最小侵入性意味着迁移成本最低
  1. 两个已上架的扩展都用这个方案, Chrome Web Store 审核流程已经跑通
一个实际的经验: Chrome Web Store 的审核对 Manifest V3 的 permissions 审查越来越严. 无论用哪个框架, 都要注意最小权限原则, 只申请你真正需要的 permission, 否则审核会被打回.