type
category
status
summary
tags
password
slug
创建时间
Mar 11, 2024 10:31 AM
上次编辑时间
Jul 2, 2024 05:52 AM
icon
Date
内容概述
文章首先描述了Monica搜索增强时存在的插入推广广告行为,作者因此决定进行广告屏蔽。通过F12开发者工具,作者发现广告的dom元素无法准确定位,因为它采取了随机class的方式。然而,作者注意到广告中的div标签的class属性值是有特征的,前面的值是固定的,后面的才是随机值。因此,作者决定通过其他方式进行拦截。针对ShadowRoot的情况,作者使用脚本段的形式进行解决。
关键点总结
- Monica搜索增强时存在插入推广广告行为,作者决定进行广告屏蔽。
- 通过F12开发者工具,作者发现广告的dom元素无法准确定位,因为它采取了随机class的方式。
- 广告中的div标签的class属性值是有特征的,前面的值是固定的,后面的才是随机值。
- 针对ShadowRoot的情况,作者使用脚本段的形式进行解决。
一. Monica嵌入广告现状
Monica搜索增强时,存在插入推广广告行为,因我下方还有其他搜索增强软件,影响显示效果等诸多原因,我决定将其屏蔽
不要纠结于为什么屏蔽,你纠结这个的话,那你为什么会看到这篇文章呢
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c3616bc-0f50-495d-bff3-aa9727f342cc%2Facbd969c-ec72-4bc2-aec0-4b8e9c2a7786%2FUntitled.png?table=block&id=dc42840e-d2be-4d9c-996d-0a31638a4044&t=dc42840e-d2be-4d9c-996d-0a31638a4044&width=463&cache=v2)
二. 问题分析
通过F12打开开发者工具后,选择元素可以发现,其广告的dom元素无法准确的定位,是采取了随机class的方式
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c3616bc-0f50-495d-bff3-aa9727f342cc%2F4946e00c-bc32-4853-972e-790c3c7207c4%2FUntitled.png?table=block&id=0a978522-2fe5-49e3-8db6-f4829436843f&t=0a978522-2fe5-49e3-8db6-f4829436843f&width=646&cache=v2)
三. 解决方案
1. 常规思路
所以只能通过其他方式进行拦截,不过可以注意到,其广告中的div标签的class属性值是有特征的:前面的值是固定的,后面的才是随机值
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c3616bc-0f50-495d-bff3-aa9727f342cc%2Fa08bebba-dfa7-474e-a462-8ea79b66afcd%2FUntitled.png?table=block&id=341ae9da-4719-4d0e-aa60-597f4a19b916&t=341ae9da-4719-4d0e-aa60-597f4a19b916&width=489&cache=v2)
所以我们可以针对其广告写如下的规则
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
所以可轻易分析得到
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c3616bc-0f50-495d-bff3-aa9727f342cc%2Fc640d071-5780-479c-9b88-190d41671077%2FUntitled.png?table=block&id=179cbe2d-008b-4de8-8f07-065b38f9ab4a&t=179cbe2d-008b-4de8-8f07-065b38f9ab4a&width=575&cache=v2)
- 广告屏蔽采用网页修改的方式并不是上策,最通用最佳的方式还是进行url拦截,不过如何分析并拦截浏览器扩展的数据,还有待学习,所以只能先这样了
主要参考
欢迎在底部评论区分享您的想法和经验,让我们一起共同探讨,共同进步!
- 作者:Qi Xing - 七行
- 链接:https://blog.qixing1217.top/article/cc78f4ce-1120-45c0-8202-3ba3ba9d51d6
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。