寫一個 Chrome 瀏覽器插件

一、什麼是瀏覽器插件

瀏覽器插件是依附於瀏覽器，用來拓展網頁能力的程序。插件具有監聽瀏覽器事件、獲取和修改網頁元素、攔截網絡請求、添加快捷菜單等功能。使用瀏覽器插件可以實現很多有趣的功能。

二、瀏覽器插件有哪些種類

• 以 chromium 爲內核的瀏覽器插件如 Chrome

•firefox 瀏覽器插件

•safari 瀏覽器插件

 本文只介紹 Chrome 插件的原生開發流程。

三、插件目錄介紹

2oPNDw

四、開始寫一個插件

1. 配置 manifest。

以下是一個基礎的 manifest 配置

2. 寫一個插件的彈框界面 popup.html

和寫 html 頁面一樣，在 body 裏面寫元素，但是需要注意樣式文件 popup.css 和腳本文件 popup.js 需要外部引入。

3. 寫一個插件彈框界面的樣式文件 popup.css。

4. 寫一個插件彈框界面的腳本文件 popup.js。

腳本文件的主要作用在於響應插件彈窗的行爲事件，併發送消息給內容腳本或者後臺腳本。

以下代碼是在 popup.js 中，監聽 id 爲 tag 元素的點擊事件，獲取當前窗口 active 標籤頁，並給此標籤頁推送一個 message。

4. 寫一個插件的內容腳本 content.js

content.js 會被插入到網頁環境中，用於監聽瀏覽器事件，讀取和操作 DOM 元素。

以下代碼是監聽頁面 load 事件，和接收來自第三步中 send 的 message。

window.addEventListener("load", function () {
    // 監聽頁面load事件
})

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log("-----------");
  if (request.greeting === "tag") {
    console.log(request.greeting)
  }
});

5. 寫一個插件的後臺腳本 background.js

後臺腳本會在瀏覽器窗口打開期間持續運行，監聽瀏覽器事件，網絡請求等。

以下代碼是瀏覽器屏蔽漏某些 url 請求的實現。

把上述的幾個文件創建完成之後就實現了一個簡單的插件，然後直接安裝到瀏覽器擴展即可。

五、解釋幾個消息發送和接收的 Api

1. 獲取指定的瀏覽器標籤頁：

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {})

2. 向指定標籤頁中的內容腳本發送一條消息，其中包含在發送迴響應時運行的可選回調函數。在當前擴展程序的指定標籤頁中運行的每個內容腳本中都會觸發 runtime.onMessage 事件。

chrome.tabs.sendMessage(tabs[0].id, { greeting: "tag-remove" }, function (response) { console.log(response); });

3. 向擴展程序或其他擴展程序 / 應用中的事件監聽器發送一條消息。請注意，擴展程序無法使用此方法向內容腳本發送消息。如需向內容腳本發送消息，請使用    

chrome.runtime.sendMessage(  extensionId?: string,  message: any,  options?: object,  callback?: function,)

4. onMessage，通過擴展程序進程（通過 runtime.sendMessage）或內容腳本（通過 tabs.sendMessage）發送消息時觸發。

chrome.runtime.onMessage.addListener(  callback: function,)

六、接下來讓我們豐富插件的能力

1. 實時刪除頁面上的元素，我們經常會遇到一些煩人的廣告，刪掉他。廣告一般都是有固定的元素節點的，找到元素節點的 class 或者 id，按以下處理。

以百度一下頁面舉例，以下代碼實時監聽網頁元素，發現 class 爲 s-p-top 的元素後就會刪除改元素，這裏我給被刪除元素的位置加了一個紅色邊框用來測試，實際使用中可以刪除添加紅框的代碼。

在 content.js 中添加以下代碼：

通過下面兩個圖對比可以看出使用插件後百度圖片被刪除了：

2. 有人不習慣點開右上角插件再點擊功能按鈕，怎麼辦呢，簡單，給瀏覽器右鍵菜單添加快捷鍵。

以下代碼爲添加瀏覽器右鍵菜單的快捷鍵，並監聽菜單點擊事件，可在 menu2 中發起請求。

在 background.js 中：

效果如下：

3. 還是攔截廣告，廣告可能出現在 iframe 中，但是呢我不想使用刪除 DOM 的方式，怎麼辦呢，那就直接攔截網絡請求。

在 background.js 中：

我們還以 baidu.com 爲例，在 MDN 中測試，修改 iframe src 的值爲 baidu.com.

使用插件前結果如下:

使用插件後結果如下，可以發現 iframe 中沒有渲染 baidu.com，並且在 network 中可以看到 baidu.com 被屏蔽了:

4. 自定義一個自己的新開頁

兩步走

第一步：在 manifest 中定義 newtab（就是一個 html 文件，這個文件會覆蓋原生的瀏覽器新開頁）

第二步：創建 newtab.html 文件，可以在這個文件定義新開頁的樣式和 js，且此樣式文件和 js 文件不用添加到 content_scripts 中

效果如下

5. 標記頁面文本

在閱讀網頁文檔時，經常會想標記一些重點文本，可以直接用擴展來實現：

在 background.js 中：

在 content.js 中：

效果：

功能先豐富到這裏，後面再繼續補充~

七、參考文檔

chrome 擴展參考文檔

chrome Api 文檔

manifest 權限配置文檔

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/19HcjCbG_neaN14CJb0qdQ

猜你喜歡