我正在开发一个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);
});

manifest.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/*"
  ]
}

background.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中得到这个错误，import被放置在文件的顶部。我已经尝试了这个similar question中提出的一些解决方案，但这也不起作用。