[低調] Chrmoe 的 ADBlock Plus 超簡單自寫規則 - 噁心廣告欄位掰掰

Google Chrome 的擴充功能 - ADBlock Plus

我想大家應該都有裝才對~

也讓我的低調一點少了許多廣告流量（炸）

不過他內建的「輕鬆地建立過濾規則」有點智缺 :neutral:

應該說 - 缺少智慧化的元素選取功能

現在低調宅就教大家怎麼增強 Google Chrmoe ADBlock Plus 的功能！

讓你輕鬆上手～自寫廣告規則！

其實說穿了就是多安裝一個 JS 檔案 - Css Editor

原始js在 https://userscripts.org/scripts/show/87244

只不過我繁體化了裡面的字串

用起來比較親切～有需要的人請到低調宅點下載 :mrgreen:

Css Editor 低調宅點：http://dl.ilowkey.net/2013/05/css-editor.html

安裝方式：
開啟「管理擴充功能」頁面
chrome://extensions/

拖曳 Cssbox.user.js 至頁面中即可安裝 :?:





使用方式：
在網頁視窗的右上角有個小方形的圖示





滑鼠游標指向該圖示即可出現按鈕～ :smile:

搭配 ADB 的用法如下：
以 友站 SkyBoxs.net 為例
（好久沒表一下屎蓋～偶爾來表一下）

其實 CSS Editor 就像是火狐的 Element Hiding Helper for Adblock Plus
用來選取網頁中的相關元素變成規則
而 CSS Editor 本身可透過 cookie 的方式來阻擋廣告顯示
（此方式廣告仍會載入，但你看不見，眼不見為淨）
他所用的 CSS 規則可以餵給 Google ADBlock Plus 吃
然後就可以一樣...眼不見為淨了! :evil:

看見他的右側廣告欄位，游標指向右上角方形圖示





會有三個按鈕加一個選框，分別是
-編輯：開啟編輯框，修改CSS內容
-尋找：尋找並編輯網頁中的元素，你可以按下後指向想移除的元素（會顯示藍框）按下D刪除該元素，按下X建立CSS規則代碼，按下Z還原刪除
-還原：亦即還原頁面中的CSS規則為原始狀態
-啟用：啟用 CSS Editor 的隱藏方式

此時我們會用到的就是「尋找」這個功能

1.
按下「尋找」指向廣告欄位
會顯示為藍底框的狀態（選取直到整個欄位刪除後看不見東西為止）
可按下 D 的按鍵檢視隱藏後的樣子 :?:





2.
D 的按鍵按完之後
也就是你頁面中廣告殺盡之後再按下 X 鍵
此時就會出現編輯框





3.
複製全部代碼，刪除最後一句規則
{display:none!important}
這一句我們不需要... :idea:
只需保留
ASIDE[id="text-5"]
ASIDE[id="text-6"]

4.
開啟 ADBlock Plus 的選項並切換至「新增自己的過濾規則」





按下「以純文字編輯」





將 3. 所取得的 CSS 代碼修改為

skyboxs.net##ASIDE[id="text-5"]
skyboxs.net##ASIDE[id="text-6"]

沒錯！～要加上網域名稱與兩個井字符號 「##」

套用規則後重新整理頁面試試

廣告沒了~ :evil:

修改前：



修改後：






不會寫規則也沒關係～用這個 JS 來搭配使用真的很方便 :D

建議大家使用看看

但是還是希望大家可以手下留情的保留一些 blog 的廣告

因為經營 blog 真的蠻不容易的 :as43

尤其是為了空間、域名、網站穩定性頭痛的時候...