大家好，我是 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 上，覺得不錯可以 點個小星星 支持一下哦 ??

總結

以上是生活随笔為你收集整理的打造一个极度舒适的Chrome扩展项目开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。