type
category
status
summary
tags
password
slug
创建时间
Mar 11, 2024 10:31 AM
上次编辑时间
Mar 12, 2024 01:34 PM
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-enhancediv[class^="search-enhance-ads"]： shadow-dom 中要删除的元素的 CSS 选择器，在前方已经得到
#monica-search-enhance：为缩小 Shadow-dom 所在的位置，提高性能，因其 Shadow-dom 的父节点的ID为monica-search-enhance所以可轻易分析得到
- 广告屏蔽采用网页修改的方式并不是上策,最通用最佳的方式还是进行url拦截，不过如何分析并拦截浏览器扩展的数据，还有待学习，所以只能先这样了
主要参考
欢迎在底部评论区分享您的想法和经验，让我们一起共同探讨，共同进步！