清单 V3 - 在 service_worker 中导入 class

Question

我正在尝试在我的 Service Worker 中导入一个 class，在我的 Chrome Extension

中

这就是我在文件开头的内容：

/*global chrome*/
try {
    importScripts("utils/utils.js");
} catch (e) {
    console.log(e);
}

这是我调用 class 的函数：

async function injectPopup() {
    try {
        let b = new Utils();
    } catch (e) {
        console.log(e);
    }
    .
    .
    .

console.log 给我打印这个 :

ReferenceError: Utils is not defined
    at injectPopup (<anonymous>:4:17)
    at <anonymous>:28:3

这是utils/utils.js的内容：

class utils {
    test() {
        console.log("foooo");
    }
}

你能告诉我应该如何调用 classes 吗？目标是让代码更清晰，而不是所有逻辑都在同一个 service_worker，所以如果有其他更好的做法，我很想知道

谢谢！

Answer 1

就我而言，有两个问题：

首先，正如 wOxxOm 评论的那样，我需要在 service_worker 文件中创建一个全局变量：

/*global chrome*/
let globals = {}; // HERE
try {
    importScripts("utils/Utils.js");
} catch (e) {
    console.log(e);
}

并在 class 声明中将其添加到全局，如下所示：

globals.Utils = class Utils {
    test() {
        console.log("foo");
    }
}

第二个问题是我是从给定 chrome.scripting.executeScript 的函数调用它的，该函数无法工作，因为脚本是在给定选项卡中自行执行的 Javascript 和 not 在弹出窗口 Javascript 中，这就是找不到 class 的原因。

Manifest V3 - import class in the service_worker