AI智能摘要
GPT
The article discusses how to block ads in Monica search enhancement using AdGuard's custom rules, focusing on the challenges posed by ShadowRoot. The author analyzes the ad's DOM elements, which use random class attributes, making them hard to target. Despite finding a pattern in the class attributes, standard blocking rules fail due to ShadowRoot. The solution involves using script-based approaches to effectively block these ads.
内容概述
文章首先描述了Monica搜索增强时存在的插入推广广告行为，作者因此决定进行广告屏蔽。通过F12开发者工具，作者发现广告的dom元素无法准确定位，因为它采取了随机class的方式。然而，作者注意到广告中的div标签的class属性值是有特征的，前面的值是固定的，后面的才是随机值。因此，作者决定通过其他方式进行拦截。针对ShadowRoot的情况，作者使用脚本段的形式进行解决。
关键点总结
- Monica搜索增强时存在插入推广广告行为，作者决定进行广告屏蔽。
- 通过F12开发者工具，作者发现广告的dom元素无法准确定位，因为它采取了随机class的方式。
- 广告中的div标签的class属性值是有特征的，前面的值是固定的，后面的才是随机值。
- 针对ShadowRoot的情况，作者使用脚本段的形式进行解决。
各种类型供您挑选，包您满意 机场测评与安利
一. Monica嵌入广告现状
Monica搜索增强时，存在插入推广广告行为，因我下方还有其他搜索增强软件，影响显示效果等诸多原因，我决定将其屏蔽
不要纠结于为什么屏蔽，你纠结这个的话，那你为什么会看到这篇文章呢
二. 问题分析
通过F12打开开发者工具后，选择元素可以发现，其广告的dom元素无法准确的定位，是采取了随机class的方式
三. 解决方案
1. 常规思路
所以只能通过其他方式进行拦截，不过可以注意到，其广告中的div标签的class属性值是有特征的：前面的值是固定的，后面的才是随机值
所以我们可以针对其广告写如下的规则
div[class^="search-enhance-ads"]规则解释
<div> 元素内，选择具有 class 属性值以search-enhance-ads 开头的 <div> 元素，并进行屏蔽（隐藏）操作。参考
但很不幸的时，这并没有效果，因为常规的拦截规则并不适用于 ShadowRoot 内的元素
2. ShadowRoot 造成的麻烦
不过针对ShadowRoot的情况，已经被考虑到了，可以使用脚本段的形式解决
参考
所用脚本
描述： 删除打开的影子 DOM 元素内的元素。
语法：
example.org#%#//scriptlet('remove-in-shadow-dom', selector[, baseSelector])selector— 必需，shadow-dom 中要删除的元素的 CSS 选择器
baseSelector— 可选，特定页面 DOM 元素的选择器， 缩小页面 DOM 中 Shadow-dom 主机应该所在的部分， 默认为 document.documentElement
baseSelector应匹配页面 DOM 的元素，但不匹配 Shadow DOM 的元素。
根据其调用规则，我们可写出以下拦截规则
#%#//scriptlet('remove-in-shadow-dom', 'div[class^="search-enhance-ads"]', '#monica-search-enhance')规则解释
调用
remove-in-shadow-dom 脚本段，传入参数分别为 div[class^="search-enhance-ads"] 和 #monica-search-enhancediv[class^="search-enhance-ads"]： shadow-dom 中要删除的元素的 CSS 选择器，在前方已经得到
#monica-search-enhance：为缩小 Shadow-dom 所在的位置，提高性能，因其 Shadow-dom 的父节点的ID为monica-search-enhance所以可轻易分析得到
- 广告屏蔽采用网页修改的方式并不是上策,最通用最佳的方式还是进行url拦截，不过如何分析并拦截浏览器扩展的数据，还有待学习，所以只能先这样了
各种类型供您挑选，包您满意 机场测评与安利
📎 参考文章
主要参考
还可以加入Telegram的七行的小仓库|互联网记忆|博客 和七行 技术交流群 找到更多小技巧哦🥰，还可以在聊天群探讨各种问题❓
欢迎在底部评论区分享您的想法和经验，让我们一起共同探讨，共同进步！
- 作者:Qi Xing
- 链接:https://blog.qixing1217.top/article/adguard-shadowroot-custom-ad-blocking-rules-monica-search
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
