寫(xiě)一個(gè)Chrome瀏覽器插件

一、什么是瀏覽器插件

瀏覽器插件是依附于瀏覽器，用來(lái)拓展網(wǎng)頁(yè)能力的程序。插件具有監(jiān)聽(tīng)瀏覽器事件、獲取和修改網(wǎng)頁(yè)元素、攔截網(wǎng)絡(luò)請(qǐng)求、添加快捷菜單等功能。使用瀏覽器插件可以實(shí)現(xiàn)很多有趣的功能。

二、瀏覽器插件有哪些種類(lèi)

?以chromium為內(nèi)核的瀏覽器插件如Chrome

??firefox瀏覽器插件

???safari瀏覽器插件

本文只介紹Chrome插件的原生開(kāi)發(fā)流程。

三、插件目錄介紹

四、開(kāi)始寫(xiě)一個(gè)插件

1. 配置manifest。

以下是一個(gè)基礎(chǔ)的manifest配置

2. 寫(xiě)一個(gè)插件的彈框界面popup.html

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

3. 寫(xiě)一個(gè)插件彈框界面的樣式文件popup.css。

4. 寫(xiě)一個(gè)插件彈框界面的腳本文件popup.js。

腳本文件的主要作用在于響應(yīng)插件彈窗的行為事件，并發(fā)送消息給內(nèi)容腳本或者后臺(tái)腳本。

以下代碼是在popup.js中，監(jiān)聽(tīng)id為tag元素的點(diǎn)擊事件，獲取當(dāng)前窗口active標(biāo)簽頁(yè)，并給此標(biāo)簽頁(yè)推送一個(gè)message。

4. 寫(xiě)一個(gè)插件的內(nèi)容腳本content.js

content.js會(huì)被插入到網(wǎng)頁(yè)環(huán)境中，用于監(jiān)聽(tīng)瀏覽器事件，讀取和操作DOM元素。

以下代碼是監(jiān)聽(tīng)頁(yè)面load事件，和接收來(lái)自第三步中send的message。

window.addEventListener("load", function () {
    // 監(jiān)聽(tīng)頁(yè)面load事件
})

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

5. 寫(xiě)一個(gè)插件的后臺(tái)腳本background.js

后臺(tái)腳本會(huì)在瀏覽器窗口打開(kāi)期間持續(xù)運(yùn)行，監(jiān)聽(tīng)瀏覽器事件，網(wǎng)絡(luò)請(qǐng)求等。

以下代碼是瀏覽器屏蔽漏某些url請(qǐng)求的實(shí)現(xiàn)。

?

把上述的幾個(gè)文件創(chuàng)建完成之后就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的插件，然后直接安裝到瀏覽器擴(kuò)展即可。

?

五、解釋幾個(gè)消息發(fā)送和接收的Api

1. 獲取指定的瀏覽器標(biāo)簽頁(yè)：

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

2. 向指定標(biāo)簽頁(yè)中的內(nèi)容腳本發(fā)送一條消息，其中包含在發(fā)送回響應(yīng)時(shí)運(yùn)行的可選回調(diào)函數(shù)。在當(dāng)前擴(kuò)展程序的指定標(biāo)簽頁(yè)中運(yùn)行的每個(gè)內(nèi)容腳本中都會(huì)觸發(fā) runtime.onMessage 事件。

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

3. 向擴(kuò)展程序或其他擴(kuò)展程序/應(yīng)用中的事件監(jiān)聽(tīng)器發(fā)送一條消息。請(qǐng)注意，擴(kuò)展程序無(wú)法使用此方法向內(nèi)容腳本發(fā)送消息。如需向內(nèi)容腳本發(fā)送消息，請(qǐng)使用

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

4. onMessage，通過(guò)擴(kuò)展程序進(jìn)程（通過(guò) runtime.sendMessage）或內(nèi)容腳本（通過(guò) tabs.sendMessage）發(fā)送消息時(shí)觸發(fā)。

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

想了解其他瀏覽器插件Api，請(qǐng)點(diǎn)擊跳轉(zhuǎn)?

六、接下來(lái)讓我們豐富插件的能力

1. 實(shí)時(shí)刪除頁(yè)面上的元素，我們經(jīng)常會(huì)遇到一些煩人的廣告，刪掉他。廣告一般都是有固定的元素節(jié)點(diǎn)的，找到元素節(jié)點(diǎn)的class或者id，按以下處理。

以百度一下頁(yè)面舉例，以下代碼實(shí)時(shí)監(jiān)聽(tīng)網(wǎng)頁(yè)元素，發(fā)現(xiàn)class為s-p-top的元素后就會(huì)刪除改元素，這里我給被刪除元素的位置加了一個(gè)紅色邊框用來(lái)測(cè)試，實(shí)際使用中可以刪除添加紅框的代碼。

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

通過(guò)下面兩個(gè)圖對(duì)比可以看出使用插件后百度圖片被刪除了：

2. 有人不習(xí)慣點(diǎn)開(kāi)右上角插件再點(diǎn)擊功能按鈕，怎么辦呢，簡(jiǎn)單，給瀏覽器右鍵菜單添加快捷鍵。

以下代碼為添加瀏覽器右鍵菜單的快捷鍵，并監(jiān)聽(tīng)菜單點(diǎn)擊事件，可在menu2中發(fā)起請(qǐng)求。

在background.js中：

效果如下：

3. 還是攔截廣告，廣告可能出現(xiàn)在iframe中，但是呢我不想使用刪除DOM的方式，怎么辦呢，那就直接攔截網(wǎng)絡(luò)請(qǐng)求。

在background.js中：

我們還以baidu.com為例，在MDN中測(cè)試，修改iframe src的值為baidu.com.

使用插件前結(jié)果如下:

使用插件后結(jié)果如下，可以發(fā)現(xiàn)iframe中沒(méi)有渲染baidu.com，并且在network中可以看到baidu.com被屏蔽了:

4. 自定義一個(gè)自己的新開(kāi)頁(yè)

兩步走

第一步：在manifest中定義newtab（就是一個(gè)html文件，這個(gè)文件會(huì)覆蓋原生的瀏覽器新開(kāi)頁(yè)）

第二步：創(chuàng)建newtab.html文件，可以在這個(gè)文件定義新開(kāi)頁(yè)的樣式和js，且此樣式文件和js文件不用添加到content_scripts中

效果如下

5. 標(biāo)記頁(yè)面文本

在閱讀網(wǎng)頁(yè)文檔時(shí)，經(jīng)常會(huì)想標(biāo)記一些重點(diǎn)文本，可以直接用擴(kuò)展來(lái)實(shí)現(xiàn)：

在background.js中：

在content.js中：

效果：

功能先豐富到這里，后面再繼續(xù)補(bǔ)充~

七、參考文檔

?chrome擴(kuò)展參考文檔?

?chrome Api文檔?

?manifest權(quán)限配置文檔?

?審核編輯 黃宇