I Stand Up For Myself

4.23: 目前 Adblock Plus 似乎有點小問題，沒辦法確實擋掉來自多層 iframe 內部的請求，這部分我有回報給 ABP 了，修正後我們的規則應該就能作用了！

現在幾乎每個網站都有廣告，但廣告內容放正常一點的東西不好嗎？

近年很常會出現知名成人網站 Top**oon 的廣告

說實在真的挺擾民的...

即便已經裝了 Adblock Plus 插件，一些「非侵入式」的廣告通常還是會顯示出來。

是否有辦法：自動偵測「Toptoon」字樣，針對特定廣告進行過濾呢？

本文將帶你建立簡單的 Adblock Plus 規則！！

1. 首先，第一步就是打開 Adblock Plus 的設定頁面。

可以從 Chrome 的設定 → 擴充功能 → Adblock Plus 詳細資料 → 擴充功能選項進入。

之後到 進階 → 我的過濾列表，我們等一下會在這裡追加一條規則，針對 Toptoon 進行過濾！

2. 接下來，需要使用開發者工具找出 "Toptoon" 關鍵字出現在哪裡。

（學會這一點，可以讓你對付任何含有特定關鍵字的廣告喔！）

在 Chrome 按下 CTRL + SHIFT + C，然後將滑鼠移到廣告的上方輕點一下，

此時右邊深色的部分 (<div style="border: 1px...)，就是廣告所對應的 HTML 了！

紅色箭頭所指之處，我們稱之為 <div> 元素，而它的正上方是一個 <a> 元素；可以看到 <div> 元素是被包在 <a> 元素裡面（點圖片放大）。

如果懂 HTML 的話，<a> 元素就是連結的意思；也就是說當點擊廣告時，是這個元素把你帶往目標網頁的！

當我們把滑鼠移到 <a> 元素的連結上方，就發現了 "www.toptoon.net" 關鍵字！

3. 下一步，就是根據我們剛剛的發現來寫出一條規則！（詳情可參考官方的文件）

我們的目標是：連結當中含有 "www.toptoon.net/partner" 關鍵字的 <a> 元素

所以規則就是：##a[href*="www.toptoon.net%2Fpartner"]

之所以是 "www.toptoon.net/partner" 而非單純的 "www.toptoon.net"，是因為前者比較可能是廣告；後者會把所有 Toptoon 連結都擋掉，不論是否為廣告（雖然我是沒差啦 ( ͡° ͜ʖ ͡°) ）

保險起見，我們也把 <a> 元素底下的所有圖片都過濾掉：##a[href*="www.toptoon.net%2Fpartner"] img

如果只希望在特定網站 (例如 *.pixnet.net) 生效：pixnet.net##a[href*="www.toptoon.net%2Fpartner"]

如果想要更強硬地阻擋所有來自 static.criteo.net 的圖片：||static.criteo.net/design/dt/85539/$image

總而言之，CSS selector 可以做到的事情很多，不過我認為使用前兩個應該就夠了～

4. 最後，把寫好的規則新增到第一步的列表裡頭，就完成啦！

如果你成功過濾了 <a> 元素，當使用開發者工具點擊 <a> 元素時，左下角就會有 "display: none" 的屬性

右邊也會寫 "injected stylesheet"，代表這是 Adblock Plus 在發揮作用喔！

另外，如果你希望能實際拿網站測試看看效果的話，可以下載這份資料夾，安裝 Node.js，然後使用指令進入該資料夾，打 npm install 以及 npm start，即可在 http://127.0.0.1 瀏覽含廣告的網頁了。

最後，如果規則有漏網之魚，也歡迎在底下留言告訴我喔！