☰

使用 Chrome 创建 AdBlock/UBlock 规则

tag-icon • tag-icon google-chrome rules adblock google-chrome-devtools
使用 Chrome 创建 AdBlock/UBlock 规则

在此处输入图片描述

我想学习如何使用 Chrome devtools 根据 Ublock/Adblock 语法创建自己的自定义广告拦截规则。现在，我需要先弄清楚 Chrome 的开发工具是如何工作的。

请观察图片。我想要阻止的是整个 div 元素。不幸的是，这个 div 元素带有一个 id。该 id 是一组随机的数字和字母，每次重新加载页面时都会发生变化。

我怎样才能弄清楚“id”的实际名称，以便我可以为具有该特定名称的特定 id 创建阻止规则？

如果你能向我展示如何创建规则，我将获得加分：P

答案1

如果Id每次都是随机生成的，则需要找到该 DOM 元素要挂接的其他唯一属性。文本属性并不好，因为您希望没有其他节点会使用您正在过滤的文本，并且没有基于语言环境的翻译。

话虽如此，我在这个例子中使用了它，因为我不确定您正在使用的 AllMusic 网站上是否有更好的选择。

使用下划线find函数，您可以选择的子节点document.body并返回文本中包含“ad block”的第一个节点。

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 类型的问题。

答案2

Adblock Plus 隐藏过滤器由两部分组成：<domain>##<selector>

  • 域部分只是一个以逗号分隔的域列表，其中元素应该被隐藏。

  • 选择器部分定义哪些元素应该被隐藏，并遵循CSS 选择器标准。因此，我建议你学习 CSS 选择器，而不是学习如何编写过滤器，因为有很多关于如何编写这些过滤器的有用资源。

例如，在这种情况下，了解可以根据元素在文档中的位置来选择元素可能会有所帮助。例如body > :nth-child(1)将选择正文中的第一个元素。对于更具体的选择器，您需要检查其哪些特征保持不变，哪些特征发生变化。

相关内容