How to use ES6 modules in content scripts?

Add-ons Development
#1

I know how to use background scripts with ES6 modules (basically, just use an HTML background file) and there is an open bug for native support for loading content scripts from WebExtensions:

That all said, what is the current best practise for loading content scripts as ES6 modules?

One idea I had was this:

  • just load a minimal “usual” script that injects an HTML script tag into the current site that can then load the ES6 module from the add-on.
    However, AFAIK, this breaks all security guarantees of extensions, because you’d need to add the ES6 module to web-accessible resources and the JavaScript would run at the same way/place/permissions as website-JS, loosing x-ray vision, would not it?

So what is the best way to do this, currently? (in a secure way)

How to import npm packages in content script in an extension?
#2

The only option you’d have is to use import(), but I think the linter doesn’t quite support that yet:

1 Like
#3

Okay, yeah, thanks. And that dynamic import is only supported since Firefox v67.

#4

Alternatively you can bundle your content script code using some module bundler like Webpack or Rollup.

Nice thing about Rollup is that it just replaces imports with actual modules code - so the code is still readable and there is no overhead.