教你編寫百度搜索廣告過濾的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需要的。
### 2.2 manifest.json
```
{
"name": "百度搜索廣告過濾",
"version": "1.0.0",
"manifest_version": 2,
// 簡單描述
"description": "百度搜索廣告過濾",
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png"
},
// 瀏覽器小圖表部分
"browser_action": {
"default_title": "百度搜索廣告過濾",
"default_icon": "images/icon16.png"
//"default_popup": "html/calc.html"
},
"content_scripts": [
{
"js": [
"scripts/jquery-1.7.1.min.js",
"scripts/include.js"
],
// 滿足什麼條件下使用該指令碼
"matches": [
"
## 3 百度搜索的廣告特徵
### 3.1 文件結構特徵* 廣告可以分首尾兩個地方顯示，也可能只有在首部顯示 * 多個廣告可能被一個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核心的瀏覽器上，勾選“允許訪問敏感頁面”就完成安裝。