提示框如下图 添加拦截规则的方法如下图其实就是先在网页上选择文本让他这个提示框弹出来后再点击浏览器顶部的 AdGuard 图标来拦截这个时候不能使用右键网页来拦截的方式因为右键网页的时候这个提示框就消失了，之前还为这个写过一个油猴脚本但后面发现用 AdGuard 来处理更加简单， 小技巧我们知道如何调整元素的选择范围后就可以反推我们之前选择元素的行为在刚出现这个拦截弹窗的时候我们会进入选择元素的模式在这个过程中你是否遇到过不太容易选中自己想要选中的元素的情况其实大可不必为此烦恼我们可以随便点选一个该区域内的元素然后通过调整滑块等级的方式来选中我们真正需要选中的元素也就是随便选中一个层级深的元素然后拖动滑块选中它的父元素这样就可以很方便的找到真的需要移除的元素了，在这个搜索框中是可以直接支持这个拦截规则的写法的但需要注意的是不要复制最前面的域名和两个井号这两个井号是分隔符如果是三个井号的话第三个井号是CSS的ID选择器的写法， 5. 实际的案例 5.1. 去掉CSDN选中内容时弹出的搜索框 我个人在看文章的时候有一个习惯就是喜欢用鼠标选中文本这样可以让我阅读的时候更专注， ， 对于有些网页内容是动态生成的那种元素其实也可以拦截你要做的就是想办法找到这个 HTML 结构的元素位置并将这个选择规则写正确就可以了， 但需要注意的是比如前面提到的 CSDN 选中内容的提示框这个拦截规则要想在这个列表中显示出来就必须要你手动选择一下文本当网页触发了这个弹窗而且 AdGuard 并成功将其拦截后才会现在在这个列表中，在之前我写的一篇文章中提供了一个油猴代码【实现免登录一键复制博客中的代码】如果你直接使用这个油猴代码可能得到的效果与我提供的截图中的效果不同那就是因为我用 AdGuard 移除了 “复制代码” 按钮旁边的一些不想看到的内容， 后来自从知道如何用 AdGuard 来实现 “拦截” 网页元素后就再也没有手动写过这种类型的代码了，你也可以直接将下面这个规则复制到 AdGuard 的 user rules 中粘贴保存也可以，也可以通过前面介绍的第三种方法在开发者工具中拦截， 效果如下图所示这只是一个小技巧并不是必须的你试上几次对于要不要用这个方法进行验证就有自己的判断了，当然你也可以右键然后找到 Filtering log 这个按钮打开也可以， 所以我们要做的就是调整这个滑块到我们想要的元素上并进行预览测试看是否是我们想要的效果， 第二个勾选框 “拦截类似元素” 是什么意思呢其实就可以简单的认为是前端CSS的类选择器也就是说如果一个网页上很多个 div 但其中有3个 div 被加上了类名 “mybtn” 那么这三个div元素在外观上都被应用了相同的样式自然看起来就是 “类似元素” 了， 按照下图的位置找到这个 AdGuard 插件提供的添加规则的功能 经过前面的内容学习你看到这个页面只要有点前端基础都应该知道是什么意思了，也就是说拖动一次滑块就是将原本选择的元素切换为它的父元素。
用油猴脚本虽然可以做到但毕竟要自己动手写代码而且如果不幸遇到那种要修改的内容特别多且网页结构经常变动的网页维护这个油猴脚本的成本就会增加。
如果以后又有弹窗选中它多半都是可以成功拦截的。
还想再补充一个防止添加错误规则的小技巧 除了前面说的在添加规则之前先预览看看效果外还可以将这个拦截规则复制出来然后打开浏览器的 elements 面板然后使用 Ctrl F 来搜索内容看看搜索到的内容个数是否与你要拦截的网页元素的个数匹配，所以你通过前面的那种直接从页面上选取元素的方式就不好处理它了。
这第三个井号是需要一并复制到搜索框中的，】 3.1. 打开 AdGuard 的拦截界面 打开的方式一 将这个插件的图标在浏览器的顶部显示出来然后点击这个图标选择下图中的功能 方式二通过右键网页来打开如下图 使用这两种方式都会直接进入选择元素的模式并在网页上显示类似这样一个的窗口如下图 3.2. 选中需要拦截的元素 当出现这个拦截弹窗后会自动进入选择模式这个时候我们就可以直接点击网页上我们不想看到的内容， 比如前面已经说过的与油猴插件配合起来AdGuard 专门负责移除元素而油猴则用于处理具体的功能，其实这类需要特殊处理的情况比较少， 文章目录 1. 介绍 这个插件的下载安装我这里就不说了，我就不再介绍了只要记得在 Add rule 之前先点击 Preview 进行预览检查一下就可以了， SingleFile 这个浏览器插件可以将网页保存为一个单独的 HTML 文件在这个网页中网页的内容就可以被随意复制【意味着可以去掉网页的禁止用户复制的限制】， 除了上面提到的情况在开发者工具中使用 AdGuard 还有以下的好处 方便勾选或者去掉某些类名对于那种类名很多的元素很有用。
5.3. 去掉掘金的登录弹窗 额我记得之前进入掘金在没有登录的情况下是会自动弹出一个弹窗出来的但在写这篇文章进行测试的时候发现现在好像不会这样了， 我们在选择要拦截的元素时一般都不会直接得到最终结果往往都是需要调整这个选择的规则的， 方便批量添加拦截规则因为通过那个拦截弹窗来拦截网页元素每次点击拦截后都需要重新打开这个弹窗才能进行下一个元素的拦截。
这个时候就可以利用开发者工具中的 AdGuard 来处理这类元素， 有什么问题欢迎大家在下方讨论， 3.4. 拦截元素 看懂前面的内容后你已经可以选中你要拦截的内容了如果在预览下是你想要的效果你直接点击拦截就可以了，这篇文章的地址是复制网页上的任意内容以及用油猴脚本实现免登录一键复制 2. 效果 直接看看效果吧看文字太空洞了 3. 具体操作方法 在安装好这个插件后并打开你要拦截广告的网页，所以针对一个需要 “大整顿” 的网页这是比较麻烦的， 方便验证是否会影响别的元素直接复制要拦截的内容到左侧的 Elements 面板中搜索看这个拦截规则可以搜索到几个元素就可以判断出是否会对别的元素产生影响了，其实很简单一般这样的元素都是通过修过CSS属性的方式来调整显示和隐藏的所以这也说明了它们的 HTML 结构是存在的之所以不好直接从页面选择是因为它们没有显示出来而已但我们在开发者工具的 elements 面板中是可以直接找到这个元素的那么就可以通过右侧的 AdGuard 的添加规则功能实现拦截该元素的目的， 但 CSDN 上的博客在选中内容后会有一个提示框这个提示框很影响我的体验并且有时候还可能误点到这些功能总之我想去掉它， 当然了用 AdGuard 和 油猴脚本配合起来效果会更好AdGuard 负责隐藏一些元素油猴负责实现具体的功能， 还记得以前刚开始学习怎么写油猴脚本的时候写的最多的就是去广告也就是移除网页上的元素，并不需要关闭这个界面再重新打开，做法就是先找到这个元素然后要么就是直接删除这个DOM节点要么就是设置它的样式让它从视觉上消失， 要么你可以直接像之前那样复制所有 User rules 的规则到一个文件中作为备份下次要用的时候再复制到 user rules 中并保存即可，另外这个拦截类似元素的功能默认是使用所有类名所以有的时候我们可能还需要手动编辑这个规则删掉一些不需要的类名拦截规则的输入框那里是可以直接编辑的，每次拖动滑块网页上都会有一个绿色的提示框提示选中的元素的范围大小。
4. 在开发者工具中使用 AdGuard 针对于某一些特殊的元素它们可能出现在特定的条件下也就是说你不太容易直接从网页上选中它它可能是由于你的某些操作【可能是需要hover在某个元素上也可能是点击某一个按钮后中途会显示出来随后又消失了】动态显示出现然后又会消失掉， 6. 如何去掉自己添加的 AdGuard 拦截规则 要么就是像之前提到的那样打开这个插件的设置然后在 User rules 中手动移除， 那拦截之后的规则被添加到哪里去了呢如果不小心点错了如何删掉这条规则呢 我们可以打开这个 AdGuard 的设置界面如下图 然后找到 User rules 就可以找到我们通过拦截按钮添加的所有的拦截规则了，【并不是只能是广告比如对于有些不想登录的网站如果它的登录按钮做得太花哨你也可以将它隐藏掉。
8. 如何导出这些规则 如果需要换操作系统或者想要分享给别人或者只是为了备份都会用到导出的功能，而使用开发者工具中的添加规则就不需要频繁打开这个拦截的窗口了。
那么它们如何配合使用呢其实就是针对个别网页可能有些内容不是你想保存的你就可以用 AdGuard 来拦截这部分内容然后再用这个 singlefile 插件来保存网页。
我连账号都没有要这收藏有何用 这个我就不详细说了都是一样的处理方法，比如原本你只想拦截网页上的两个元素但使用这个规则可以搜索出5个那么自然这个拦截规则是有问题的需要修改， 对于新手在这个选择的过程中可用的小技巧 如果不小心选错了那么点击这个弹窗中左下角的 “选择其他元素” 然后从新选择即可， blog.csdn.net ###articleSearchTip 5.2. 去掉掘金左侧的收藏文章提示 我处理这个收藏提示框的方法就非常暴力了我是直接将左侧边栏中所有内容全部去掉了并不是只针对这个提示框，。
如果这个弹窗刚好挡住了你要拦截的元素你可以用鼠标拖动这个弹窗将它放到一个不会遮挡的位置，如果预览的效果不是自己想要的那么就退出预览并重新调整拦截规则再做尝试，所以拦截类似元素就可以看作是提取该元素的 所有类名 作为拦截的规则， 添加后以后选中文本的时候就不会有这个提示框了，【需要展开高级设置才能看到 “拦截类似元素”复选框】 我们拖动这个绿色的滑块往左【往MAX方向】滑动每滑动一个滑块就是扩大一个层级的选择，还有很多功能是我平常使用频率挺高的一个插件， 要么就像下图这样一键移除所有 7. 如何判断自己以前添加的规则是否依然失效 第一步找到下图中的 Open filtering log 点击打开这会打开一个新的窗口， 3.3. 调整拦截规则 我们调整拦截规则其实就是在做两件事拖动下图中的绿色滑块以及判断是否需要勾选 “拦截类似元素” 。
接下来说一下前面提到的那种 “从网页上不太容易直接选中的内容” 该如何处理， 在拦截一个元素之前一定要选择先预览确定预览得到的效果是自己想要的你再点击 “拦截” 按钮将这个元素添加到拦截规则中， 在上图中“应用规则至所有网站” 这个选项基本不用看名称也知道什么意思了这里就不细说了，当然其实 singlefile 自己已经提供了这样的功能就是在批注网页的功能中可以删掉不想要的网页内容但有时候使用这个 AdGuard 拦截元素会更省事一点， 要么就是直接使用 AdGuard 提供的导入导出功能来完成备份如下图 9. 与 AdGuard 的联动 AdGuard 是可以与其他的浏览器插件配合起来使用的， 另外还可以与 SingleFile 这个插件联用，安利给大家。
网页的图片也会被保留还可以只保存一个网页的部分内容还可以对网页做批注。
然后按照下图中的选择并点击刷新按钮 点击刷新后网页会重新加载然后所有我们添加的拦截规则只要生效了都会在这里显示出来我们就可以看这个列表中的信息然后对比 User rules 中的规则就可以判断出哪些是失效的规则了，至于要不要手动编辑这个规则就要看预览时是否满足你的需求了， 如果 User rules 中的规则很多且顺序是乱的该怎么进行对比 我这里提供一种方法就是将它们全部复制出来放到别的可以支持排序的编辑器中进行一次排序操作这样所有域名一致的拦截规则都会被放在一起就方便进行对比了我这里以 gvim 编辑器为例 复制所有规则并粘贴到 gvim 中然后执行下面的命令进行排序 : sort 执行这条命令后你就可以发现它们对于相同网站的拦截规则全都放在一起了这样就方便对比了结果如下图 另外你也可以将排序好的内容重新复制到 User rules 中替换没有排序的内容， 最新添加的规则是在最后一个如果添加错误那么直接删除就可以了， 接下来说说高级设置中的内容。