众所周知生成一个chrome extension应用只需要指定一个manifest.json清单文件就算成了。

但要想丝滑地写页面还需要视图库React、Vue等，路由react-router、状态管理Zustand、pinia等。如果是开发一个企业级的chrome extension应用还会有更复杂的工程建设。

那有没有办法减少这个过程中的难度呢？接下来笔者会介绍三种方案

社区模板

社区模板是人们根据长期开发经验抽象出来的一种高完成度脚手架。通常包含了视图渲染，项目构建，热更新，代码检查，类型校验等一系列开发中需要的完备能力。你只需要把模板下载下来，修改部分代码就能完成一个应用。但模板缺乏一定灵活度，如果要定制的地方较多会有较大的工作量。

以下列举了部分社区热门的模板，他们的区别在于使用的技术栈不一样。

• Chrome Extension (MV3) Boilerplate with React 18 and Webpack 5
• chrome-extension-typescript-starter
• web-extension-starter
• react-typescript-web-extension-starter

CRXJS

CRXJS是一个 Vite插件，具有热更新和静态资源导入等开箱即用的功能。可以使用于React、Vue、Solid项目。它的最大亮点是会解析manifest去寻找项目的依赖文件，这样一来你不再需要手动维护打包文件里的路径声明了。

目前crx.js已经被 chrome extension官方开发文档推荐。

Plasmo

lasmo号称是浏览器扩展界的 Next.js 。

在它的Github主页如下介绍

Plasmo 框架是一款黑客为黑客打造的功能强大的浏览器扩展程序软件开发工具包（SDK）。使用 Plasmo 来构建你的浏览器扩展程序，不需要操心扩展的配置文件和构建时的一些奇怪特性。 具有如下特性

• 一流的 React + Typescript 支持
• 声明式开发（自动生成 manifest.json）
• 将UI组件渲染到网页
• 扩展内置页面
• 扩展热重载 + React 模块热更新
• .env*文件
• 扩展储存 API
• 扩展通信 API
• 远程代码打包 (例如 Google Analytics)
• 支持多个浏览器和manifest版本
• 通过BPP进行自动部署
• 可选 Svelte 或 Vue 进行开发