本身作一款簡易的chrome擴展--清除頁面廣告

你們確定有這樣的經歷，瀏覽網頁的時候，左右兩端廣告，諸如「屠龍寶刀，點擊就送」，以及最近火的不行的林子聰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擴展

1. 在您的瀏覽器中訪問 chrome://extensions（或者單擊多功能框最右邊的按鈕： 打開 Chrome 瀏覽器菜單，並選擇更多工具(L)菜單下的擴展程序(E)，進入相同的頁面）。

2. 確保右上角開發者模式複選框已選中。 Ensure that the Developer mode checkbox in the top right-hand corner is checked.

3. 單擊加載正在開發的擴展程序…，彈出文件選擇對話框。

4. 瀏覽至您的擴展程序文件所在的目錄，並選定。

您也能夠將擴展程序文件所在的目錄拖放到瀏覽器中的 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上能夠下載。

原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

 

出處：http://www.cnblogs.com/coco1s/p/4725477.html