如何过渡到 Chrome 扩展的 Manifest V3

虽然我不是一个普通的 Chrome 扩展程序程序员，但我确实编写了足够多的扩展程序并且拥有足够广泛的 Web 开发组合来了解我如何完成这项任务。 然而，就在最近，我有一个客户拒绝了我的一个扩展，因为我收到的反馈是我的扩展“过时了”。

当我争先恐后地找出问题所在时，我将尴尬一扫而光，立即开始深入探索 Chrome 扩展程序的世界。 不幸的是，关于 Manifest V3 的信息很少，我很难快速理解这种转变的全部内容。

不用说，有一份悬而未决的工作，我不得不煞费苦心地四处寻找 Google 的 Chrome 开发者文档 并为自己解决问题。 在完成工作的同时，我不想浪费我在该领域的知识和研究，因此决定分享我希望在学习过程中能够轻松获得的内容。

为什么过渡到 Manifest 3 很重要

Manifest V3 是 Google 将在其 Chrome 浏览器中使用的 API。 它是当前 API Manifest V2 的继承者，并管理 Chrome 扩展程序与浏览器的交互方式。 Manifest V3 对扩展规则进行了重大更改，其中一些将成为我们习惯的 V2 的新支柱。

过渡到 Manifest V3 可以概括为：

1. 自 2018 年以来，这种转变一直在进行。
2. Manifest V3 将于 2023 年 XNUMX 月正式开始推出。
3. 到 2023 年 2 月，Chrome 网上应用店将不再提供运行 Manifest VXNUMX 的扩展程序。
4. 不符合 Manifest V3 中引入的新规则的扩展最终将从 Chrome 网上应用店中删除。

Manifest V3 的主要目标之一是让用户更安全并改善整体浏览器体验。 以前，许多浏览器扩展依赖于云端的代码，这意味着很难 评估延期是否有风险. Manifest V3 旨在通过要求扩展包含它们将运行的所有代码来解决这个问题，从而允许 Google 扫描它们并检测潜在风险。 它还强制扩展程序向谷歌请求许可，以便它们可以在浏览器上实施更改。

及时了解 Google 向 Manifest V3 的过渡非常重要，因为它引入了旨在提高用户安全性和整体浏览器体验的扩展程序新规则，不符合这些规则的扩展程序最终将从 Chrome Web 中删除店铺。

简而言之，如果您在接下来的几个月内不进行此转换，那么您为创建使用 Manifest V2 的扩展所做的所有辛勤工作都可能付之东流。

Manifest V2 和 V3 之间的主要区别

两者之间有很多差异，虽然我强烈建议您继续阅读 Chrome 的“迁移到 Manifest V3”指南，这里是关键点的简短而甜蜜的总结：

1. 服务人员 替换 Manifest V3 中的背景页面。
2. 网络请求修改用新的处理 declarativeNetRequest 清单 V3 中的 API。
3. 在 Manifest V3 中，扩展只能执行包含在其包中的 JavaScript，不能使用远程托管的代码。
4. Manifest V3 介绍 promise 支持许多方法，但仍然支持回调作为替代方法。
5. Manifest V3 中的主机权限是一个单独的元素，必须在 "host_permissions" 领域。
6. Manifest V3 中的内容安全策略是一个对象，其成员表示替代内容安全策略 (CSP) 上下文，而不是 Manifest V2 中的字符串。

在更改网页背景的简单 Chrome 扩展程序清单中，可能如下所示：

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

如果您发现上面的某些标签对您来说很陌生，请继续阅读以找出您需要了解的确切内容。

如何顺利过渡到 Manifest V3

我在四个关键领域总结了向 Manifest V3 的过渡。 当然，虽然新的 Manifest V3 中有许多花里胡哨的东西需要从旧的 Manifest V2 中实现，但在这四个方面进行更改将使您的 Chrome 扩展在最终过渡的正确轨道上顺利进行。

四个关键领域是：

1. 更新清单的基本结构。
2. 修改您的主机权限。
3. 更新内容安全策略。
4. 修改您的网络请求处理。

通过这四个方面，您的 Manifest 的基础知识将为过渡到 Manifest V3 做好准备。 让我们详细了解这些关键方面中的每一个，看看我们如何通过这一转变来确保您的 Chrome 扩展程序面向未来。

更新清单的基本结构

更新清单的基本结构是过渡到 Manifest V3 的第一步。 您需要做的最重要的改变是改变 "manifest_version" 元素到 3，它确定您正在使用 Manifest V3 功能集。

Manifest V2 和 V3 之间的主要区别之一是在 Manifest V3 中用单个扩展服务工作者替换了后台页面。 您需要在下面注册服务工作者 "background" 场，使用 "service_worker" 键并指定单个 JavaScript 文件。 即使 Manifest V3 不支持多个后台脚本，您也可以通过指定将 service worker 声明为 ES 模块 "type": "module"，它允许您导入更多代码。

在清单 V3 中， "browser_action" 和 "page_action" 属性统一为一个 "action" 财产。 您需要将这些属性替换为 "action" 在你的清单中。 同样， "chrome.browserAction" 和 "chrome.pageAction" 在 Manifest V3 中，API 被统一为一个“Action”API，您需要迁移到这个 API。

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

总体而言，更新清单的基本结构是过渡到 Manifest V3 过程中的关键步骤，因为它允许您利用此版本 API 中引入的新功能和更改。

修改主机权限

过渡到 Manifest V3 的第二步是修改您的主机权限。 在 Manifest V2 中，您可以在 "permissions" 清单文件中的字段。 在 Manifest V3 中，主机权限是一个单独的元素，您应该在 "host_permissions" 清单文件中的字段。

以下是如何修改主机权限的示例：

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

更新内容安全策略

为了更新您的 Manifest V2 扩展的 CSP 以与 Manifest V3 兼容，您需要对您的清单文件进行一些更改。 在 Manifest V2 中，CSP 在 "content_security_policy" 清单的字段。

在 Manifest V3 中，CSP 现在是一个对象，具有代表替代 CSP 上下文的不同成员。 而不是单一的 "content_security_policy" 字段，您现在必须为 "content_security_policy.extension_pages" 和 "content_security_policy.sandbox"，具体取决于您使用的扩展页面类型。

您还应该删除对外部域的任何引用 "script-src", "worker-src", "object-src"及 "style-src" 指令（如果存在）。 对您的 CSP 进行这些更新非常重要，以确保您在 Manifest V3 中的扩展的安全性和稳定性。

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

修改您的网络请求处理

转换到 Manifest V3 的最后一步是修改您的网络请求处理。 在 Manifest V2 中，您会使用 chrome.webRequest 修改网络请求的API。 但是，此 API 在 Manifest V3 中被替换为 declarativeNetRequest API。

要使用这个新 API，您需要指定 declarativeNetRequest 清单中的权限并更新您的代码以使用新的 API。 这两个 API 之间的一个主要区别是 declarativeNetRequest API 要求您指定要阻止的预定地址列表，而不是像使用 chrome.webRequest API。

在您的代码中进行这些更改以确保您的扩展在 Manifest V3 下继续正常运行非常重要。 下面是一个示例，说明如何修改清单以使用 declarativeNetRequest 清单 V3 中的 API：

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

您还需要更新您的扩展代码才能使用 declarativeNetRequest API 而不是 chrome.webRequest API。

您需要检查的其他方面

我所涵盖的只是冰山一角。 当然，如果我想涵盖所有内容，我可能会在这里呆上几天，而且没有必要使用 Google 的 Chrome 开发人员指南。 虽然我所介绍的内容可以让您的 Chrome 扩展程序具备足够的前瞻性，可以在此过渡期间武装您的 Chrome 扩展程序，但您可能还需要了解一些其他事项，以确保您的扩展程序在其游戏中发挥最佳作用。

• 将后台脚本迁移到 service worker 执行上下文： 如前所述，Manifest V3 将后台页面替换为单个扩展 service worker，因此可能需要更新后台脚本以适应 service worker 执行上下文。
• 统一的 **chrome.browserAction** 和 **chrome.pageAction** 蜜蜂： 这两个等效的 API 在 Manifest V3 中统一为一个 API，因此可能需要迁移到 Action API。
• 迁移需要 Manifest V2 后台上下文的函数： Manifest V3 中服务工作者的采用与方法不兼容，例如 chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()及 chrome.extension.getViews(). 可能需要迁移到在其他上下文和后台服务工作者之间传递消息的设计。
• 将内容脚本中的 CORS 请求移动到后台服务工作者： 可能需要将内容脚本中的 CORS 请求移动到后台服务工作者，以符合 Manifest V3。
• 远离执行外部代码或任意字符串： Manifest V3 不再允许执行外部逻辑使用 chrome.scripting.executeScript({code: '...'}), eval()及 new Function(). 可能需要将所有外部代码（JavaScript、WebAssembly、CSS）移动到扩展包中，更新脚本和样式引用以从扩展包加载资源，并使用 chrome.runtime.getURL() 在运行时构建资源 URL。
• 更新 Tabs API 中的某些脚本和 CSS 方法： 如前所述，Manifest V3 中有几种方法从 Tabs API 转移到 Scripting API。 可能需要更新对这些方法的任何调用以使用正确的 Manifest V3 API。

还有很多！

请随意花一些时间让自己了解所有更改的最新信息。 毕竟，这种变化是不可避免的，如果您不希望您的 Manifest V2 扩展因为避免这种转变而丢失，那么请花一些时间用必要的知识武装自己。

另一方面，如果您不熟悉 Chrome 扩展程序编程并希望入门，那么一个很好的方法就是深入了解 Chrome 的 Web 开发工具的世界。 我通过一个课程做到了这一点 Linkedin学习，这让我很快就上手了。 一旦您掌握了这些基础知识，请返回本文并将您所了解的内容翻译成 Manifest V3！

那么，今后我将如何使用新 Manifest V3 中的功能？

好吧，对我来说，过渡到 Manifest V3 和删除 chrome.webRequest API 似乎正在将扩展从以数据为中心的用例（例如广告拦截器）转移到更多功能和基于应用程序的用途。 我最近一直远离应用程序开发，因为它可以变得相当 资源密集型 有时。 然而，这种转变可能会让我回来！

近来 AI 工具的兴起，其中许多具有可用的 API，引发了大量新的 SaaS 应用程序。 就我个人而言，我认为随着向更多基于应用程序的 Chrome 扩展的转变，它的到来恰逢其时！ 虽然许多旧的扩展可能会从这种转变中消失，但围绕新颖的 SaaS 想法构建的大量新扩展将取而代之。

因此，这是一个令人兴奋的更新，可以跳上并改造旧的扩展或构建新的扩展！ 就个人而言，我看到了使用 API 的许多可能性，这些 API 涉及在扩展中使用 AI 来增强用户的浏览体验。 但这真的只是冰山一角。 如果您想真正了解自己的专业扩展或联系公司为他们构建/更新扩展，我建议 升级您的 Gmail 帐户 因为它在协作、开发和发布 Chrome 网上应用店的扩展方面所带来的好处。

但是，请记住，每个开发人员的要求都是不同的，因此请了解您需要什么来维持当前的扩展，或者让您的新扩展继续运行！

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/