type
category
status
summary
tags
password
slug
创建时间
Mar 11, 2024 10:31 AM
上次编辑时间
Sep 23, 2024 05:15 AM
icon
Date
内容概述
文章首先描述了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-enhance
div[class^="search-enhance-ads"]
: shadow-dom 中要删除的元素的 CSS 选择器,在前方已经得到
#monica-search-enhance
:为缩小 Shadow-dom 所在的位置,提高性能,因其 Shadow-dom 的父节点的ID为monica-search-enhance
所以可轻易分析得到
- 广告屏蔽采用网页修改的方式并不是上策,最通用最佳的方式还是进行url拦截,不过如何分析并拦截浏览器扩展的数据,还有待学习,所以只能先这样了
主要参考
欢迎在底部评论区分享您的想法和经验,让我们一起共同探讨,共同进步!
- 作者:Qi Xing - 七行
- 链接:https://blog.qixing1217.top/article/adguard-shadowroot-custom-ad-blocking-rules-monica-search
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。