會CSS就會去廣告~
傳統(tǒng)去廣告方法的弊端
我們?yōu)g覽網(wǎng)頁的時(shí)候經(jīng)常不免會看到各種不想看到的廣告內(nèi)容怯晕，最簡單的方案就是通過瀏覽器插件來解決潜圃，比如大名鼎鼎的AdBlock插件以及國內(nèi)的各種廣告攔截助手缸棵。
但這些插件的攔截能力可定制化程度不高，像AdBlock需要通過其定義的一套語法規(guī)則通過CSS選擇器來屏蔽一些DOM元素谭期，碰到一些特殊的情況就無能為力了堵第。
比如一個(gè)頁面上的某些重要元素被綁定了事件，點(diǎn)擊的時(shí)候會跳轉(zhuǎn)到廣告頁面隧出，這時(shí)候就不能通過簡單的屏蔽DOM元素的方式來實(shí)現(xiàn)了踏志。
簡單高效的自定義方式
對于這些情況我們可以使用一個(gè)強(qiáng)大的瀏覽器插件——Greasemonkey，簡稱GM胀瞪，中文俗稱為“油猴”针余，支持Firefox和Chrome瀏覽器。
油猴并不是一個(gè)專門用來去廣告的插件凄诞，而是一個(gè)往頁面中植入JavaScript代碼的工具圆雁，用來修改頁面，或者添加一些功能帆谍，比如自動填充表單伪朽、顯示網(wǎng)盤文件下載鏈接等。
開發(fā)功能非常簡單汛蝙，只需要通過js調(diào)用對應(yīng)API函數(shù)即可烈涮。
簡單幾行代碼，就可以去除大部分頁面廣告窖剑。
快速入門GM腳本
油猴的使用非常簡單坚洽，我們編寫一個(gè)js腳本，然后配置好對應(yīng)的網(wǎng)址西土。
這樣當(dāng)瀏覽器訪問匹配的網(wǎng)址時(shí)讶舰，油猴會加載我們編寫的js腳本，運(yùn)行里面的代碼翠储。
簡而言之分兩步绘雁。
需要注意的是睹栖，配置參數(shù)是在以
==UserScript==開頭，==/UserScript==結(jié)尾的注釋中的茧痕。完整的示例如下：
// ==UserScript==// @name XX廣告過濾// @version 0.1// @icon https://www.xxx.com/favicon.ico// @description try to take over the world!// @author You// @include http*://xx.com/*// @grant GM_addStyle// @run-at document-start// ==/UserScript==https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg
2種常見場景以及對應(yīng)的操作
修改樣式
這是最簡單的屏蔽廣告的方式野来，只要配置規(guī)則就行了，能屏蔽80%以上的廣告踪旷。以某論壇廣告為例曼氛，這個(gè)論壇的廣告是直接夾雜在帖子當(dāng)中，下方有個(gè)小小的字標(biāo)明廣告令野，一不小心就點(diǎn)進(jìn)去了舀患。
而且帖子中間夾雜著毫不相干的廣告，相當(dāng)影響體驗(yàn)彩掐。
這種廣告屏蔽起來相當(dāng)簡單构舟，寫一條樣式規(guī)則，將其
display屬性置為none就行了堵幽。.home-place-item {display: none!important;}!important提升權(quán)限。大部分廣告可以通過上面 css選擇器 + display屬性 的方式屏蔽朴下。但有些廣告處理起來會比較麻煩努咐。
例如搜索引擎的廣告，就使用了一些方式來“保護(hù)”殴胧。
某搜索引擎搜索“機(jī)票”可以看到下面的廣告信息渗稍。
可以看到該廣告元素style屬性中使用了最高權(quán)重的display、visibility兩個(gè)屬性团滥，所以用上面隱藏的方式肯定是無效的竿屹。
所以只能選擇其他的方式，這里需要考驗(yàn)大家的css基本功了灸姊。
讓一個(gè)元素隱藏的方式有哪些拱燃？
下面是一種實(shí)現(xiàn)方式：
[cmatchid] {height: 0;overflow: hidden;}阻止js文件加載
還有一類廣告并不是以靜態(tài)元素的方式呈現(xiàn)，甚至你在頁面上都看不到它力惯，它只在你第一次點(diǎn)擊某個(gè)功能的時(shí)候彈出來碗誉。這種處理起來就相對麻煩召嘶，因?yàn)橹苯訉υ剡M(jìn)行修改可能會影響到正常功能使用。
但是這種廣告的事件綁定一般都是單獨(dú)寫在某個(gè)js文件中的哮缺，細(xì)心查找弄跌，然后阻止對應(yīng)的js文件加載就可以從根本上解決問題。
瀏覽器其實(shí)為插件提供了API用來阻止資源加載尝苇，但是油猴卻沒有主動提供铛只。
后來在issue中找到了一個(gè)隱藏API來實(shí)現(xiàn)這個(gè)功能。
以阻止
https://xx.com 下的文件為例茎匠，可以在腳本開頭引用webRequest功能：// @webRequest [{"selector":"https://xx.com/*","action":"cancel"}]更多
只要你懂web前端格仲，只要你肯動手押袍，你的網(wǎng)頁都可以變成你想象的樣子诵冒。裝上插件，去自定義你的頁面吧谊惭！
示例腳本地址：
https://github.com/yalishizhude/block-ad-scripts
?
