Firefox add-on not working if the main js file imports stuff from other js files

Question

My firefox add-on currently has the main file organizer.js and just does not run when I import stuff from other js files (footer.js and header.js).

manifest.json

{

  "manifest_version": 2,
  "name": "Course Organizer",
  "version": "1.0",

  "description": "Keep the hassles that come with UI of class schedule at bay and make your course selection process smooth and seamless",

  "icons": {
    "48": "icons/border-48.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*.my.wasabi.edu/e/reg/soc-view/results.asp*"],
      "js": ["organizer.js", "footer.js", "header.js"],
      "css": ["index.css"]
    }
  ]

}

organizer.js (the relevant part)

import hello from 'footer'
import head from 'header'

console.log(hello + head)

footer.js

let hello = 'haha'
export {hello}

header.js

let head = 'head'
export {head}

I did some research and found out the js files are loaded in the specified order in the array, so I messed around with it but to no avail. Whenever I comment out the imports, it runs again.

Answer 1

I got it work the way I want now and figured out it is prohibited to use import/export in JS files in an extension. If you are trying to divide a big chunk of code in one file into many files, go ahead and cut/paste them to as many new files as you like. Be aware of the order of the files in "content-scripts" as they will be loaded to web in that order and you do not want to refer to an element that does not exist in DOM yet because it is created in next files.