教你編寫百度搜索廣告過濾的chrome插件

1 前言

目前百度搜索列表首頁裏，廣告5條正常內容是10條，而且廣告都是前1到5條的位置，與正常內容的顯示樣式無異。對於我們這樣有能力的開發者，其實可以簡單的實現一個chrome插件，在百度搜索頁面裏執行一些我們自己的javascript，刪除掉這些廣告條目。

2 插件簡介

Chrome插件邏輯主體爲兩部分組成，一是在目標文檔（比如www.baidu.com頁面）運行的js和css，叫content_scripts；一部分是在chrome外殼上加載與顯示的內容（比如圖標和設置界面）叫browser_action，這些都需要在一個manifest.json的文件裏描述。

2.1 插件結構

manifest.json
scripts
  --jquery-1.7.1.min.js
  --include.js
images
  --icon16.png
  --icon32.png

其中，scripts下的js是content_scripts需要的,images下的圖片是叫browser_action需要的。

3 百度搜索的廣告特徵

3.1 文檔結構特徵

<div id="content_left">
    <div>
        <div>廣告1</div>
        <div>廣告2</div>
        <div>廣告3</div>
        <div>廣告4</div>
    </div>

    <div>搜索記錄1</div>
    <div>搜索記錄2</div>

    <div>
        <div>廣告5</div>
    </div>
</div>

• 廣告可以分首尾兩個地方顯示，也可能只有在首部顯示
• 多個廣告可能被一個div包住，此div與搜索記錄平行，但有時候廣告與搜索記錄直接平行

3.2 樣式特徵

• 廣告條目的class名稱是動態的，每次刷新都得到不一樣的class名
• 廣告條目使用了內聯樣式，用於保證廣告的顯示屬性不受樣式表的影響

3.3 自保護特徵

在文檔加載完成的兩秒之內，廣告條目的dom受到保護，試圖修改廣告的內聯樣式或直接刪除廣告的dom，都會觸發生成新的不一樣廣告，插入搜索記錄前面。

4 廣告過濾思路

由於百度搜索在反反廣告上做了很多措施，基於css級別的隱藏廣告思路是不太可行了，我們可以基於jQuery，監測document的元素插入事件，在裏面搜索廣告條件，進而刪除。雖然百度有自保護特徵，但終究插入新廣告也是觸發到測document的元素插入事件。

4.1 include.js代碼

; (function () {
    $(document).bind("DOMNodeInserted", function (e) {
        $("#content_left div[data-click] span:contains('廣告')")
            .parents("#content_left div[data-click]")
            .remove();
    });
})();

$("#content_left div[data-click] span:contains('廣告')")可以將廣告標識選擇出來，向上選擇到#content_left div[data-click]，就是廣告條目，然後把它刪除。刪除之後，百度會自動插入新的廣告，新廣告也符合這個選擇器，所以會二次運行我們的去廣告代碼邏輯。

4.2 插件和源代碼

源代碼已經放到github上，把裏面有一個已打包好的BaiduAdBlock.crx，將其拖曳到chrome內核的瀏覽器上，勾選“允許訪問敏感頁面”就完成安裝。

github鏈接
https://github.com/xljiulang/BaiduAdBlock