如何过渡到镀铬扩展的V3

最近，我的一位客户因为我的扩展程序“过时”而拒绝了它，这促使我深入研究了 Chrome 扩展程序的 Manifest V3。网上关于 Manifest V3 的信息匮乏，理解起来也比较困难。

经过一番努力，我终于完成了任务，但不想让我的研究成果浪费，因此决定分享我的学习经验。

Manifest V3 迁移的重要性

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

Manifest V3 的迁移可以概括如下：

1. 迁移自 2018 年就开始进行。
2. Manifest V3 将于 2023 年 1 月正式开始推出。
3. 到 2023 年 6 月，运行 Manifest V2 的扩展程序将不再可在 Chrome 网上应用店中使用。
4. 不符合 Manifest V3 中引入的新规则的扩展程序最终将从 Chrome 网上应用店中删除。

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

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

简而言之，如果您不尽快进行迁移，您在创建使用 Manifest V2 的扩展程序方面所做的所有努力都可能付诸东流。

Manifest V2 和 V3 之间的关键区别

两者之间存在许多差异，虽然我强烈建议您阅读 Chrome 的“迁移到 Manifest V3”指南，但以下是关键点的简短总结：

1. 在 Manifest V3 中，服务工作者取代了后台页面。
2. 网络请求修改在 Manifest V3 中使用新的 declarativeNetRequest API 处理。
3. 在 Manifest V3 中，扩展程序只能执行其包中包含的 JavaScript 代码，而不能使用远程托管的代码。
4. Manifest V3 为许多方法引入了 Promise 支持，尽管回调仍然作为替代方案受支持。
5. Manifest V3 中的主机权限是一个单独的元素，必须在“host_permissions”字段中指定。
6. Manifest V3 中的内容安全策略是一个对象，其成员表示替代内容安全策略 (CSP) 上下文，而不是 Manifest V2 中的字符串。

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

<code>// 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>"]
}</all_urls></code>

<code>// 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>" ]
}</all_urls></code>

如果您发现上面的一些标签看起来很陌生，请继续阅读以了解您需要了解的内容。

如何顺利迁移到 Manifest V3

我已经将向 Manifest V3 的迁移总结为四个关键领域。当然，虽然新的 Manifest V3 中有很多需要从旧的 Manifest V2 实现的新功能，但在这四个领域进行更改将使您的 Chrome 扩展程序为最终迁移做好准备。

这四个关键领域是：

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

通过这四个方面，您的清单的基本要素将准备好迁移到 Manifest V3。让我们详细查看每个关键方面，并了解如何努力使您的 Chrome 扩展程序免受此迁移的影响。

更新清单的基本结构

更新清单的基本结构是迁移到 Manifest V3 的第一步。您需要做的最重要更改是将“manifest_version”元素的值更改为 3，这表示您正在使用 Manifest V3 功能集。

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

在 Manifest V3 中，“browser_action”和“page_action”属性合并为单个“action”属性。您需要在清单中将这些属性替换为“action”。同样，Manifest V3 中的“chrome.browserAction”和“chrome.pageAction”API 合并为单个“Action”API，您需要迁移到此 API。

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

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

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

修改主机权限

迁移到 Manifest V3 的第二步是修改主机权限。在 Manifest V2 中，您在清单文件的“permissions”字段中指定主机权限。在 Manifest V3 中，主机权限是一个单独的元素，您应在清单文件的“host_permissions”字段中指定它们。

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

<code>// 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>"]
}</all_urls></code>

<code>// 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>" ]
}</all_urls></code>

更新内容安全策略

为了将 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”指定单独的字段。

如果您当前的 CSP 中存在外部域，则还应删除“script-src”、“worker-src”、“object-src”和“style-src”指令中的任何引用。进行这些 CSP 更新对于确保扩展程序在 Manifest V3 中的安全性和稳定性非常重要。

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

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

修改网络请求处理

迁移到 Manifest V3 的最后一步是修改网络请求处理。在 Manifest V2 中，您将使用 chrome.webRequest API 来修改网络请求。但是，此 API 在 Manifest V3 中由 declarativeNetRequest API 替换。

要使用此新 API，您需要在清单中指定 declarativeNetRequest 权限，并将代码更新为使用新 API。两个 API 之间的一个关键区别在于，declarativeNetRequest API 需要您指定要阻止的预定地址列表，而不是像使用 chrome.webRequest API 那样能够阻止整个 HTTP 请求类别。

对代码进行这些更改对于确保扩展程序在 Manifest V3 下继续正常运行非常重要。以下是如何修改清单以在 Manifest V3 中使用 declarativeNetRequest API 的示例：

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

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

您还需要更新扩展程序代码以使用 declarativeNetRequest API 来代替 chrome.webRequest API。

其他需要检查的方面

我所介绍的只是冰山一角。当然，如果我想涵盖所有内容，我可能会在这里待上好几天，而且 Google 的 Chrome 开发人员指南也没有意义。虽然我所介绍的内容将使您的 Chrome 扩展程序在这次迁移中足够安全，但以下是一些您可能想要查看的其他内容，以确保您的扩展程序能够正常运行。

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

以及更多！

请花一些时间来了解所有更改。毕竟，这种变化是不可避免的，如果您不想因为避免此迁移而丢失 Manifest V2 扩展程序，那么请花一些时间来掌握必要的知识。

另一方面，如果您是 Chrome 扩展程序编程的新手并且想要入门，一个很好的方法是深入研究 Chrome 的 Web 开发人员工具的世界。我通过 Linkedin Learning 上的一个课程完成了这项工作，这让我很快掌握了速度。掌握了这些基础知识后，请回到本文并根据 Manifest V3 翻译您所了解的内容！

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

对我来说，向 Manifest V3 的迁移以及 chrome.webRequestAPI 的删除似乎正在将扩展程序从以数据为中心的使用案例（例如广告拦截器）转移到更多功能性和基于应用程序的使用案例。我最近一直在避免应用程序开发，因为它有时会非常消耗资源。但是，这种转变可能会让我重新开始！

近年来，人工智能工具的兴起，许多工具都提供可用的 API，这激发了大量新的和新鲜的 SaaS 应用程序。我个人认为，这与向更多基于应用程序的 Chrome 扩展程序的转变恰逢其时！虽然许多旧的扩展程序可能会因这次迁移而被清除，但许多围绕新颖 SaaS 创意构建的新扩展程序将取而代之。

因此，这是一个令人兴奋的更新，可以用来改进旧的扩展程序或构建新的扩展程序！我个人认为，在扩展程序中使用涉及人工智能的 API 来增强用户浏览体验有很多可能性。但这真的只是冰山一角。如果您想真正地使用您自己的专业扩展程序或联系公司为他们构建/更新扩展程序，我建议您升级您的 Gmail 帐户，因为它在协作、开发和将扩展程序发布到 Chrome 网上应用店方面具有优势。

但是，请记住，每个开发人员的需求都不同，因此请学习您需要的内容来保持当前扩展程序的运行，或让新的扩展程序运行！

以上是如何过渡到镀铬扩展的V3的详细内容。更多信息请关注PHP中文网其他相关文章！