企业官网建设流程全解析

Chrome 扩展 uMatrix 被弃用，MV3 环境下如何实现其功能？matrix³ 原型来尝试

曾经有一款很棒的 Chrome 扩展程序叫 uMatrix，它由 uBlock Origin 的开发者 Raymond Hill 编写，是一种直观控制网站权限和子资源请求的工具。

它看上去是这样的：

>uMatrix1

>

>

除非你是技术爱好者，否则可能对这个不太感兴趣。但它能让你限制第三方提供子资源请求的范围，还能控制对框架、脚本、视频、字体等功能的访问。你也可以通过浏览器设置手动完成部分操作，但 uMatrix 让这些操作变得快速又简单。这意味着原本繁琐的网页浏览控制变得相对轻松，好吧，至少没那么麻烦了。

总之，很喜欢 uMatrix 提供的各种控制网站权限的功能。

uMatrix 的功能或多或少是 uBlock Origin 功能的子集。为了避免同时维护两个项目，Hill 弃用了 uMatrix，并鼓励用户迁移到 uBO。

这其实还行，uBO 增加了一些很喜欢的功能（比如 外观过滤器）。如果你不介意手动编写更复杂的规则，uBO 基本能实现 uMatrix 的所有功能。

坏消息是，uBO 是一个 传统 MV2 扩展程序，而它的继任者 uBO Lite 移除了这个功能。

真不想放弃这个功能，于是思考是否有解决办法。

可选方案

问题是，在 MV3 环境下还能实现 uMatrix 的功能吗？

声明式网络请求（declarativeNetRequest）

MV2 和 MV3 的主要区别在于，在 MV3 中执行回调时，无法再像以前那样阻止请求，也就是所谓的“阻塞式”网络请求。

如果要拦截请求，现在必须通过 声明式方式 来实现。这意味着不能在每个请求上运行 JavaScript 代码，而是要提前声明想要应用的操作。

可能你已经听说过这个有争议的点：声明式方法无法完全实现回调中所有可能的操作，因此功能有所削弱。从技术上讲确实如此，但实际上这些规则的灵活性足以满足所有需求。

策略

网络上已经有一套控制功能和子资源的系统，叫做 内容安全策略（Content Security Policy，CSP）。

显而易见的设计思路是，使用 `declarativeNetRequest` 添加我们自己的 `Content-Security-Policy`，这样浏览器就会帮我们完成所有工作。我们只需要提供一个方便的界面来管理它。

但是，如何提供一个允许和拒绝的子资源列表呢？使用 uMatrix 时，它会显示子资源类型和来源的列表，让你手动批准或拒绝它们。

这是 uMatrix 的核心优势，所以至关重要。其实，CSP 已经提供了解决方案！有一个 `report-to` 指令，它会指示浏览器将任何安全违规信息发送到报告端点。

我们要做的就是启用这个功能，添加另一条 `declarativeNetRequest` 规则来捕获这些报告，然后根据浏览器发送的报告生成一个列表。这样又成功把一项任务外包出去啦 😂

当然，这需要做一些准备工作，但所有的要素都已具备，觉得完全可行。

概要

既然我们已经大致了解了它可能的实现方式……那就得有人来做个概念验证。好吧，来试试。

这是首次尝试，matrix³。

>matrix³

>

显然它还处于原型阶段，但基本能正常工作。想在博客上分享这个项目，看看有没有人感兴趣！

代码很简单，不需要构建，也没有依赖项，没有使用任何框架。你只需 `git clone` 下来，然后在 Chrome 中“加载已解压的扩展程序”即可。

不是网页开发者，而且显然完全没有用户体验设计的技能 🤦 如果你觉得这是个糟糕的主意，或者知道更好的解决方案，又或者想提供帮助，请告诉我！

主页 • 关于 • 联系我们