Chrome扩展开发系列开篇
大家好，我是 dom 哥。這是我關于 Chrome 擴展開發的系列文章，感興趣的可以 點個小星星。
瀏覽器現狀 ??
研究機構 Statcounter 發布了 2023 年 9 月報告，揭示了有關瀏覽器的最新統計數據。
| 瀏覽器 | 市場份額 | Chromium-based? |
|---|---|---|
| Chrome | 63.56% | Yes |
| Safari | 19.85% | No |
| Edge | 5.43% | Yes |
| Firefox | 2.94% | No |
| Opera | ... | Yes |
可以看到基于 Chromium 的瀏覽器占了全球市場的 7 成！
對于前端開發來說，Chrome 更是形影不離的飯碗級軟件 ??。既然 Chrome 這么重要，那么把它研究透一定大有裨益。
在我看來，Chrome 值得深入研究的地方早有兩塊：DevTools 和 Extension。
先說說 DevTools，即開發者工具，是 Chrome 為我們提供的一套功能強大的集開發，調試， 分析諸多功能于一身的內置工具。如下圖所示：
像 Elements，Console，Sources， Network，Application 這些都是日常開發調試離不開的功能面板。但是我們開發者對 DevTools 的主要研究內容是怎么用。因為這些強大的功能面板都是 Chrome 內置的，作為開發者使用者，只能用，不能動代碼。
然后是 Extension，即 Chrome 擴展，是留給廣大開發者*發揮的天地。
- 想給一些頁面注入 js，css？
- 想跨瀏覽器的頁簽運行一個后臺服務？
- 想自定義新打開的標簽頁？
- 想實現什么天馬行空的想法？
這些都可以通過 Chrome 擴展實現！Chrome 為擴展程序提供了大量 chrome.* API 用于開放 Chrome 的能力。
大家開發的擴展可以發布到 Chrome 應用商店供海量用戶選擇，就像蘋果的 App Store 一樣！
Chrome 應用商店如下圖：
甚至，如果天時地利人和，你甚至可以通過 Chrome 擴展賺點零花錢 ?? 也不是不可能，不過別抱太大希望哦 ??
Chrome 擴展開發 ???
學習一門技術，最好的方式就是去官網，看官方文檔，跟著官方文檔邊看邊練，這是不會錯的路子。
Chrome Extension 也不例外。Chrome 官方為其擴展開發提供了詳盡的文檔，奈何，全是英文啊～，看的我四級詞匯都不夠用了：
不但有文檔，每個功能特性都提供了示例代碼，簡直不要太貼心～
總結，梳理，寫系列教程 ??
記得剛接觸到 Chrome Extension 時它還是 manifest V2 版本，當時是想做一個 Chrome 擴展，通過攔截網絡請求修改其 header 突破跨域限制。時過境遷，如今已是 manifest V3 版本，Chrome 對 webRequest 的細則已做了調整，當初寫的代碼即將不再支持運行 ??。
還折騰過一個錄制頁面操作的擴展，記錄下鼠標點擊和表單輸入等操作，可以重放，模擬這些操作再還原頁面狀態。后來清理磁盤，居然 TMD 手賤把項目清理掉了，大腿拍青，切記 git push 大于天啊！如今 Chrome 已經有了 Recorder 工具，和我當時的目標類似，只不過我當時的做法是直接用 content_scripts 在頁面上重放，而不是在 Puppeteer 里去重放。
期間還為了各種小用途開發過十幾個功能不一的擴展程序。現在主要是維護一個輔助日常開發，和業務高耦合的擴展。
但，幾年下來，雖寫了不少擴展程序，但總感覺零碎，所以我決定把有關 Chrome 擴展開發的東西系統的梳理總結起來，通過沉淀成一份系列教程，建立起知識體系，成為自己的核心競爭力。
目前心中的大綱簡單羅列如下，勾上的是已完成的：
后續慢慢完善吧，輪廓已成，細節可以慢慢雕琢。
Chrome 擴展開發似乎是個冷門，不過也可以理解，對前端開發來說，這屬于一種有了更好，沒有也罷的技術，就算不助我開發，也不影響我開發??。不管怎么樣，我都想堅持下去，其實我現在是奔著寫一本小冊的標準去的，說不定未來某天我真的會出本小冊。畢竟 35 歲危機不是鬧著玩兒的，提前搞搞副業總是好的，加油喲～
覺得不錯可以 點個小星星 支持一下哦 ??
總結
以上是生活随笔為你收集整理的Chrome扩展开发系列开篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 采用模块化设计，Sharkoon 推出新
- 下一篇： 三大运营商被曝取消车补、通信补贴，有员工