個人頁面我作主——瀏覽器去廣告正確姿式

會CSS就會去廣告~

傳統去廣告方法的弊端

咱們瀏覽網頁的時候常常難免會看到各類不想看到的廣告內容，最簡單的方案就是經過瀏覽器插件來解決，好比大名鼎鼎的AdBlock插件以及國內的各類廣告攔截助手。

但這些插件的攔截能力可定製化程度不高，像AdBlock須要經過其定義的一套語法規則經過CSS選擇器來屏蔽一些DOM元素，碰到一些特殊的狀況就無能爲力了。

好比一個頁面上的某些重要元素被綁定了事件，點擊的時候會跳轉到廣告頁面，這時候就不能經過簡單的屏蔽DOM元素的方式來實現了。

簡單高效的自定義方式

對於這些狀況咱們可使用一個強大的瀏覽器插件——Greasemonkey，簡稱GM，中文俗稱爲「油猴」，支持Firefox和Chrome瀏覽器。

油猴並非一個專門用來去廣告的插件，而是一個往頁面中植入JavaScript代碼的工具，用來修改頁面，或者添加一些功能，好比自動填充表單、顯示網盤文件下載連接等。

開發功能很是簡單，只須要經過js調用對應API函數便可。

簡單幾行代碼，就能夠去除大部分頁面廣告。

快速入門GM腳本

油猴的使用很是簡單，咱們編寫一個js腳本，而後配置好對應的網址。

這樣當瀏覽器訪問匹配的網址時，油猴會加載咱們編寫的js腳本，運行裏面的代碼。

簡而言之分兩步。

1. 配置腳本。配置項大概在20個左右，下面咱們介紹最重要的3個配置項。
2. 編寫腳本。調用插件提供的API函數，爲頁面添加CSS樣式或者執行js代碼。

• @include 腳本匹配的網址，支持星號「* 」來匹配任意字符。可使用屢次表示匹配多個網址。
• @grant 聲明須要使用的API函數。
• @run-at 腳本執行的時間，有5個可選值，CSS樣式咱們選擇「document-start」在頁面渲染以前加載，而js腳本能夠選擇「document-end」在頁面渲染完成後加載。

須要注意的是，配置參數是在以==UserScript==開頭，==/UserScript==結尾的註釋中的。

完整的示例以下：

// ==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==
複製代碼

具體說明能夠參考官方文檔：www.tampermonkey.net/documentati…

2種常見場景以及對應的操做

修改樣式

這是最簡單的屏蔽廣告的方式，只要配置規則就好了，能屏蔽80%以上的廣告。

以某論壇廣告爲例，這個論壇的廣告是直接夾雜在帖子當中，下方有個小小的字標明廣告，一不當心就點進去了。 並且帖子中間夾雜着絕不相干的廣告，至關影響體驗。

這種廣告屏蔽起來至關簡單，寫一條樣式規則，將其display屬性置爲none就好了。

.home-place-item {
  display: none!important;
}
複製代碼

以防被覆蓋，咱們能夠加上!important提高權限。

大部分廣告能夠經過上面 css選擇器 + display屬性 的方式屏蔽。但有些廣告處理起來會比較麻煩。

例如搜索引擎的廣告，就使用了一些方式來「保護」。 某搜索引擎搜索「機票」能夠看到下面的廣告信息。

能夠看到該廣告元素style屬性中使用了最高權重的display、visibility兩個屬性，因此用上面隱藏的方式確定是無效的。

因此只能選擇其餘的方式，這裏須要考驗你們的css基本功了。 讓一個元素隱藏的方式有哪些？ 下面是一種實現方式：

[cmatchid] {
  height: 0;
  overflow: hidden;
}
複製代碼

阻止js文件加載

還有一類廣告並非以靜態元素的方式呈現，甚至你在頁面上都看不到它，它只在你第一次點擊某個功能的時候彈出來。 這種處理起來就相對麻煩，由於直接對元素進行修改可能會影響到正常功能使用。 可是這種廣告的事件綁定通常都是單獨寫在某個js文件中的，細心查找，而後阻止對應的js文件加載就能夠從根本上解決問題。 瀏覽器其實爲插件提供了API用來阻止資源加載，可是油猴卻沒有主動提供。 後來在issue中找到了一個隱藏API來實現這個功能。 以阻止 https://xx.com 下的文件爲例，能夠在腳本開頭引用webRequest功能：

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

更多

只要你懂web前端，只要你肯動手，你的網頁均可以變成你想象的樣子。

裝上插件，去自定義你的頁面吧！

示例腳本地址：github.com/yalishizhud…

---

個人新書《了不得的JavaScript工程師：從前端到全端高級進階》已經上架，得到了阮一峯老師等衆多技術專家推薦，但願能幫助更多前端工程師一塊兒成長提高，擁有全面能力和全局視野，成爲了避免起的JavaScript工程師！