Using es6 import on Extension Pages

Add-ons Development
#1

Dear team
I have implemented an add-on which creates an extension page via tabs.create
When running extension in debug temporary extension mode everything works fine.
However when web-ext lint is executed I get errors on all pages containing import or exports.
I have changed manifest to contain page background.html in order for imports to run on background script and therefore runs ok with background scripts but what is the proper method for Extension pages (NOT content scripts)

Thanks in advance
Alex

#2

Extension pages should just work with es modules. However, make sure to use relative URLs, so it works no matter the ID your extension gets. Further make sure to import your modules with an explicit <script type="module"> from the extension page. Further, the imports and exports have to follow the es module rules (imports have to come before any code).

Lastly, I wonder what errors the linter gives you, since normally they’re not per page but per script?

#3

Dear Martin
Thanks for the very prompt reply.

  1. In my main.html page I have
    < script type=“module” src=“main.js” >
  2. In terms of relative urls I tried with both /admin/… and ./admin options with no luck
  3. I get these kind of errors
    JS_SYNTAX_ERROR JavaScript syntax error There is a JavaScript syntax error in your code; validation cannot continue on this administration/controllers/configController.js… 1 1

In the files themselves the imports are on the first line for example.

And like I specified when I run the extension in the temporary loading everything works fine and only fails when running either web-ext lint or web-ext sign

#4

Could you paste here a piece of code?
I had a similar issue because my IDE was omitting “.js” postfix when importing modules, which needs to be there, for example:

import {myExport} from '/modules/my-module.js';
#5

Hi Juraj
I encountered that early on :slight_smile:
These are examples of the offending lines
import GridController from “…/controllers/gridController.js”
export default class GridController {

#6

So, maybe old version of linter? Try to update your web-ext. I’m getting out of ideas…

#7

Hi
It seems the import is not the issue but rather some errors in the file and yet error is reported as line 1

  1. Weird thing is code works but didn’t like functions in the format of
    nameOfFunction = (arg)=>{}

Why does this work normally then and how can lint correctly show errors. Is there a switch?

#8

The linter does not yet support class fields, which is what the syntax you have there likely is.

Error submitting my first add on
#9

Actually Martin
As I mentioned in previous comment this lint is incorrectly stating error is at import due to this I believe

“As I mentioned in my previous comment the actual error raised by espree is not logged anywhere, after that error happens we fall back to parse the file as a “script” instead of a “module” and so the linter will mark the first import or export as invalid syntax (which I absolutely agree that it makes this issue way more confusing).”
as per (https://github.com/mozilla/addons-linter/issues/2940)

I have corrected the underlying issues and most issues have gone away bar one.

Lint is ok with a normal import but seems to dislike dynamic imports ie
import(filepath).then(module=> {

// do something with module

             })
#10

Yep, dynamic imports don’t work with the linter:

#11

First addon and discover the shortcomings after I finish the work :smiley:

Do you know if there is alternative dynamic loading method that lint allows

#12

You can of course dynamically inject script tags, however those tags can’t load module scripts. That’s all there is as far as I know. However since all the data is local either way there is not much gain in dynamically loading modules (apart from a few KBs of memory that aren’t used).