大家肯定有這樣的經歷，瀏覽網頁的時候，左右兩端廣告，諸如“屠龍寶刀，點選就送”，以及最近火的不行的林子聰37傳奇霸業什麼“霸業面具，霸業吊墜”的魔性廣告總是充斥我們的眼球。
當然有現成的外掛可以清除頁面廣告，但是既然身為一名程式猿，尤其是FEDer，為什麼不嘗試一下自己寫一個清除廣告的外掛呢。其實，編寫一個瀏覽器外掛十分簡單，尤其是chrome外掛，可以完全使用前端技術（HTML/CSS/JS）完成一個自己編寫的外掛。讓我們一步一步，學習一下如何編寫一個簡單的清除廣告的外掛，跟煩人的頁面廣告say goodbye。
Chrome外掛介紹
首先，想明確的一點是，編寫一個chrome擴充套件外掛並不難，入手也十分容易，大家不用覺得門檻特別高。
一個應用（擴充套件）其實是壓縮在一起的一組檔案，包括HTML，CSS，Javascript指令碼，圖片檔案，還有其它任何需要的檔案。 應用（擴充套件）本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。
其實明白了這一點，那麼我們的目的就很明確了，要做一個清除頁面廣告的外掛，核心就是編寫一個指令碼檔案，注入到我們訪問的頁面中，通過匹配廣告元素的DOM節點，將其幹掉清除。
建立擴充套件目錄：
每個外掛擴充套件都應該包含下面的檔案：
- 一個manifest檔案
- 一個或多個html檔案
- 可選的一個或多個javascript檔案
- 可選的任何需要的其他檔案，例如圖片
- 外掛圖示icon…
manifest.json:
我們的擴充套件目錄需要建立的第一個檔案是一個清單檔案，包含了應用（擴充套件）的基本資訊，如副檔名稱、版本號，及最重要的檔案列表，應用（擴充套件）所需要的許可權等。從更高的層次來看，我們將使用它來向 Chrome 瀏覽器宣告擴充套件程式將會做什麼，以及為了完成這些任務所需要的許可權：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "清除頁面廣告", "version": "2.0", "manifest_version": 2, "description": "簡易製作的清除頁面廣告的chrome外掛", "permissions": [ "http://*/" ], "icons": { "16": "icon-16-coco.png", "128": "icon-128-coco.png" }, "browser_action": { "default_icon": "icon-16-coco.png", "default_popup": "popup.html" }, "content_scripts": [{ "matches": ["http://*/", "https://*/", "http://*/*", "https://*/*"], "js": ["js/jquery-1.10.1.min.js", "js/my-del-ad-script.js"] }] } |
接下來，將這一資料儲存在名為 manifest.json 的檔案中，放在您建立的目錄中，或者 從我的github上拷貝整個專案用作示例。
圖示與彈出頁面：
在manifest.json中，有個名為browser_action的key，其中”default_icon”和”default_popup”指的是擴充套件將顯示的圖示以及popup.html頁面。如果擴充套件配置及安裝成功，就會如下圖所示，其中在popup.html檔案中的內容將顯示在圖中default_popup區域中。
content_srcipts:
popup.html是擴充套件當中非常有用頁面，可以與使用者進行一個互動，不過在清除頁面廣告中並非主角。上面說的要向頁面當中注入指令碼檔案，主要就是靠content_scripts，Content scripts是在Web頁面內執行的javascript指令碼。通過使用標準的DOM，它們可以獲取瀏覽器所訪問頁面的詳細資訊，並可以修改這些資訊。
下面是content scipt可以做的一些事情範例：
- 匹配頁面中的DOM結點，並修改他們的樣式
- 放大頁面字型使文字更清晰
- 從頁面中找到沒有寫成超連結形式的url，並將它們轉成超連結。
- …….（所有你能想到的）
manifest.json中的content_scripts，有個”js”的key，擴充套件將會向所有匹配的頁面，依次注入在”js”當中定義的頁面，在本外掛中，就是依次注入了”js/jquery-1.10.1.min.js”, “js/my-del-ad-script.js”兩個檔案，其中my-del-ad-script.js就是我們要清除頁面廣告的程式碼所在。
當上面的步驟你都看懂之後，後面的工作就是，編寫簡單的指令碼，匹配頁面當中的廣告元素的DOM節點，然後將其清除（簡單的利用JQ的.hide()）。
編寫指令碼
現在，我們要做的就是分析一下頁面當中，廣告元素的DOM節點樣式。
看看下面幾張圖：
通過觀察發現，頁面廣告要不就是出現頻率特別高的同類廣告（兩側的頁遊推廣），另一類是通過iframe內嵌到頁面中的圖片。第一類廣告通常都擁有相同的ID屬性，基本上是 id:#cproIframe2001~#cproIframe2008。而第二類廣告通過選擇器匹配，也能非常容易的定位到，譬如其中一種為$(‘div iframe’).find(‘img’)。
這樣，我們就算是找到了定位到了這些廣告的DOM節點，如何清除呢？其實很簡單，我是直接將其display:none將其隱藏。清除清除，不一定要刪除節點，眼不見就可以了。
（很多園友提議直接remove掉節點能更好提升效能。）
看看簡單的JS程式碼（此段程式碼在my-del-ad-script.js中）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var clearAd = { clear: function() { //此處可手動新增廣告框id名，去除頑疾ad必備 var ad_id_name = [ "cproIframe2001holder", ... "cproIframe2008holder", ]; //此處新增廣告框類名 var ad_css_name = [ "cproIframe_u410704_3", ..., "hover_btn" ]; for (var i = 0; i < ad_id_name.length; i++) { $('#' + ad_id_name[i]).hide(); } for (var i = 0; i < ad_css_name.length; i++) { $('.' + ad_css_name[i]).hide(); } }, //簡單的智慧演算法 findSomeAdPossible: function() { var sap = $('div iframe'), ad_img = $('div script').parent().find('img,embed'), float_img = $('div object').parent().find('img,embed'); this.arrayDel(sap, 360, 200); this.arrayDel(ad_img, 350, 150); this.arrayDel(float_img, 350, 150); }, arrayDel: function(arr, conWidth, conHeight) { var len = arr.length; for (var i = 0; i < len; i++) { var self = arr.eq(i); if (self.width() <= conWidth || self.height() <= conHeight) { self.hide(); } } }, init: function() { this.clear(); this.findSomeAdPossible(); } } |
當然，這裡只是簡單是示例如何找到廣告並清除之，演算法非常簡單並不嚴謹（勿噴），而且會有機率誤殺”良性頁面“。有興趣的朋友可以自行改寫。
這樣，一個簡單的清除廣告的外掛就編寫好了，只要擴充套件正常安裝，指令碼將會被注入到所有匹配到的頁面當中併發揮作用，看一下效果：
開啟擴充套件前後：
如果想檢視注入的指令碼檔案是否正常執行，我寫了一句console，開啟控制檯檢視，看到Clear Start則是指令碼正常執行。
可以看到，廣告全部被清除，但是可能誤殺了一些有用的元素，JS程式碼可以更加精確改進。
更加精確的清除以及利用擴充套件實現更多的功能，趕緊動手試一下。
安裝Chrome擴充套件
- 在您的瀏覽器中訪問
chrome://extensions（或者單擊多功能框最右邊的按鈕：開啟 Chrome 瀏覽器選單，並選擇更多工具(L)選單下的擴充套件程式(E)，進入相同的頁面）。
- 確保右上角開發者模式核取方塊已選中。 Ensure that the Developer mode checkbox in the top right-hand corner is checked.
- 單擊載入正在開發的擴充套件程式…，彈出檔案選擇對話方塊。
- 瀏覽至您的擴充套件程式檔案所在的目錄，並選定。
您也可以將擴充套件程式檔案所在的目錄拖放到瀏覽器中的 chrome://extensions 上載入它。如果擴充套件程式有效的話，它將被載入並且立刻處於活動狀態！如果無效的話，頁面頂部將顯示錯誤訊息，請糾正錯誤再重試。
後記：
本文只是非常簡單的介紹了chrome擴充套件，只是chrome擴充套件的冰山一角，使用chrome擴充套件可以實現更多你想象不到的功能，更多詳情或者完整的API，請點選這裡。
本文例項的完整的外掛擴充套件程式碼在我的github上可以下載。
原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。