Firefox Manifest V3扩展中如何使用importScripts()？

问题背景 #

我正在开发一款浏览器扩展，在Chrome中可通过如下配置实现功能：
manifest.json:

"background": {
        "service_worker": "scripts/vh_service_worker.js",
},

并在service worker中正常使用importScripts("somefile.js")。

但Firefox的Manifest V3暂未实现background.service_worker，我尝试了两种方案均失败：

尝试1：将service worker作为后台脚本加载 #

manifest.json:

"background": {
        "scripts": ["scripts/vh_service_worker.js"]
    },

此方式虽能运行，但脚本未在WorkerGlobalScope中执行，导致无法使用importScripts()。

尝试2：通过后台脚本手动注册service worker #

manifest.json:

"background": {
        "scripts": ["scripts/vh_service_worker_loader.js"]
    },

vh_service_worker_loader.js:

if ("serviceWorker" in navigator) {
    navigator.serviceWorker
        .register("scripts/vh_service_worker.js")
        .then((registration) => {
            console.log("Service Worker registered with scope:", registration.scope);
        })
        .catch((error) => {
            console.error("Service Worker registration failed:", error);
        });
}

但环境中不存在navigator.serviceWorker，条件始终不成立。

请问如何在Firefox的Manifest V3扩展中使用importScripts()？

可行解决方案 #

针对Firefox Manifest V3的限制，目前有两种可靠方式实现类似importScripts()的脚本加载能力：

方案1：使用ES模块语法替代importScripts() #

Firefox的Manifest V3后台脚本支持ES模块，你可以将后台脚本改为模块模式，用import语句替代importScripts()：

1. 修改manifest.json，给后台脚本添加type: "module"：

"background": {
    "scripts": ["scripts/vh_background.js"],
    "type": "module"
}

2. 在vh_background.js中使用ES模块导入：

import './somefile.js';
// 其他业务代码

这种方式无需依赖service worker环境，直接在后台模块中实现脚本导入，适配Firefox的Manifest V3规范。

方案2：使用chrome.scriptingAPI动态注入脚本 #

如果需要保持原有service worker的逻辑结构，可以通过后台脚本调用chrome.scripting.executeScript()加载外部脚本，模拟importScripts()的效果：

1. 确保manifest.json中声明scripting权限：

"permissions": ["scripting"]

2. 在后台脚本中执行注入：

// vh_background.js
(async function() {
    await chrome.scripting.executeScript({
        target: { self: true },
        files: ['scripts/somefile.js']
    });
    // 注入完成后执行原有逻辑
})();

这种方式会将目标脚本注入到当前后台上下文，实现脚本加载的效果。

注意事项 #

• Firefox对Manifest V3的service worker支持正在逐步完善，后续版本可能会兼容background.service_worker配置，届时可以切换回Chrome的实现方式。
• 使用ES模块时，注意所有依赖脚本也需要符合模块语法，避免出现加载错误。

内容的提问来源于stack exchange，提问作者FMaz008