Hi everyone,
I use webpack to build my MV3 extension, and I use es6 import in my source code, the built extension works on Chrome and Edge, but not on Firefox.
It throws the error that my functions are undefined, after debugging, I find all my imported modules are undefined, like the TranslateModal class in the screenshot below
Are you loading your scripts as modules? The export/import syntax works only in modules.
Especially the background script: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Background_scripts#implementing_background_scripts
Also there is a bug for content scripts when using MV3:
EDIT:
Note that the debugger in Firefox is sometimes bugged too and doesn’t correctly say the value of the hovered variable/expression. It’s best to use console.log to verify (or write the variable into the console manually during the debugging, but again, it may not work if the variable is “out of scope”).
Append .js to TranslateModal
Check the console for errors.
When I import TranslateModal without .js, the console shows:
Loading script with URI “moz-extension://7ef0701e-0a1c-4722-b85e-33509cc06f04/TranslateModal” was blocked because the file extension is not allowed. _generated_background_page.html
Loading failed for the module with source “moz-extension://7ef0701e-0a1c-4722-b85e-33509cc06f04/TranslateModal”. _generated_background_page.html:5:106
Firefox should probably show an error in
about:debugging#/runtime/this-firefox
Maybe report that as a feature request on https://bugzilla.mozilla.org/
Thanks juraj and hans
Yeah, the debugger doesn’t show the correct runtime value, console.log shows the modules are actually correct, it is not webpack issue.
My problem is exactly the same as this one https://stackoverflow.com/questions/53874946/web-components-not-working-for-firefox-extension
Also found someone already asked similar question before How to use webcomponents/custom elements?
Do we have any good solutions now?
Thanks!
I was so exciting when I first saw the Web Components, I’ve build one right away and… and then I found out it doesn’t work in content scripts 
.
Anyway, this is not exactly my area of expertise so I can’t tell.
All I can say is to make sure to vote for the bug:
I’m not aware of a good solution for using custom elements in content scripts.
Custom elements in content scripts are tricky because of the world boundary. Browser vendors have discussed this issue in the WECG but at the moment there isn’t an obvious path forward for how custom elements should behave across world boundaries.
In order to provide guidance, it would really help if you could share a minimal demo and reproduction steps that show the problem.
Thanks a lot @juraj.masiar and @dotproto, this seems a long existing issue.
Here is a very simple reproduce.
webcomponent-repro.zip (7.2 KB)
Reproduce steps:
The error is: except for the constructor and connectedCallback, the other methods in custom element class are undefined.
My error is not the same as that Permission Denied bugzilla bug, but I guess they are still the same issue https://github.com/w3c/webextensions/issues/210
Thanks a lot!
Thanks @thusimon. This was really helpful to get a better sense of what was going on. It looks like Firefox isn’t exposing methods of custom elements in content scripts. I’ve opened a bug report for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1871628.
