一、什么是瀏覽器插件

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

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

?以chromium為內核的瀏覽器插件如Chrome

??firefox瀏覽器插件

???safari瀏覽器插件

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

三、插件目錄介紹

四、開始寫一個插件

1. 配置manifest。

以下是一個基礎的manifest配置

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

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

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

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

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

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

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

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

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

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

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

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

后臺腳本會在瀏覽器窗口打開期間持續(xù)運行，監(jiān)聽瀏覽器事件，網絡請求等。

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

?

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

?

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

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

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

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

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

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

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

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

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

想了解其他瀏覽器插件Api，請點擊跳轉?

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

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

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

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

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

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

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

在background.js中：

效果如下：

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

在background.js中：

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

使用插件前結果如下:

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

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

兩步走

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

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

效果如下

5. 標記頁面文本

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

在background.js中：

在content.js中：

效果：

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

七、參考文檔

?chrome擴展參考文檔?

?chrome Api文檔?

?manifest權限配置文檔?

?審核編輯 黃宇