1394303 - Support loading background scripts as ES6 modules

Status: RESOLVED DUPLICATE of bug 1811443

(WebExtensions :: General, enhancement)

Description

[Rustam]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce:

I tried to use ES6 imports in webextension like in this article https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import . 


Actual results:

Even with dom.moduleScripts.enabled flag they are not working


Expected results:

Please add support at least with dom.moduleScripts.enabled flag

Comment 1

[Rustam]

Attachment: example.zip

Example of code that must work

Comment 2

[Rustam]

In 55th and 56th FF on win7 I am getting following error:

SyntaxError: import declarations may only appear at top level of a module

Comment 3

[Kris Maglione [:kmag]]

If you want to use ES6 modules in your background page, you need to create an HTML page and use <script type="module"> in it rather than relying on the framework to generate a background page for you.

Comment 4

[Tomislav Jovanovic :zombie]

This is probably blocked until bug 1240072 is fixed, or at least far enough along.

After that, it would be a simple matter of adding `manifest.background.module` property.

Comment 5

[flying sheep]

What’s missing for module support to be sufficiently far along?

I don’t see anything critical except for bug 1371551

Comment 6

[Tomislav Jovanovic :zombie]

Point is, even if we implement it, it will not work for most users until the pref is flipped on by default.

That said, bug 1428002 seems to be turning it on for Nightly only, which I guess means we could now land code behind the same pref.

Comment 7

[Tom S [:evilpie]]

I think we can close this, bug 1371551 is fixed. And modules are enabled by default in Firefox 60 (bug 1438139)

Comment 8

[Tom S [:evilpie]]

Oh I just noticed comment 4, we only currently support modules when using a background page, but not as a standalone JS file.

Comment 9

[ExE Boss]

If we add a `module` property to the `background` manifest key, we should also add it to the `content_scripts` key, as that also needs to support being a module, and unlike background scripts, where there’s the workaround of using a background page, there’s no currently way to load content scripts as modules.

Comment 10

[Kris Maglione [:kmag]]

This is a trivial change for background scripts. For content scripts, it would be a very large amount of work.

Comment 11

[ExE Boss]

(In reply to Tomislav Jovanovic :zombie from comment #4)
> …, it would be a simple matter of adding
> `manifest.background.module` property.

(In reply to Kris Maglione [:kmag] from comment #10)
> This is a trivial change for background scripts.

Given that modules are shipping in Firefox 60 (bug 1438139), which will be the next ESR release, and according to :kmag, this is supposed to be a trivial change, I request that after completion, this be uplifted to Firefox 60, so that those of us who develop extensions and support the ESR branch as well don’t have to have a dummy background page for the whole Firefox 60 ESR release cycle just to be able to use module scripts in background pages.

Comment 12

[Kris Maglione [:kmag]]

Sorry, but no. This is trivial enough for extensions to implement without a new feature that it doesn't meet the bar for a feature uplift.

Comment 13

[rugk]

Also stumbled upon this in https://discourse.mozilla.org/t/using-es6-modules-in-background-scripts/29911, BTW.

Comment 14

[Carlin Scott]

(In reply to Kris Maglione [:kmag] from comment #3)
> If you want to use ES6 modules in your background page, you need to create
> an HTML page and use <script type="module"> in it rather than relying on the
> framework to generate a background page for you.

I've updated the "Anatomy of an extension" MDN article with an example for using ES6 modules based on your comment.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Specifying_background_scripts

Comment 15

[Boian Berberov]

I'm trying to use this:

<!DOCTYPE html>
<html><head><meta charset='UTF-8' /><script type='module' src='background.js'></script></head></html>

...
"background": { "page": "background.html" }
...

to share a function between a background script and a page_action. The extension debugger crashes when I open the page_action.

Do we just have to replicate code for now, or is there a way this works that I don't know? Thanks.

Comment 16

[juraj.masiar]

So that's why MY debugger froze but it worked for others! Some other user complained about it here:
https://discourse.mozilla.org/t/how-is-everyone-debugging-webextension-popups-in-firefox-68/41095

You can still share modules between different contexts, just don't try to debug it (if you need to debug, open popup.html in a tab).
Also someone should create an issues for that if it wasn't reported yet.

Comment 17

[Boian Berberov]

Thanks.

I'm on FF 67 on Linux. I have two small extensions that use page_action and I've never had a problem debugging, inspector and everything. I just tried to move one function to a module, added one call in the page_action script and one in background.js. When I reload that version of the extension, the page_action does not work. Obviously debugging fails. Inlining that function makes everything work again. Using the module in page_action and inlining the function in background.js also works; with full debugging. Seems like a case you should know about, given that the documentation recommends this.

Comment 18

[Tomislav Jovanovic :zombie]

If we decide to deprecate background pages in favor of service workers, implementing this doesn't make much sense, so marking as depending on bug 1578286.

Comment 19

[Luca Greco [:rpl] [:luca] [:lgreco]]

The extensions should already be able to use JS modules in the background page without any additional changes by using the background.page manifest properties instead of using the "background.scripts" one (on the contrary there is currently no way to use JS modules for the content scripts, which is tracked by Bug 1451545).

Given that the extension can already achieve this, and that the background page may be replaced by a service worker in the future, I'm closing this as wontfix for now.

Comment 20

[flying sheep]

So bug 1451545 is already on the roadmap? Status new doesn’t imply that there’s any decision yet.

Comment 21

[Rob Wu [:robwu]]

For service worker-based extensions, module background scripts are tracked at bug 1775574.

Comment 22

[Rob Wu [:robwu]]

type: "module" enables support for ES6 modules in background.scripts -> bug 1811443.