后台 Chrome 扩展 Manifest V3 库

Question

我正在将我的 chrome 扩展从清单 v2 更新到 v3。这是旧的清单：

清单 V2：

{
"manifest_version": 2,
"name": "Legacy Search Assistant",
"version": "0.1.1",
"content_scripts": [
    {
        "matches": [
            "https://*.legacysite.io/*","*://*/api*"
        ],
        "js": ["jquery-3.6.0.min.js","content.js"]
    }
],
"options_page": "options.html",
"background": {
    "scripts": ["jsencrypt.min.js", "jquery-3.6.0.min.js", "background.js"]
},
"browser_action": {
    "default_icon":  "icon.png",
    "default_popup": "popup.html",
    "default_title": "Legacy Search"
},
"permissions": [
    "storage"
]
}

由于 jsencrypt.min.js 已加载到清单中，我可以在 background.js 中调用它的函数，但现在我已经转到清单 v3，我在让服务工作人员访问此库时遇到问题。

例如，当我在background.js中进行此调用时：

importScripts("/scripts/jsencrypt.min.js");

它抛出以下错误：

Error handling response: Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://<extension ID>/scripts/jsencrypt.min.js' failed to load.

如果我单击错误中的链接，它会将我直接带到我想要加载的库。

我已经尝试过这个答案中的所有修复。如果可以的话请帮忙。

Answer 1

importScripts() 是在工作人员中加载脚本的旧方法。

现在我们可以使用更现代的 ES 模块来代替。

从 Chrome 91 开始，我们可以在 Service Worker 中使用 JavaScript 模块。

只需在清单中将type属性设置为module即可。

{
"manifest_version": 3,
"background": {
  "service_worker": "background.js",
  "type": "module"
}

这会将 Service Worker 作为 ES 模块加载，这样您就可以在 Service Worker 中使用import关键字来导入其他模块。前任-

// background.js
import * as module from './scripts/jsencrypt.min.js';

但请确保您导入的脚本（如本例中的./scripts/jsencrypt.min.js）已导出您想要使用的所需代码。

了解 ES 模块

Answer 2

我最终使用的解决方案是将 jsencrypt 的所有使用移至 content.js。这使得模块能够正常运行，并且不会在我们使用 chrome 扩展的环境中暴露公钥。

创建并初始化 jsencrypt 对象后，我通过消息将其传递给后台脚本。