如何在 Chrome 扩展 Service Worker 中导入 js 文件？

Question

我正在尝试在 Chrome 扩展的服务工作者中使用 socket.io 库，但是当我尝试在 Chrome 中加载它时，出现错误：未捕获的语法错误：“无法在模块外部使用 import 语句”。

我从here获取了库，然后将其保存在我的扩展文件夹中的socketIo.js中：

然后在我的 service_worker.js 中，我尝试导入它：

import io from './socketIo.js';
const socket = io("http://localhost:3002");

由于它是服务工作人员，我不会将其附加到我的扩展 html 文件中，因此我不能简单地将工作人员设置为这样的模块：

<script type="module" src="./service_worker.js"></script>. 

此外，由于扩展不是 Node.js 应用程序，因此它们没有 package.json，我可以在其中设置属性“type”：“module。

正如您所看到的，我使用了导入文件的相对路径和扩展名，如下所示：Chrome Extension Service Worker 不支持导入其他 JS 文件或 NPM 包

现在我添加了 socket.io 的 ES 模块版本及其“map”文件。 并将 manifest.json 中的 Service Worker 也更新为 ES 模块：

但是当我尝试再次加载扩展时，我收到此警告：“服务工作人员注册失败。状态代码：3”，以及一般错误：

Answer 1

由于它是 Service Worker，我不会将其附加到我的扩展 html 中 文件，因此我不能简单地将工作程序设置为这样的模块：.

此外，由于扩展不是 Node.js 应用程序，因此它们没有 package.json 我可以在其中设置属性“type”：“module。

注册服务人员

您可以选择指定一个额外的字段“type”：“module” 将 Service Worker 包含为 ES 模块，这样您就可以导入 进一步的代码。

manifest.json

{
    "manifest_version": 3,
    "name": "socket.io",
    "version": "1.0",
    "background": {
        "service_worker": "background.js",
        "type": "module"
    }
}

但是您使用的socket.io版本不是ES模块：

Uncaught SyntaxError: The requested module '/socket.io.js' does not provide an export named 'default'

所以我从

https://cdn.socket.io/4.5.3

下载了

socket.io.esm.min.js和socket.io.esm.min.js.map

我不知道他们是否有socket.io 1.7.3的ES模块版本

在扩展中包含 .map 文件可以防止 Service Worker 控制台中出现此错误：

DevTools 无法加载源地图：无法加载内容 chrome-extension://cfdinlnmiepoligakoinbffeaphkfmmp/socket.io.esm.min.js.map： 系统错误：net::ERR_FILE_NOT_FOUND

背景.js

import io from "/socket.io.esm.min.js";
const socket = io("http://localhost:3002");

Service Worker 控制台仍然充斥着此错误：

必须在初始评估时添加“beforeunload”事件的事件处理程序 工人脚本。

但我认为 Stackoverflow 上有一个解决方案。

或不：

• 将Socket.io添加到service_worker（chrome扩展）
• 远程 Socket.io 连接无法通过清单 v3 扩展进行工作

此外，将库

socket.io.esm.min.js

和

socket.io.esm.min.js.map

放在 Service Worker 的同一文件夹中，同一级别（而不是子文件夹中）。

完成此更改后，只需在 chrome://extensions/ 中刷新您的扩展即可。但如果这不起作用，请删除您的扩展并再次解压加载它。

Answer 2

对于那些试图用自己的模块解决这个问题的人。如果您将尝试导入的模块的文件名从 somemodule.js 更改为 somemodule.mjs，您将不再看到错误：“服务工作人员注册失败。状态代码：3”。

例如：

import { myFunc } from "./utils/helpers.js"

应该成为

import { myFunc } from "./utils/helpers.**mjs**"