認識Chrome擴展插件

1、前言

現如今的時代，絕大多數人都要跟瀏覽器打交道的，說到瀏覽器那肯定是Chrome瀏覽器一家獨大，具體數據請看👇

知名流量監測機構 Statcounter 公布了 7 月份全球桌面瀏覽器市場份額，主要數據如下：

瀏覽器 市場份額 月漲跌份額
Chrome 66.19% -0.74%
Edge 10.84% +0.2%
Safari 8.94% +0.01%
Firefox 8.08% +0.28%
Opera 3.06% +0.08%
IE 0.75%

瀏覽器擴展插件的用途

  • 生產力工具（和瀏覽器進行交互：標籤、書籤、下載、代理、cookie等）

  • 網頁內容豐富（改變瀏覽器外觀、桌面通知、右鍵菜單、訂製新標籤頁）

  • 資訊聚合（更像是一個快應用，類似小程式）

  • 樂趣和遊戲（小恐龍（chrome://dino/）遊戲，想必都玩過）

總之擴展程式讓瀏覽器的功能更加強大，更加貼合用戶使用。不管是不是軟體開發人員，或多或少都會使用到瀏覽器擴展插件，常見的比如：書籤、網頁翻譯、廣告屏蔽......

學習Chrome擴展插件勢在必行🏃‍♂️🐱‍🏍

  • Chrome extensions 文檔

  • 插件的架構可以參考這裡

  • Chrome擴展程式應用商店入口

  • 管理使用chrome擴展。訪問 url: chrome://extensions，打開開發者模式

擴展程式是基於 Web 技術（如 HTML、CSS 和 JavaScript）構建的軟體程式，使用戶能夠自定義 Chrome 瀏覽體驗。（前端開發人員技能範圍之內😁😁）

本文從應用著手，通過講解擴展插件的特性來啟發讀者對其進一步探索。

2、Chrome extensions 和 Chrome Plugin的區別

  • Chrome Extension（Chrome擴展插件）僅僅是用來增強瀏覽器網頁的功能，它是利用瀏覽器提供的已有功能和和各種API，進行功能組合，從而改善瀏覽器體驗，停留在瀏覽器層面；

  • Chrome Plugin（Chrome插件）不僅能增強網頁的功能，同時能夠擴展瀏覽器本身的功能；當瀏覽器提供的功能已經無法滿足你的需求，就需要你通過C/C++這樣的編譯語言來擴展瀏覽器的功能，例如我們常用的Flash 插件，Chrome Plugin工作在內核層面。

3、擴展如何工作

  • 擴展是基於 HTML、JavaScript 和 CSS 等 Web 技術構建的。它們在單獨的沙盒執行環境中運行，並與 Chrome 瀏覽器交互。

  • 擴展允許您通過使用 API 修改瀏覽器行為和訪問 Web 內容來「擴展」瀏覽器。擴展通過最終用戶 UI 和開發人員 API 進行操作：

  • 擴展用戶介面 這為用戶提供了一種一致的方式來管理他們的擴展。

  • 擴展 API允許擴展程式碼訪問瀏覽器本身的功能：激活選項卡、修改網路請求等。

要創建擴展，您需要組合一些資源清單: manifest.json、 JavaScript、 HTML 和 CSS 文件、圖片等。

4、Chrome擴展文件

Chrome擴展文件以.crx為後綴名，.crx實際上是一個壓縮文件，使用解壓文件打開這個文件就可以看到其中的文件目錄

下圖是 Axure 擴展插件原文件：

因此可以認為，我們實際上就是寫一個Web應用，然後將按照Chrome的規定將一個快捷方式放在Chrome工具欄上。如下圖：

上圖中左邊地址欄內部的按鈕是page action（Chrome插件，直接內置在Chrome里的），右邊地址欄外部的是 browser action（Chrome 擴展插件）

5、擴展插件使用

對於開發和測試，您可以使用擴展開發者模式將這些「解壓」載入到 Chrome 中，或者直接拖動crx文件到管理擴展插件頁面。如果擴展感到滿意，也可以打包並分享給小夥伴使用。

6、popup彈出窗口

  • popup.html可以在裡面放置任何html元素，它的寬度是自適應的。當然，這個彈出窗口不會被Chrome攔截

  • popup 無法通過程式打開，只能由用戶點擊打開。點擊 popup 之外的區域會導致 popup 收起。

下圖是 FeHelper 擴展插件的彈出窗👇

7、Background Pages後台頁面

8、Chrome擴展插件運行的核心機制

Chrome擴展插件中比較核心的幾個概念：Extension Page、background.js、content_script.js

下圖展示他們之間的關係，以及如何通訊


（圖片來源網路，侵刪）

運行時的三個進程：

  • 擴展進程（Extension Process）

  • 頁面渲染進程（Page Render Process）

  • 瀏覽器進程（Browser Process）

  1. 擴展進程中運行Extension Page，主要包括backgrount.html和popup.html,

  • backgrount.html中沒有任何內容，是通過background.js創建生成，當瀏覽器打開時，會自動載入插件的background.js文件，它獨立於網頁並且一直運行在後台，它主要通過調用瀏覽器提供的API和瀏覽器進行交互

  • popup.html有內容的，跟我們普通的web頁面一樣，由html、css、Javascript組成，它是按需載入的，需要用戶去點擊地址欄的按鈕去觸發，才能彈出頁面。

  1. 渲染進程主要運行Web Page,當打開頁面時，會將content_script.js載入並注入到該網頁的環境中，它和網頁中引入的Javascript一樣，可以操作該網頁的DOM Tree，改變頁面的展示效果

  2. 瀏覽器進程在這裡更多起到橋樑作用，作為中轉可以實現Extension Page和content_script.js之間的消息通訊。

最後

本文介紹的是 chrome 擴展基礎知識，相信看完以上之後，你會對 Chrome 擴展插件有了一個比較清晰的認識。相信chrome擴展會大有作為，會不會迫不急待的要體驗一下呢🤔，我根據Chrome插件開發官網示例寫的一個小擴展插件，點擊這裡查看項目。

🌹 持續更文，關注我，你會發現一個踏實努力的寶藏前端😊，讓我們一起學習，共同成長吧。

🎉 喜歡的小夥伴記得點贊關注收藏喲，回看不迷路 😉

🎁 歡迎大家評論交流, 蟹蟹😊

Tags:

VirMach 便宜 VPS