教你編寫百度搜索廣告過濾的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 文件結構特徵
廣告1
廣告2
廣告3
廣告4
搜尋記錄1
搜尋記錄2
廣告5
* 廣告可以分首尾兩個地方顯示,也可能只有在首部顯示 * 多個廣告可能被一個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核心的瀏覽器上,勾選“允許訪問敏感頁面”就完成安裝。