浏览器扩展后台模块

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，我强烈建议将舱单v3更新为最新特性和错误修复。

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

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

或者，如果您仍然希望使用V2，则使用动态导入。请记住，这些返回承诺，您将不得不等待它或使用.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"]
  );
})();