为什么我的 firefox 扩展中出现“导入声明可能只出现在模块的顶层”

Question

我正在开发一个 firefox 扩展，我想从 foo.js 导入一个函数。我的目录结构是这样的

app
  js
    foo.js
  content.js
  manifest.json
  background.js

foo.js

function myFunc() {
  let hello = 'hello from foo.js';

  return hello;
}

export {myFunc};

content.js

import { myFunc } from './js/foo.js';

browser.runtime.onMessage.addListener((message) => {
  let result = myFunc();
  console.log(result);
});

清单.json

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0.0",
  "description": "A notetaking tool for YouTube videos",
  "icons": {
    "48": "icons/border-48.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources":[
    "icons/my_icon.svg",
    "js/*"
  ]
}

背景.js

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   browser.tabs.sendMessage(tabId, {message: 'hello from background.js'});
});

这行不通。我在控制台中收到以下错误

import declarations may only appear at the top level of a module

我不明白为什么我在 content.js 中收到此错误，导入位于文件顶部。我已经在这个similar question中尝试了一些建议的解决方案，但这也不起作用。

Answer 1

我将建议处理此问题的任何人阅读 Dhruvil Shah 的 答案。他们推荐使用像 Webpack 或 rollup 这样的打包器。我能够使用 Webpack 将所有内容捆绑到一个名为 main.js 的文件中。然后，我将 manifest.json 文件从

  ....
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  ....

到

  ....
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/main.js"],
      "run_at": "document_start"
    }
  ],
  ....

另外，这个来自 fireship 在 YouTube 上的视频也帮助我使用了 Webpack。