寫個屏蔽百度搜索廣告的Chrome插件

工作生活都用百度比較多，畢竟它是目前為止感覺最好的國內PC搜索引擎。我縱使已經差不多煉成了一眼過濾廣告的眼力，但始終覺得礙眼，感覺還是寫個插件把它屏蔽了吧。這個插件開發的門檻其實非常低，只是一開始做不知道哪里查插件開發的資料才折騰了半天。

一、找一個百度網頁出來分析。

1、推廣鏈接有三種：上部無底色，上部有底色和下部有底色；通常是一開始上部的廣告是無底色的，刷新多幾次后就會變成有底色；

2、查看CSS可以看到，主搜索結果和廣告都在一個id為content_left的div容器里（見圖左上方紅框）；每一個搜索結果都是一個div，廣告的di會從3000開始排下去，而正常搜索結果的id是從1開始排下去，而下部有底色的推廣id為clone，這樣看來從id不是很好識別廣告；再看class，每條廣告的div都會有幾個隨機名稱的class，而正常搜索結果都有c-container這樣一個class，這應該是一個很好的突破點；

3、再想想屏蔽方式，一個方案是JS，一個方案是CSS。如果是JS的話，在頁面未加載完全之前廣告還是會顯示一定時間，而且還要處理點搜索按鈕Ajax頁面不刷新時屏蔽以及可能其它一些情況，感覺是有點麻煩而且主要是使用體驗不夠好。另一個方案CSS，CSS的渲染速度很快，那就看看可以用得上的CSS有哪些吧，百度頁面為了阻止廣告被隱藏自身有設置了兩個!important級別的內聯CSS（優先級最最高了）。

CSS屬性	優缺點分析	頁面本身CSS	結果
display:none;	最直接最理想的隱藏	display: block !important;	X 用不了
visibility:hidden;	也是非常理想的	visibility: visible !important;	X 用不了
opacity:0;	看不見但占位還在，而且還可以點擊		乄 不理想
transform: rotateX(90deg);	看不見但占位還在，不可點擊		乄 還行
height:0; overflow:hidden;	看不見也不會有占位		√ 就它了

 

2019年10月更新，發現還有一種混在搜索內容底部的無底色廣告，以及右部分百度自家的廣告；

於是增加了兩項CSS選擇器屏蔽，見下面的 noad.css代碼

 

二、把網頁扒下來，測試

Ctrl+S保存單頁到本地，然后直接在瀏覽器中打開。然后用Notepad++編輯頁面代碼，插入下面的代碼

<style>
#content_left>div:not(.c-container) {
    height: 0;
    overflow: hidden;
}
</style>

果然可以屏蔽，但還是有一些空隙，原來是每條廣告還有20px的margin-bottom，再加一條設為0就好了。

三、打包成為插件

在度娘上和博客園上找了幾篇寫Chrome插件的，但還是看得雲里霧里，弄得各種報錯，畢竟第一次弄，而Chrome插件的官方文檔網頁居然打不開（翻牆了也打不開）。折騰了一個下午搞不定，晚上在某乎看到了說某數字公司的瀏覽器插件開發文檔，總算是明白了，三兩下搞定。總共兩個代碼文件，一個圖標文件（非必需）。貼上代碼給大家瞧瞧吧：

manifest.json

{
    "manifest_version":2,
    "name":"clear BD",
    "description":"baidu search no AD",
    "version":"1.0",
    "icons": {"128":"icon.png"},
    "permissions":[
        "*://www.baidu.com/*"
    ],
    "content_scripts": [{
        "matches": ["*://www.baidu.com/*"],
        "css": ["noad.css"]
    }]
}

noad.css

#content_left>div:not(.c-container) {
    height: 0;
    overflow: hidden;
    margin-bottom: 0;
}

#content_left>div.leftBlock, .hit_top_new {
    height: auto;
/*    overflow: auto;
    margin-bottom: auto;*/
}

.c-container[id="1"]{
    display:none;
}
.c-container:nth-child(1){
    display:block;
}


#content_right td>div:not(#con-ar) {
    display: none;
}

 

福利→_→ 插件壓縮包下載

因為chrome安全條件更新，不能再使用離線的.crx 插件文件。所以請下載解壓成文件夾，再在chrome擴展中以“加載已解壓的擴展程序” 方式使用本擴展