打造一个极度舒适的Chrome扩展项目开发环境

大家好，我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章，感兴趣的可以 点个小星星。

Chrome 扩展能够提高浏览器的使用体验，通过自定义 UI 界面，监听浏览器事件，改变 Web 页面等操作来延展浏览器的功能。

Chrome 扩展项目使用前端 html，css，js 基础技术开发，一大痛点就是改动代码后的扩展更新问题，先来看一看 Chrome 扩展的更新逻辑：

扩展各部分	是否需要更新扩展
manifest.json	Yes
background service worker	Yes
content scripts	Yes (并且需要刷新 Web 页面)
action popup	No
options page	No
Other extension HTML pages	No

更新 Chrome 扩展意味着需要打开扩展管理界面（chrome://extensions），点击扩展的更新按钮，如下图：

如果每次改动代码，都需要这样操作一遍，才能看到效果，那也太痛苦了吧 😖，尤其是 content scripts，更新完扩展后还要去浏览器页签刷新页面，这极大的拉低开发效率和消磨人的耐心。

仔细想想想，目前前端项目开发已经有 HMR 热重载技术，在开发 Web 页面时可以实时查看效果，极大的提升了开发体验。那么，能否把这种极致的体验带到 Chrome 扩展开发中来呢？经过多番折腾探索，还真让我搞出来啦 🚀

感谢 vite

vite 作为下一代的前端工具链，用过的都说好 👍。

vite 为各种技术栈提供了模板：

JavaScript	TypeScript
vue	vue-ts
react	react-ts
vanilla	vanilla-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

vite 生成的项目将开箱支持：

• ✅ TypeScript
• ✅ html 的 HMR

用 vite 新建一个 Chrome 扩展项目，其 HMR 支持情况将如下：

扩展各部分	是否需要更新扩展	HMR
manifest.json	Yes
background service worker	Yes
content scripts	Yes (并且需要刷新 Web 页面)
action popup	No	✅
options page	No	✅
Other extension HTML pages	No	✅

感谢 @crxjs/vite-plugin

@crxjs/vite-plugin 是一个 vite 插件，旨在帮助开发者使用现代 web 开发技术开发 Chrome 扩展。

使用起来也是非常简单：

npm i @crxjs/vite-plugin@beta -D

在 vite.config.ts 中增加如下配置：

import { defineConfig } from "vite"
import { crx } from "@crxjs/vite-plugin"
import manifest from "./manifest"

export default defineConfig({
  plugins: [crx({ manifest })],
})

@crxjs/vite-plugin 通过解析 manifest 清单文件，找到扩展里相关的所有文件资源进行编译打包。

在配置完之后，项目将获得以下特性：

• manifest 不再须要是 json 文件，可以是 js 或 ts 文件！简直不要太方便 🚀

• 全方位 HMR

  扩展各部分	是否需要更新扩展	HMR
  manifest.json	Yes	✅
  background service worker	Yes	✅
  content scripts	Yes (并且需要刷新 Web 页面)	✅
  action popup	No	✅
  options page	No	✅
  Other extension HTML pages	No	✅

demo 项目源码 create-crx 我已经放在 GitHub 上，觉得不错可以 点个小星星 支持一下哦 🌹