我的頁面我做主——瀏覽器去廣告正確姿勢

iamyoung001 發布于2019-08-26 10:20 / 3431人閱讀

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

會CSS就會去廣告~

傳統去廣告方法的弊端

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

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

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

簡單高效的自定義方式

對于這些情況我們可以使用一個強大的瀏覽器插件——Greasemonkey，簡稱GM，中文俗稱為“油猴”，支持Firefox和Chrome瀏覽器。

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

開發功能非常簡單，只需要通過js調用對應API函數即可。

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

快速入門GM腳本

油猴的使用非常簡單，我們編寫一個js腳本，然后配置好對應的網址。

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

簡而言之分兩步。

配置腳本。配置項大概在20個左右，下面我們介紹最重要的3個配置項。

編寫腳本。調用插件提供的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==

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

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前端，只要你肯動手，你的網頁都可以變成你想象的樣子。

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

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

GPU云服務器云服務器正確姿勢這是我的代碼申請我的域名注冊我的域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106019.html

我的頁面我做主——瀏覽器去廣告正確姿勢

摘要：簡單高效的自定義方式對于這些情況我們可以使用一個強大的瀏覽器插件，簡稱，中文俗稱為油猴，支持和瀏覽器。簡單幾行代碼，就可以去除大部分頁面廣告。聲明需要使用的函數。會CSS就會去廣告~ 傳統去廣告方法的弊端我們瀏覽網頁的時候經常不免會看到各種不想看到的廣告內容，最簡單的方案就是通過瀏覽器插件來解決，比如大名鼎鼎的AdBlock插件以及國內的各種廣告攔截助手。但這些插件的攔截能力可...

20171112 2019-08-30 15:44 評論0 收藏0
油猴子腳本 - 我的地盤我做主

摘要：什么是油猴子腳本，簡稱，中文俗稱為油猴，是的一個附加組件。中文用戶腳本開發手冊油猴子腳本開發深入淺出如何使用他人的腳本網站提供很多腳本，它仿佛是代碼界的可以在該網站搜到很多有意思的腳本。當你用瀏覽器訪問某個網頁時，你可曾想過，你看到的這個網頁，實際上是屬于你自己的。打個比喻：訪問某個網站就好像是網購了一筐雞蛋，雞蛋雖然是養雞場生產的，但是這個蛋我怎么吃，你養雞場管不著。當然了，對...

taoszu 2019-08-22 13:59 評論0 收藏0
加載和執行JS的正確姿勢

摘要：在這些文件的下載執行過程中，用戶看到的則是一片空白。頁面仍然必須等到所有代碼下載并執行完畢才能繼續渲染。前言 kyrieliuの《高性能JavaScript》讀書筆記。 script標簽是一個很霸道的狠角色，它的每次出現都讓頁面等待腳本的解析和執行。也就是說，不管當前的javascript代碼是內嵌還是包含在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執行完成。其實，scri...

zhichangterry 2019-08-20 14:34 評論0 收藏0