摘要：簡(jiǎn)單高效的自定義方式對(duì)于這些情況我們可以使用一個(gè)強(qiáng)大的瀏覽器插件，簡(jiǎn)稱，中文俗稱為油猴，支持和瀏覽器。簡(jiǎn)單幾行代碼，就可以去除大部分頁(yè)面廣告。聲明需要使用的函數(shù)。

會(huì)CSS就會(huì)去廣告~

我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候經(jīng)常不免會(huì)看到各種不想看到的廣告內(nèi)容，最簡(jiǎn)單的方案就是通過(guò)瀏覽器插件來(lái)解決，比如大名鼎鼎的AdBlock插件以及國(guó)內(nèi)的各種廣告攔截助手。

但這些插件的攔截能力可定制化程度不高，像AdBlock需要通過(guò)其定義的一套語(yǔ)法規(guī)則通過(guò)CSS選擇器來(lái)屏蔽一些DOM元素，碰到一些特殊的情況就無(wú)能為力了。

比如一個(gè)頁(yè)面上的某些重要元素被綁定了事件，點(diǎn)擊的時(shí)候會(huì)跳轉(zhuǎn)到廣告頁(yè)面，這時(shí)候就不能通過(guò)簡(jiǎn)單的屏蔽DOM元素的方式來(lái)實(shí)現(xiàn)了。

對(duì)于這些情況我們可以使用一個(gè)強(qiáng)大的瀏覽器插件——Greasemonkey，簡(jiǎn)稱GM，中文俗稱為“油猴”，支持Firefox和Chrome瀏覽器。

油猴并不是一個(gè)專(zhuān)門(mén)用來(lái)去廣告的插件，而是一個(gè)往頁(yè)面中植入JavaScript代碼的工具，用來(lái)修改頁(yè)面，或者添加一些功能，比如自動(dòng)填充表單、顯示網(wǎng)盤(pán)文件下載鏈接等。

開(kāi)發(fā)功能非常簡(jiǎn)單，只需要通過(guò)js調(diào)用對(duì)應(yīng)API函數(shù)即可。

簡(jiǎn)單幾行代碼，就可以去除大部分頁(yè)面廣告。

油猴的使用非常簡(jiǎn)單，我們編寫(xiě)一個(gè)js腳本，然后配置好對(duì)應(yīng)的網(wǎng)址。

這樣當(dāng)瀏覽器訪問(wèn)匹配的網(wǎng)址時(shí)，油猴會(huì)加載我們編寫(xiě)的js腳本，運(yùn)行里面的代碼。

簡(jiǎn)而言之分兩步。

配置腳本。配置項(xiàng)大概在20個(gè)左右，下面我們介紹最重要的3個(gè)配置項(xiàng)。

編寫(xiě)腳本。調(diào)用插件提供的API函數(shù)，為頁(yè)面添加CSS樣式或者執(zhí)行js代碼。

@include 腳本匹配的網(wǎng)址，支持星號(hào)“* ”來(lái)匹配任意字符。可以使用多次表示匹配多個(gè)網(wǎng)址。

@grant 聲明需要使用的API函數(shù)。

@run-at 腳本執(zhí)行的時(shí)間，有5個(gè)可選值，CSS樣式我們選擇“document-start”在頁(yè)面渲染之前加載，而js腳本可以選擇“document-end”在頁(yè)面渲染完成后加載。

需要注意的是，配置參數(shù)是在以==UserScript==開(kāi)頭，==/UserScript==結(jié)尾的注釋中的。

完整的示例如下：

// ==UserScript==
// @name         XX廣告過(guò)濾
// @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==

具體說(shuō)明可以參考官方文檔：
https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg

這是最簡(jiǎn)單的屏蔽廣告的方式，只要配置規(guī)則就行了，能屏蔽80%以上的廣告。

以某論壇廣告為例，這個(gè)論壇的廣告是直接夾雜在帖子當(dāng)中，下方有個(gè)小小的字標(biāo)明廣告，一不小心就點(diǎn)進(jìn)去了。
而且帖子中間夾雜著毫不相干的廣告，相當(dāng)影響體驗(yàn)。

這種廣告屏蔽起來(lái)相當(dāng)簡(jiǎn)單，寫(xiě)一條樣式規(guī)則，將其display屬性置為none就行了。

.home-place-item {
  display: none!important;
}

以防被覆蓋，我們可以加上!important提升權(quán)限。

大部分廣告可以通過(guò)上面 css選擇器 + display屬性 的方式屏蔽。但有些廣告處理起來(lái)會(huì)比較麻煩。

例如搜索引擎的廣告，就使用了一些方式來(lái)“保護(hù)”。
某搜索引擎搜索“機(jī)票”可以看到下面的廣告信息。

可以看到該廣告元素style屬性中使用了最高權(quán)重的display、visibility兩個(gè)屬性，所以用上面隱藏的方式肯定是無(wú)效的。

所以只能選擇其他的方式，這里需要考驗(yàn)大家的css基本功了。
讓一個(gè)元素隱藏的方式有哪些？
下面是一種實(shí)現(xiàn)方式：

[cmatchid] {
  height: 0;
  overflow: hidden;
}

還有一類(lèi)廣告并不是以靜態(tài)元素的方式呈現(xiàn)，甚至你在頁(yè)面上都看不到它，它只在你第一次點(diǎn)擊某個(gè)功能的時(shí)候彈出來(lái)。
這種處理起來(lái)就相對(duì)麻煩，因?yàn)橹苯訉?duì)元素進(jìn)行修改可能會(huì)影響到正常功能使用。
但是這種廣告的事件綁定一般都是多帶帶寫(xiě)在某個(gè)js文件中的，細(xì)心查找，然后阻止對(duì)應(yīng)的js文件加載就可以從根本上解決問(wèn)題。
瀏覽器其實(shí)為插件提供了API用來(lái)阻止資源加載，但是油猴卻沒(méi)有主動(dòng)提供。
后來(lái)在issue中找到了一個(gè)隱藏API來(lái)實(shí)現(xiàn)這個(gè)功能。
以阻止 https://xx.com 下的文件為例，可以在腳本開(kāi)頭引用webRequest功能：

// @webRequest [{"selector":"https://xx.com/*","action":"cancel"}]

只要你懂web前端，只要你肯動(dòng)手，你的網(wǎng)頁(yè)都可以變成你想象的樣子。

裝上插件，去自定義你的頁(yè)面吧！

示例腳本地址：
https://github.com/yalishizhude/block-ad-scripts