浏览器扩展后台模块

Question

我正在开发一个运行后台脚本的浏览器扩展。到目前为止，我已经完成了所有这些工作。我的问题是我需要在我的后台脚本中使用一个模块。当我编写导入语句时，出现以下异常：

Uncaught SyntaxError: import declarations may only appear at top level of a module

如何将后台脚本变成模块？

Manifest.json

{
  "name": "Extension Demo",
  "version": "1.0",
  "description": "Build an Basic Extension!",
  "permissions": [
    "activeTab",
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "img/icon16.png",
      "32": "img/icon32.png",
      "48": "img/icon48.png"
    }
  },
  "manifest_version": 2,
  "background": {
    "scripts": [ "background.js" ]
  }
}

bakground.js

import * as myMod from './myMod.js'


function redirect(requestDetails) {
    //do some awesome stuff
}

browser.webRequest.onBeforeRequest.addListener(
    redirect,
    { urls: ["<all_urls>"], types: ["page"] },
    ["blocking"]
);

Answer 1

您正在使用清单 V2，我强烈建议更新到 Manifest v3 以获得最新的功能和您的错误修复。

在您的 manifest.json 文件中，在对象内部传递 "type": "module" 以允许 ESM 导入。

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

或者，如果您仍想使用 V2，请改用动态导入。请记住，那些 returns 承诺，您将不得不等待它或使用 .then() 语句。

(async () => {

  const myMod = await import("./myMod.js");
  // if myMod.js uses an `export default` statement, use `(await import("./myMod.js")).default` instead.

  function redirect(requestDetails) {
    //do some awesome stuff
  }

  browser.webRequest.onBeforeRequest.addListener(
    redirect,
    { urls: ["<all_urls>"], types: ["page"] },
    ["blocking"]
  );
})();

浏览器扩展后台模块

Browser Extension Background Module

javascript

browser-extension