大家肯定有這樣的經歷，瀏覽網頁的時候，左右兩端廣告，諸如“屠龍寶刀，點擊就送”，以及最近火的不行的林子聰37傳奇霸業什么“霸業面具，霸業吊墜”的魔性廣告總是充斥我們的眼球。
當然有現成的擴展程序或者插件（兩者概念稍有不同）可以清除頁面廣告，但是既然身為一名程序猿，尤其是FEDer，為什么不嘗試一下自己寫一個清除廣告的擴展程序呢。其實，編寫一個瀏覽器擴展程序十分簡單，尤其是chrome擴展，可以完全使用前端技術（HTML/CSS/JS）完成一個自己編寫的擴展程序。讓我們一步一步，學習一下如何編寫一個簡單的清除廣告的擴展程序，跟煩人的頁面廣告say goodbye。
Chrome擴展程序介紹
首先，想明確的一點是，編寫一個chrome擴展擴展程序並不難，入手也十分容易，大家不用覺得門檻特別高。
一個應用（擴展）其實是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。 應用（擴展）本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。
其實明白了這一點，那么我們的目的就很明確了，要做一個清除頁面廣告的擴展程序，核心就是編寫一個腳本文件，注入到我們訪問的頁面中，通過匹配廣告元素的DOM節點，將其干掉清除。
建立擴展目錄：
每個擴展（extension）都應該包含下面的文件：
- 一個manifest文件
- 一個或多個html文件
- 可選的一個或多個javascript文件
- 可選的任何需要的其他文件，例如圖片
- 擴展程序圖標icon...
manifest.json:
我們的擴展目錄需要創建的第一個文件是一個清單文件，包含了應用（擴展）的基本信息，如擴展名稱、版本號，及最重要的文件列表，應用（擴展）所需要的權限等。從更高的層次來看，我們將使用它來向 Chrome 瀏覽器聲明擴展程序將會做什么，以及為了完成這些任務所需要的權限：
{
"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 var clearAd = {
2 clear: function() {
3 //此處可手動添加廣告框id名，去除頑疾ad必備
4 var ad_id_name = [
5 "cproIframe2001holder",
6 ...
7 "cproIframe2008holder",
8 ];
9
10 //此處添加廣告框類名
11 var ad_css_name = [
12 "cproIframe_u410704_3",
13 ...,
14 "hover_btn"
15 ];
16
17 for (var i = 0; i < ad_id_name.length; i++) {
18 $('#' + ad_id_name[i]).hide();
19 }
20
21 for (var i = 0; i < ad_css_name.length; i++) {
22 $('.' + ad_css_name[i]).hide();
23 }
24 },
25 //簡單的智能算法
26 findSomeAdPossible: function() {
27 var sap = $('div iframe'),
28 ad_img = $('div script').parent().find('img,embed'),
29 float_img = $('div object').parent().find('img,embed');
30
31 this.arrayDel(sap, 360, 200);
32 this.arrayDel(ad_img, 350, 150);
33 this.arrayDel(float_img, 350, 150);
34 },
35 arrayDel: function(arr, conWidth, conHeight) {
36 var len = arr.length;
37
38 for (var i = 0; i < len; i++) {
39 var self = arr.eq(i);
40
41 if (self.width() <= conWidth || self.height() <= conHeight) {
42 self.hide();
43 }
44
45 }
46 },
47 init: function() {
48 this.clear();
49 this.findSomeAdPossible();
50 }
51 }
當然，這里只是簡單是示例如何找到廣告並清除之，算法非常簡單並不嚴謹（勿噴），而且會有幾率誤殺”良性頁面“。有興趣的朋友可以自行改寫。
這樣，一個簡單的清除廣告的擴展程序就編寫好了，只要擴展正常安裝，腳本將會被注入到所有匹配到的頁面當中並發揮作用，看一下效果：
開啟擴展前后：
如果想查看注入的腳本文件是否正常運行，我寫了一句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 只不過是把兩種類型的組件分別給與了專有名稱，一個叫"擴展"，另一個叫"插件"。
- 擴展（Extension），指的是通過調用 Chrome 提供的 Chrome API 來擴展瀏覽器功能的一種組件，工作在瀏覽器層面，使用 HTML + Javascript 語言開發。比如著名的 Adblock plus。
- 插件（Plug-in），指的是通過調用 Webkit 內核 NPAPI 來擴展內核功能的一種組件，工作在內核層面，理論上可以用任何一種生成本地二進制程序的語言開發，比如 C/C++、Delphi 等。比如Flash player 插件，就屬於這種類型。一般在網頁中用 <object> 或者 <embed> 標簽聲明的部分，就要靠插件來渲染。
本文只是非常簡單的介紹了chrome擴展，只是chrome擴展的冰山一角，使用chrome擴展可以實現更多你想象不到的功能，更多詳情或者完整的API，請點擊這里。
本文實例的完整的擴展（extension）代碼在我的github上可以下載。
原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。