Open Bug 1536094 Opened 9 months ago Updated 2 months ago

Dynamic module import doesn't work in webextension content scripts

Categories

(WebExtensions :: General, enhancement, P3)

enhancement

Tracking

(firefox67 affected)

Tracking Status
firefox67 --- affected

People

(Reporter: jonco, Unassigned)

References

(Depends on 1 open bug)

Details

Attachments

(1 file)

From bug 1517546 comment 6:

Hi, maybe I'm doing something wrong, but I'm not able to import a module in a webextension content script via the dynamic import. I also tried this version which works in chrome: https://github.com/otiai10/chrome-extension-es6-import

By trying it myself I got the following errors:
Error: TelemetryStopwatch: key "WEBEXT_CONTENT_SCRIPT_INJECTION_MS" was already initialized ExtensionTelemetry.jsm:106:31
Error: TelemetryStopwatch: key "WEBEXT_CONTENT_SCRIPT_INJECTION_MS_BY_ADDONID" was already initialized ExtensionTelemetry.jsm:110:41
Error: TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "WEBEXT_CONTENT_SCRIPT_INJECTION_MS", key: "" ExtensionTelemetry.jsm:106:31
Error: TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "WEBEXT_CONTENT_SCRIPT_INJECTION_MS_BY_ADDONID"

However the provided add-on above does not produce any errors, but still doesn't log anything to the console.

Firefox Developer Edition 66.0b14 (64-Bit), Linux with enabled javascript.options.dynamicImport pref;

Priority: -- → P3

It would be great if this bug could be fixed, since there is currently no other method to use ES6 modules in content scripts (in contrast to background scripts, option pages etc.).

In addition dynamic import would serve as a good workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1451545

I've attached a simple extension in order to better test the problem.

While the previous Firefox version did not output any errors Firefox 67.0b1 now outputs the following error message:

Error: No ScriptLoader found for the current context
Type: defect → enhancement
Component: DOM: Core & HTML → General
Product: Core → WebExtensions
Summary: Problem with dynamic module import in web extension → Dynamic module import doesn't work in webextension content scripts

This doesn't work with background scripts either. All one gets is

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

This bug has made its way on to StackOverflow.

Our bundling tool implements code-splitting and uses dynamic imports for that. Works great in Chrome, but no way to adapt for Firefox.

For background script, you can use a background page file, then use <script type=module> in it.

But there is no way to use ES Modules for content script. Using static import will throw, dynamic import will throw "No ScriptLoader found for the current context"

Depends on: 1587336
You need to log in before you can comment on or make changes to this bug.