使用 Chrome 建立 AdBlock/UBlock 規則

Question

我想學習如何使用 Chrome 開發工具根據 Ublock/Adblock 語法建立自己的自訂廣告攔截規則。在我這樣做之前，我需要弄清楚 Chrome 的開發工具是如何運作的。

請觀察圖片。整個 div 元素就是我想要封鎖的內容。不幸的是這個 div 元素帶有一個 id。所述 id 是由數字和字母組成的隨機沙拉，每次重新加載頁面時都會發生變化。

如何找出“id”的實際名稱，以便我可以為具有該特定名稱的特定 id 建立阻止規則？

如果你能告訴我如何建立規則，我會加分：P

Answer 1

如果Id每次都是隨機產生的，您需要找到該 DOM 元素唯一的其他屬性來掛鉤。文字屬性不是很好，因為您希望沒有其他節點會使用您正在過濾的文本，並且沒有基於區域設定的翻譯。

話雖如此，我在這個例子中使用了它，因為我不確定您正在使用的 AllMusic 網站上有什麼更好的東西。

使用下劃線的find函數，您可以選擇 的子節點document.body並傳回文字中包含「廣告區塊」的第一個節點。

var blockElem = _.find(document.body.childNodes, function (elem) { 
    return elem.innerText && elem.innerText.toLowerCase().indexOf("ad block") != -1 }
);

現在您擁有了 DOM 元素，您可以對其進行操作（刪除、隱藏等）。

另一種使用jQuery 的filter函數是：

var blockElem = $("body div").filter(function() {
    return $(this).text().toLowerCase().indexOf("ad block") != -1;
}).first();

附言。我覺得這更像是 StackOverflow 類型的問題。

Answer 2

Adblock Plus 隱藏式過濾器由兩個部分組成：<domain>##<selector>

• 域部分只是一個以逗號分隔的域列表，其中的元素應隱藏。

• 選擇器部分定義應隱藏哪些元素並遵循CSS 選擇器標準。因此，我建議不要學習如何編寫過濾器，而是學習 CSS 選擇器，因為有很多關於如何編寫過濾器的有用資源。

例如，在這種情況下，了解您可以根據元素在文件中的位置來選擇元素可能會有所幫助。例如body > :nth-child(1)將選擇正文中的第一個元素。對於更具體的選擇器，您需要檢查其哪些特徵保持不變以及哪些特徵會變更。