使用AdGuard浏览器插件来拦截网页元素（去广告）

1. 介绍

这个插件的下载安装我这里就不说了。

还记得以前刚开始学习怎么写油猴脚本的时候，写的最多的就是去广告，也就是移除网页上的元素。做法就是先找到这个元素，然后要么就是直接删除这个DOM节点，要么就是设置它的样式，让它从视觉上消失。

用油猴脚本虽然可以做到，但毕竟要自己动手写代码，而且如果不幸遇到那种要修改的内容特别多，且网页结构经常变动的网页，维护这个油猴脚本的成本就会增加。

后来自从知道如何用 AdGuard 来实现 “拦截” 网页元素后，就再也没有手动写过这种类型的代码了。

当然了，用 AdGuard 和 油猴脚本配合起来效果会更好！AdGuard 负责隐藏一些元素，油猴负责实现具体的功能。在之前我写的一篇文章中提供了一个油猴代码【实现免登录一键复制博客中的代码】，如果你直接使用这个油猴代码，可能得到的效果与我提供的截图中的效果不同，那就是因为我用 AdGuard 移除了 “复制代码” 按钮旁边的一些不想看到的内容。这篇文章的地址是：复制网页上的任意内容以及用油猴脚本实现免登录一键复制

2. 效果

直接看看效果吧，看文字太空洞了：

3. 具体操作方法

在安装好这个插件后，并打开你要拦截广告的网页。【并不是只能是广告，比如对于有些不想登录的网站，如果它的登录按钮做得太花哨，你也可以将它隐藏掉。】

3.1. 打开 AdGuard 的拦截界面

打开的方式一：
将这个插件的图标在浏览器的顶部显示出来，然后点击这个图标，选择下图中的功能：

方式二：通过右键网页来打开，如下图：

使用这两种方式都会直接进入选择元素的模式，并在网页上显示类似这样一个的窗口，如下图：

3.2. 选中需要拦截的元素

当出现这个拦截弹窗后，会自动进入选择模式，这个时候我们就可以直接点击网页上我们不想看到的内容。

对于新手，在这个选择的过程中可用的小技巧：

1. 如果不小心选错了，那么点击这个弹窗中左下角的 “选择其他元素” ，然后从新选择即可。并不需要关闭这个界面再重新打开。
2. 如果这个弹窗刚好挡住了你要拦截的元素，你可以用鼠标拖动这个弹窗，将它放到一个不会遮挡的位置。
3. 在拦截一个元素之前，一定要选择先预览，确定预览得到的效果是自己想要的，你再点击 “拦截” 按钮，将这个元素添加到拦截规则中。如果预览的效果不是自己想要的，那么就退出预览，并重新调整拦截规则，再做尝试。

我们在选择要拦截的元素时，一般都不会直接得到最终结果，往往都是需要调整这个选择的规则的。

3.3. 调整拦截规则

我们调整拦截规则其实就是在做两件事：拖动下图中的绿色滑块，以及判断是否需要勾选 “拦截类似元素” 。【需要展开高级设置才能看到 “拦截类似元素”复选框】

我们拖动这个绿色的滑块往左【往MAX方向】滑动，每滑动一个滑块，就是扩大一个层级的选择。也就是说，拖动一次滑块，就是将原本选择的元素切换为它的父元素。每次拖动滑块，网页上都会有一个绿色的提示框，提示选中的元素的范围大小。

所以，我们要做的就是，调整这个滑块到我们想要的元素上，并进行预览测试，看是否是我们想要的效果。

小技巧：我们知道如何调整元素的选择范围后，就可以反推我们之前选择元素的行为：在刚出现这个拦截弹窗的时候，我们会进入选择元素的模式，在这个过程中，你是否遇到过不太容易选中自己想要选中的元素的情况？其实，大可不必为此烦恼，我们可以随便点选一个该区域内的元素，然后通过调整滑块等级的方式来选中我们真正需要选中的元素，也就是随便选中一个层级深的元素，然后拖动滑块选中它的父元素，这样就可以很方便的找到真的需要移除的元素了。

接下来说说高级设置中的内容。

在上图中，“应用规则至所有网站” 这个选项基本不用，看名称也知道什么意思了，这里就不细说了。

第二个勾选框 “拦截类似元素” 是什么意思呢？其实就可以简单的认为是前端CSS的类选择器，也就是说，如果一个网页上很多个 div ，但其中有3个 div 被加上了类名 “mybtn” ，那么这三个div元素在外观上都被应用了相同的样式，自然看起来就是 “类似元素” 了。所以，拦截类似元素，就可以看作是提取该元素的所有类名作为拦截的规则。另外，这个拦截类似元素的功能默认是使用所有类名，所以，有的时候，我们可能还需要手动编辑这个规则，删掉一些不需要的类名，拦截规则的输入框那里是可以直接编辑的。至于要不要手动编辑这个规则，就要看预览时，是否满足你的需求了。

3.4. 拦截元素

看懂前面的内容后，你已经可以选中你要拦截的内容了，如果在预览下，是你想要的效果，你直接点击拦截就可以了。

那拦截之后的规则被添加到哪里去了呢？如果不小心点错了，如何删掉这条规则呢？

我们可以打开这个 AdGuard 的设置界面，如下图：

然后找到 User rules 就可以找到我们通过拦截按钮添加的所有的拦截规则了。

最新添加的规则是在最后一个，如果添加错误，那么直接删除就可以了。

还想再补充一个防止添加错误规则的小技巧：
除了前面说的，在添加规则之前，先预览看看效果外，还可以将这个拦截规则复制出来，然后打开浏览器的 elements 面板，然后使用 Ctrl + F 来搜索内容，看看搜索到的内容个数是否与你要拦截的网页元素的个数匹配。在这个搜索框中是可以直接支持这个拦截规则的写法的，但需要注意的是，不要复制最前面的：域名和两个井号，这两个井号是分隔符，如果是三个井号的话，第三个井号是CSS的ID选择器的写法。这第三个井号是需要一并复制到搜索框中的。

效果如下图所示，这只是一个小技巧，并不是必须的，你试上几次，对于要不要用这个方法进行验证就有自己的判断了。

4. 在开发者工具中使用 AdGuard

针对于某一些特殊的元素，它们可能出现在特定的条件下，也就是说，你不太容易直接从网页上选中它，它可能是由于你的某些操作【可能是需要hover在某个元素上；也可能是点击某一个按钮后，中途会显示出来，随后又消失了】，动态显示出现，然后又会消失掉。所以，你通过前面的那种直接从页面上选取元素的方式，就不好处理它了。

这个时候，就可以利用开发者工具中的 AdGuard 来处理这类元素。

按照下图的位置找到这个 AdGuard 插件提供的添加规则的功能：

经过前面的内容学习，你看到这个页面，只要有点前端基础都应该知道是什么意思了。我就不再介绍了，只要记得在 Add rule 之前，先点击 Preview 进行预览检查一下就可以了。

接下来说一下，前面提到的那种 “从网页上不太容易直接选中的内容” 该如何处理。其实很简单，一般这样的元素都是通过修过CSS属性的方式来调整显示和隐藏的，所以，这也说明了它们的 HTML 结构是存在的，之所以不好直接从页面选择，是因为它们没有显示出来而已，但我们在开发者工具的 elements 面板中是可以直接找到这个元素的，那么就可以通过右侧的 AdGuard 的添加规则功能实现拦截该元素的目的。

对于有些网页内容是动态生成的，那种元素其实也可以拦截，你要做的就是：想办法找到这个 HTML 结构的元素位置，并将这个选择规则写正确就可以了。其实这类需要特殊处理的情况比较少。

除了上面提到的情况，在开发者工具中使用 AdGuard 还有以下的好处：

1. 方便勾选或者去掉某些类名，对于那种类名很多的元素，很有用。
2. 方便验证是否会影响别的元素，直接复制要拦截的内容，到左侧的 Elements 面板中搜索，看这个拦截规则可以搜索到几个元素，就可以判断出是否会对别的元素产生影响了。比如，原本你只想拦截网页上的两个元素，但使用这个规则可以搜索出5个，那么自然这个拦截规则是有问题的，需要修改。
3. 方便批量添加拦截规则，因为通过那个拦截弹窗来拦截网页元素，每次点击拦截后，都需要重新打开这个弹窗，才能进行下一个元素的拦截。所以，针对一个需要 “大整顿” 的网页，这是比较麻烦的。而使用开发者工具中的添加规则就不需要频繁打开这个拦截的窗口了。

5. 实际的案例

5.1. 去掉CSDN选中内容时弹出的搜索框

我个人在看文章的时候，有一个习惯，就是喜欢用鼠标选中文本，这样可以让我阅读的时候更专注。

但 CSDN 上的博客，在选中内容后，会有一个提示框，这个提示框很影响我的体验，并且有时候还可能误点到这些功能，总之，我想去掉它。之前还为这个写过一个油猴脚本，但后面发现用 AdGuard 来处理更加简单。

提示框如下图：

添加拦截规则的方法如下图，其实就是先在网页上选择文本，让他这个提示框弹出来后，再点击浏览器顶部的 AdGuard 图标来拦截，这个时候不能使用右键网页来拦截的方式，因为右键网页的时候，这个提示框就消失了。也可以通过前面介绍的第三种方法，在开发者工具中拦截。

添加后，以后选中文本的时候就不会有这个提示框了。你也可以直接将下面这个规则复制到 AdGuard 的 user rules 中，粘贴保存也可以。

blog.csdn.net###articleSearchTip

5.2. 去掉掘金左侧的收藏文章提示

我处理这个收藏提示框的方法就非常暴力了，我是直接将左侧边栏中所有内容全部去掉了，并不是只针对这个提示框。我连账号都没有，要这收藏有何用？

这个我就不详细说了，都是一样的处理方法。

5.3. 去掉掘金的登录弹窗

额，我记得之前进入掘金，在没有登录的情况下，是会自动弹出一个弹窗出来的，但在写这篇文章进行测试的时候，发现现在好像不会这样了。

如果以后又有弹窗，选中它多半都是可以成功拦截的。

6. 如何去掉自己添加的 AdGuard 拦截规则

要么就是像之前提到的那样，打开这个插件的设置，然后在 User rules 中手动移除。

要么就像下图这样一键移除所有：

7. 如何判断自己以前添加的规则是否依然失效

第一步：找到下图中的 Open filtering log ，点击打开，这会打开一个新的窗口。当然你也可以右键，然后找到 Filtering log 这个按钮打开也可以。

然后，按照下图中的选择，并点击刷新按钮：

点击刷新后，网页会重新加载，然后所有我们添加的拦截规则，只要生效了，都会在这里显示出来，我们就可以看这个列表中的信息，然后对比 User rules 中的规则就可以判断出哪些是失效的规则了。

但需要注意的是，比如前面提到的 CSDN 选中内容的提示框，这个拦截规则要想在这个列表中显示出来，就必须要你手动选择一下文本，当网页触发了这个弹窗，而且 AdGuard 并成功将其拦截后，才会现在在这个列表中。

如果 User rules 中的规则很多，且顺序是乱的，该怎么进行对比？

我这里提供一种方法，就是将它们全部复制出来，放到别的可以支持排序的编辑器中，进行一次排序操作，这样所有域名一致的拦截规则都会被放在一起，就方便进行对比了，我这里以 gvim 编辑器为例：

复制所有规则并粘贴到 gvim 中，然后执行下面的命令进行排序：

:sort

执行这条命令后，你就可以发现它们对于相同网站的拦截规则全都放在一起了，这样就方便对比了，结果如下图：

另外，你也可以将排序好的内容重新复制到 User rules 中替换没有排序的内容。

8. 如何导出这些规则

如果需要换操作系统，或者想要分享给别人，或者只是为了备份，都会用到导出的功能。

要么你可以直接像之前那样复制所有 User rules 的规则到一个文件中作为备份，下次要用的时候，再复制到 user rules 中并保存即可。

要么就是直接使用 AdGuard 提供的导入导出功能来完成备份，如下图：

9. 与 AdGuard 的联动

AdGuard 是可以与其他的浏览器插件配合起来使用的。

比如，前面已经说过的，与油猴插件配合起来，AdGuard 专门负责移除元素，而油猴则用于处理具体的功能。

另外，还可以与 SingleFile 这个插件联用。

SingleFile 这个浏览器插件可以将网页保存为一个单独的 HTML 文件，在这个网页中，网页的内容就可以被随意复制【意味着可以去掉网页的禁止用户复制的限制】。网页的图片也会被保留，还可以只保存一个网页的部分内容，还可以对网页做批注。还有很多功能，是我平常使用频率挺高的一个插件。安利给大家。

那么，它们如何配合使用呢？其实就是针对个别网页，可能有些内容不是你想保存的，你就可以用 AdGuard 来拦截这部分内容，然后再用这个 singlefile 插件来保存网页。当然，其实 singlefile 自己已经提供了这样的功能，就是在批注网页的功能中可以删掉不想要的网页内容，但有时候使用这个 AdGuard 拦截元素会更省事一点。

有什么问题，欢迎大家在下方讨论。