Question

尝试在 Chrome 扩展程序中导入模块时出现“意外标识符”

2017-12-31

21710

javascript google-chrome-extension module

我正在开发一个 Chrome 扩展程序，它将使用一些后台脚本。我认为使用模块会很有趣，因为 Google 最近添加了对它们的本机支持。

但是，当我尝试导入模块时，我收到“未捕获语法错误：意外标识符”错误。错误指向写入导入的代码行。以下是示例：

在 main.js 中：

import test from './test.js';

在 test.js 中：

export default function test () {
  console.log('this is a test.');
}

我尝试了各种其他格式，但都不起作用。有趣的是，Chrome 最新的 import('file.js') 函数工作正常。但是，我正在寻找一种不使用承诺的导入模块的方法。

我做错了什么，还是我不应该在 Chrome 扩展程序中使用模块？

提前致谢。

Answer 1

如果您在使用 import (ES6 module) 时收到如下所示的错误。

您需要在 HTML 文件中使用的脚本标记中使用 type="module" 来通知浏览器。使用它在 HTML 中链接您的 js 文件

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

Answer 2

您应该将 type='module' 添加到 main.js 导入行

查看此 ES6 模块导入给出“未捕获的语法错误：意外的标识符”

Answer 3

Manifest V2 Chrome 扩展程序本身不支持 ES 模块。要在 Manifest V2 扩展程序中使用它们，您需要使用 Webpack 之类的打包程序。

Manifest V3 Chrome 扩展程序支持后台服务工作线程中的 ES 模块。 Chrome 文档解释了如何通过向 manifest.json 添加字段来启用 ES 模块：

You can optionally specify an extra field of "type": "module" to include the service worker as an ES Module, which allows you to import further code. See ES modules in service workers for more information. For example:
"background": {
    "service_worker": "background.js",
    "type": "module"
  }

自 Chrome 91 起，服务工作线程便支持 ES 模块，但我不确定它们是否同时为 Manifest V3 服务工作线程引入。