Chrome 擴展項目使用前端 html，css，js 基礎技術開發，一大痛點就是改動代碼後的擴展更新問題。仔細想想想，目前前端項目開發已經有 HMR 熱重載技術，在開發 Web 頁面時可以實時查看效果，極大的提升了開發體驗。那麼，能否把這種極致的體驗帶到 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），點擊擴展的更新按鈕，如下圖：
如果每次改動代碼，都需要這樣操作一遍，才能看到效果，那也太痛苦了吧
