uBlock Origin(uBlock₀)实现网页背景图片屏蔽

本文介绍如何使用uBlock Origin插件屏蔽特定网站的背景图片,通过F12调试工具定位元素,并创建静态过滤规则实现目标。以lo.gamekee.com为例,详细步骤及代码分享。

uBlock Origin 是本人目前在用的广告屏蔽插件.

之前一直也没对它进行配置, 直接使用的默认的过滤规则.
最近在浏览网页过程中, 突然有了需要屏蔽背景图片的需求, 所以查阅资料实现了这一功能.


目标网站: http://lo.gamekee.com/

顺便吐槽一下
这个网站的优化真的肥肠布星
主页打开花了我分钟…

首先 F12 打开调试页面, 确认一下需要屏蔽的元素到底在哪里

<body style="background: url( //cdnimg.gamekee.com/images/www/1598872751256_47740741.png?x-image-process=image/imageslim) no-repeat fixed 50% 0;background-size:cover;">

然后参照网上搜到的屏蔽背景图片的示例

idnes.cz##html,body:style(background-image:none !important)

写出本例中我们需要的 静态 过滤规则

lo.gamekee.com##html,body:style(background:none !important)



应用更改后去目标页面刷新
可以看到背景图片已经实现了隐藏.

一款高效的网络请求过滤工具,占用极低的内存和 CPU。 一款高效的请求过滤工具:占用极低的内存和CPU,和其他常见的过滤工具相比,它能够加载并执行上千条过滤规则。 效率概述说明: https://github.com/gorhill/uBlock/wiki/uBlock-vs.-ABP:-efficiency-compared 用法:点击弹出窗口中的电源按钮,uBlock₀ 将对当前网页永久禁用/启用过滤功能 它只控制当前网页的请求过滤,而不是一个全局开关 它只控制当前网页的请求过滤,而不是一个全局开关。 *** 它不只是一个广告拦截工具,它还可以从 hosts 文件里读取和创建过滤规则。 初始默认加载和执行下列过滤规则列表: - EasyList - Peter Lowe’s Ad server list - EasyPrivacy - Malware domains 这里还有更多的规则列表供你选择: - Fanboy’s Enhanced Tracking List - Dan Pollock’s hosts file - hpHosts’s Ad and tracking servers - MVPS HOSTS - Spam404 - 等等 当然,启用越多的过滤规则就会产生越高的内存占用 然而,即使再添加 Fanboy 额外的两个规则列表,如 hpHosts’s Ad 和 tracking servers,uBlock₀ 的内存占用依然比其他常见的过滤工具要低的多。 另外请注意,选择一些额外的列表可能会导致网页破损可能性增高 —— 尤其是那些通常被用作 hosts 文件的列表。 *** 没有这些过滤规则列表,这个扩展就没有了意义 所以如果你真的想做点贡献,想想那些维护过滤规则的人们,是他们让所有人能够免费使用这一切变得可能。 *** 免费。 遵从 GPLv3 公共许可协议开源。 一切为了用户。 贡献者 @ Github: https://github.com/gorhill/uBlock/graphs/contributors 贡献者 @ Crowdin: https://crowdin.net/project/ublock *** 它还是一个相当早期的版本,在您评论的时候请记住这一点。 项目更新日志: https://github.com/gorhill/uBlock/releases 支持语言:Bahasa Indonesia,Bahasa Melayu,Deutsch,English,English (UK),Filipino,Français,Nederlands,Norsk,Tiếng Việt,Türkçe,català,dansk,eesti,español,hrvatski,italiano,latviešu,lietuvių,magyar,polski,português (Brasil),português (Portugal),română,slovenský,slovenščina,suomi,svenska,čeština,Ελληνικά,Српски,български,русский,українська,עברית,فارسی‎,मराठी,हिन्दी,বাংলা,தமிழ்,తెలుగు,ಕನ್ನಡ,മലയാളം,ไทย,‫العربية,中文 (简体),中文 (繁體),日本語,한국어
<think>我们正在讨论uBlock Origin如何实现重定向功能。从引用[2]和引用[4]中,我们知道uBlock Origin使用了一种基于规则的重定向机制,类似于AdGuard的Redirect Resources功能,并且使用了特定的规则语法(如$redirect修饰符)。此外,引用[4]提到了一个关键文件`redirect-resources.js`,其中定义了重定向规则的具体实现。 下面是关于uBlock Origin实现重定向功能的详细说明: ### 1. **重定向规则语法** uBlock Origin使用与广告拦截规则相同的语法,并扩展了特定的修饰符来实现重定向。重定向规则的基本结构如下: ``` ||example.com/ads.js$script,redirect=noop.js ``` - `||example.com/ads.js`:匹配请求的URL模式 - `$script`:表示该规则只对脚本资源生效 - `redirect=noop.js`:指定重定向目标(这里重定向到一个空操作脚本) 重定向目标通常是内置的或用户提供的本地资源(位于uBlock Origin的资源库中)。常见的重定向资源包括: - `noop.js`:空JavaScript文件 - `noop.html`:空HTML文件 - `noop.txt`:空文本文件 - `1x1.gif`:1像素透明GIF图片 ### 2. **重定向功能的实现流程** 根据引用[4],重定向的实现流程在`src/js/redirect-resources.js`中定义,主要步骤包括: ```mermaid graph TD A[网络请求拦截] --> B{匹配重定向规则?} B -->|是| C[构造本地资源URL] C --> D[修改请求目标为本地资源] B -->|否| E[允许请求继续] ``` 具体代码层面的处理步骤: 1. **请求拦截**:通过浏览器的`webRequest`API(在Chrome扩展中)拦截网络请求。 2. **规则匹配**:检查请求的URL是否匹配任何带有`redirect`修饰符的规则。 3. **资源映射**:如果匹配,则将请求重定向到扩展内部的资源文件(如`noop.js`)。 4. **请求处理**:修改请求的URL,使其指向扩展内部的资源(例如:`chrome-extension://<extension-id>/noop.js`)。 ### 3. **资源文件的存储与管理** uBlock Origin将重定向所需的资源文件(如`noop.js`)打包在扩展内部。这些文件通常位于扩展的`web_accessible_resources`目录下,以便网页上下文能够访问它们。在manifest.json中需要声明这些资源: ```json "web_accessible_resources": [ "noop.js", "noop.html", "1x1.gif" ] ``` ### 4. **在规则列表中的应用** 用户可以在自定义规则列表中添加重定向规则。例如,要屏蔽某个广告脚本并将其重定向到空操作脚本,可以添加: ``` ||example.com/advertisement.js$script,redirect=noop.js ``` 当uBlock Origin检测到对`example.com/advertisement.js`的脚本请求时,它会将请求重定向到本地的`noop.js`文件,从而阻止原始广告脚本的执行。 ### 5. **与$rewrite修饰符的兼容性** 引用[2]提到,uBlock Origin的重定向功能兼容AdBlock Plus的`$rewrite`修饰符(但实际使用`$redirect`)。这允许用户迁移ABP的重定向规则到uBlock Origin。 ### 6. **技术挑战与解决方案** - **性能考虑**:重定向规则匹配需要高效,uBlock Origin使用高度优化的匹配算法(如基于哈希的快速匹配)来确保低延迟。 - **安全性**:确保重定向资源来自扩展的安全上下文,避免外部资源注入。 - **跨浏览器兼容性**:通过抽象层处理不同浏览器(Chrome/Firefox)的webRequest API差异。 ### 示例:重定向规则的内部处理 当遇到规则`||example.com/ads.js$script,redirect=noop.js`时: 1. 用户访问的页面请求`https://example.com/ads.js` 2. uBlock Origin的规则引擎匹配到该规则 3. 扩展将请求重定向到`chrome-extension://abcdefghijklmnopqrstuvwxyz/noop.js` 4. 浏览器加载并执行`noop.js`(一个空操作脚本)而不是原始广告脚本 > 注意:重定向功能依赖于`webRequest`API的阻塞能力,在Manifest V3中需要声明`webRequestBlocking`权限[^1]。 §§相关问题§§ 1. 如何自定义uBlock Origin的重定向资源文件? 2. uBlock Origin的重定向功能与普通屏蔽规则有何性能差异? 3. 在Manifest V3下uBlock Origin的重定向功能是否受到影响? 4. 如何编写高效的uBlock Origin重定向规则? [^1]: uBlock Origin版本迭代历史:重要功能更新与bug修复回顾 [^2]: AdGuard 还提供了 Redirect Resources 功能,它使用与 uBlock Origin 相同的过滤规则语法 [^3]: uBlock Origin规则语法完全指南:编写高效广告拦截规则 [^4]: uBlock Origin广告拦截技术原理:从URL匹配到DOM操作 </think> ### uBlock Origin 实现重定向功能的技术解析 uBlock Origin 通过 **规则引擎 + 资源重定向机制** 实现请求重定向功能,具体实现流程如下: #### 1. **规则匹配系统** [^3][^4] - 使用基于 `$redirect` 修饰符的过滤规则语法: ```bash ||ads.example.com/script.js$script,redirect=noopjs ``` - **关键组件**: - `||ads.example.com/script.js`:URL 匹配模式 - `$script`:限定脚本类型请求 - `redirect=noopjs`:重定向目标资源标识符 #### 2. **重定向处理流程** ```mermaid graph TD A[浏览器发起请求] --> B(uBlock规则引擎) B --> C{匹配redirect规则?} C -->|是| D[查找本地资源映射] C -->|否| E[放行原始请求] D --> F[构造重定向URL] F --> G[返回重定向响应] ``` #### 3. **核心代码实现** 在 `src/js/redirect-resources.js` 中的关键逻辑: ```javascript const redirectResources = new Map([ ['noopjs', '/data/blank.js'], ['1x1.gif', '/data/image/1x1.gif'], // ...其他资源映射 ]); function handleRequest(details) { const rule = findMatchingRedirectRule(details.url); if (!rule) return; const resourceId = rule.redirect; if (redirectResources.has(resourceId)) { const path = redirectResources.get(resourceId); return { redirectUrl: chrome.runtime.getURL(path) }; } } ``` #### 4. **资源映射机制** [^4] | 重定向标识符 | 实际资源路径 | 用途 | |--------------|--------------------|--------------------------| | `noopjs` | `/data/blank.js` | 空JavaScript文件 | | `noophtml` | `/data/blank.html` | 空HTML文件 | | `1x1.gif` | `/data/image/1x1.gif` | 透明像素图片 | | `nooptext` | `/data/blank.txt` | 空文本文件 | #### 5. **浏览器扩展权限配置** 在 `manifest.json` 中声明必要权限: ```json "permissions": [ "webRequest", "webRequestBlocking", "<all_urls>" ], "web_accessible_resources": [ "/data/blank.js", "/data/blank.html", "/data/image/*" ] ``` #### 6. **性能优化措施** - 使用 **哈希表** 存储规则实现 $O(1)$ 复杂度匹配 - 资源文件预编译为二进制格式 - 并行处理规则匹配和资源加载 #### 实际应用示例 当用户访问含广告的页面时: 1. 浏览器请求 `https://ads.com/tracker.js` 2. uBlock 匹配规则:`||ads.com/tracker.js$script,redirect=noopjs` 3. 返回重定向响应:`chrome-extension://[ID]/data/blank.js` 4. 浏览器加载无害的空白JS文件 > 提示:可通过 **开发者工具 → Network 标签页** 观察 `(blocked: uBlock)` 和重定向请求[^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值