1、前言

現如今的時代，絕大多數人都要跟瀏覽器打交道的，說到瀏覽器那肯定是

Chrome

瀏覽器一家獨大，具體資料請看

知名流量監測機構

Statcounter

公佈了 7 月份全球桌面瀏覽器市場份額，主要資料如下：

瀏覽器擴充套件外掛的用途

生產力工具（和瀏覽器進行互動：標籤、書籤、下載、代理、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）

擴充套件程序

中執行

Extension Page

，主要包括

backgrount。html

和

popup。html

，

backgrount。html

中沒有任何內容，是透過

background。js

建立生成，當瀏覽器開啟時，會自動載入外掛的background。js檔案，它獨立於網頁並且一直執行在後臺，它主要透過呼叫瀏覽器提供的API和瀏覽器進行互動

popup。html

有內容的，跟我們普通的web頁面一樣，由

html

、

css

、

Javascript

組成，它是按需載入的，需要使用者去點選位址列的按鈕去觸發，才能彈出頁面。

渲染程序

主要執行

Web Page

，當開啟頁面時，會將

content_script。js

載入並注入到該網頁的環境中，它和網頁中引入的

Javascript

一樣，可以操作該網頁的

DOM Tree

，

改變頁面的展示效果

瀏覽器程序

在這裡更多起到橋樑作用，作為中轉可以實現

Extension Page

和

content_script。js

之間的訊息通訊。

最後

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

這裡

檢視專案。https：//github。com/all-smile/myFirstExtension

本文作者：

甜點cc

本文連結：

https：//www。cnblogs。com/all-smile/p/16627670。html