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

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

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

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

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

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

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

感谢 vite

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

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

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

• ✅ TypeScript
• ✅ html 的 HMR

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

感谢 @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 上，觉得不错可以 点个小星星 支持一下哦 🌹