自訂 AdBlock 的過濾規則擋網頁廣告

Max 的電腦前幾天重灌,忘了備份我的 adblock(廣告過濾)的規則,以為 chrome browser 會幫我同步的 google 家的伺服器裡,結果是沒有…,所以重灌電腦後的 chrome browser 在我登入google 帳號後,只有自動幫我安裝並載入 AdBlock,AdBlock 裡的設定值已消失,需要重新輸入一次。

今天去訪問之前常去的一個網站,發現滿滿的廣告,眼花撩亂很不舒服,這篇文章要來解決這個廣告太多的問題,跟分享大家2個重點:

  • 如何阻擋廣告圖片。
  • 如何隱藏沒有圖片的區塊,以避免另開新視窗到外部廣告網站。

如何阻擋廣告圖片

開始下面的文章,請先在你的 Firefox 或 chrome 瀏覽器並安裝 AdBlock 的外部套件。

接著要來學習,如何設定 AdBlock 的規則:
https://help.eyeo.com/en/adblockplus/how-to-write-filters

都英文的,很難理解。

Max看了幾篇中文寫的,也覺得「很難了解」,完全是有看沒有懂:

只好靠自己了,首先要知道的是 Adblock 的基本語法:

Comments (註釋)

Any rule that starts with an exclamation mark (!) is considered a comment. Adblock Plus ignores this rule for actual blocking, so it’s safe to write whatever you want in the comment. You can place a comment rule above a filter to describe its purpose or function, or you can place a comment above your filter list stating your authorship (most filter list authors do this).

上面英文是說 ! 驚嘆號開頭,代表註解。


首先,到有網告的網頁,在廣告圖片的身上按右鍵,選 Inspect 就可以得知圖片的網址,參考下圖:

在取得該廣告圖片的網域(domain name)後,直接輸入到 Adblock 的設定界面裡,按下 Edit 就可以開始修改,最後按下 Save 存檔,再回到有廣告的網站,並重新整理網頁後,網頁裡的廣告圖片就消失了。

例如:發現到 https://kanjiantu.com/images/ 下的圖片。就直接輸入 domain name(網域) kanjiantu.com 到輸入框裡,用換行符號(Enter)做分隔,參考上圖,就完成了,現在目標的網站裡不會顯示廣告圖片。


如何隱藏沒有圖片的區塊,以避免另開新視窗到外部廣告網站

這個網站有一個奇怪的透明區塊覆蓋在整個網頁上,點下去後會連到外部的廣告網站:

說明:這個網站有 2 個 a 的 tag, 讓畫面左側和右側讓連到外部廣告網站。

這個也有解法,和上一個廣告圖片的解法一樣,在透明的區塊按右鍵,選 Inspect 就烈以看到該區塊的網頁 html。

例如html:

<div id="sponsorad">Really cheap tofu, click here!</div>

div 的 id 是 sponsorad,我們可以使用下面的語法讓該 div 消失:

example.com##*.sponsorad

說明:example.com 是用來限定網域,## 是指要開始隱藏。.sponsorad 是指 id=”sponsorad”.

Max要處理的網站 html:

<a id="wrapper_left_bg" class="wrapper_bg_c hidden-xs" target="_blank" href="https://ng1.app/" style="width:460px;height:100%;position:fixed;display:block;top:0px;left:-169.5px;"></a>
<a id="wrapper_right_bg" class="wrapper_bg_c hidden-xs" target="_blank" href="https://ng1.app/" style="width:460px;height:100%;position:fixed;display:block;top:0px;right:-169.5px;"></a>

要讓這2個透明區塊消失的方法很多,除了使用 id,max 是使用下面過濾規則:

btbtt.me##a[class*="hidden"]

說明:讓 <a> tag class 裡包含 hidden 的 tag 都消失。應該也會誤判,會讓該網站部份的正常的<a> tag 受影響,反正大致上功能都正常,不要顯示廣告和點到廣告即可。


最後,是要備份自己的設定值,可以放一份文字檔在 gmail / dropbox / google drive / github 裡。下次重灌電腦就不用再自己重新研究一次。也有人分享是先把文字檔放在 dropbox / google drvie / github 公開的網頁空間,再設定 AdBlock 連到某個特定網站把自己的規則下載下來,這樣規則也不會因為重灌電腦而消失。

Facebook網友回應

您可能也會感興趣的文章...

隱藏經濟日報「立即訂閱」對話框

生活小事

連到經濟日報的網頁,往下捲動頁面觸發彈出式廣告: 數位訂閱周年慶!歡慶時刻,邀請你免費暢讀所有經濟好文。感謝讀者支持,11/19前訂閱一年,即可抽 iPhone 15 ! […]

Read More

獅尾火腿黑體:改造思源黑體筆觸變火柴免費商用

電腦相關應用

獅尾火腿黑體基於思源黑體的筆觸變火柴改造,更加簡明現代化的字體。支援简体中文、繁體中文、韓文與日文;可以免費商用,歡迎大家自由應用、自由改作! 獅尾火腿黑體的特色是:筆畫 […]

Read More

幫字型加字重

電腦相關應用

文字和字型,一直是門藝術,是很美的東西,很高興Max可以替「中華民國美學」盡分心力。 有一天遇到好心人(游清松)在分享他製作的免費授權字型,真的是大好人一枚,花這麼多時間 […]

Read More

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *