search

create3000 / x_ite

X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.
https://create3000.github.io/x_ite/
Other
66 stars 13 forks source link

Custom elements issue with x_ite.mjs in Microsoft Edge? #159

Closed gwhitney closed 8 months ago

gwhitney commented 9 months ago

Is there a problem with x_ite.mjs in the Microsoft Edge browser? I ask because my Firefox extension is now working as mentioned in #155, and so I am trying to get it to work on Microsoft Edge as well. I put in the browser polyfill as recommended at https://github.com/mozilla/webextension-polyfill, and all of the other code of my plugin appears to work until it actually loads x_ite.mjs for the first time. At that point, it crashes with an error of Uncaught (in promise) TypeError: Cannot read properties of null (reading 'define') in this line of code:

customElements .define ("x3d-canvas", x_ite_X3DCanvasElement);

in the (bundled version of ) src/x_ite.js. Thus, it appears as if customElements was not defined, but if I just type customElements in the console on that page, it seems to have a perfectly reasonable value. So somehow maybe it's just not defined in the context in which that module is executed in my extension? I generally don't develop on Windows -- I don't even have a machine dedicated to Windows, but I can boot into Windows on my main linux computer. It's just that I got the impression porting a working Firefox extension to Edge was generally easy, so I thought I should give it a try. I thought before I started trying to dig deep into debugging in a platform I'm totally unfamiliar with I would check here if there is some general problem with using x_ite.mjs in the Microsoft Edge browser, thanks.

gwhitney commented 9 months ago

Hmm, since Edge is based on Chrome, I suppose the following might be the issue:

https://stackoverflow.com/questions/42800035/why-cant-you-create-custom-elements-in-content-scripts

since I am indeed in a content script when this error occurs. I presume that custom elements are necessary for the successful operation of x_ite.mjs? I will try one or more of the solutions on the linked StackOverflow page and report back if I get it working.

gwhitney commented 9 months ago

Yes, I can attest that in my case, loading the polyfill published on npm as @webcomponents/custom-elements before attempting to load x_ite.mjs gets it working inside an Edge extension. Probably the same issue will exist in Chrome, I expect. You may want to put a note about this somewhere in the documentation in case anyone else tries to use x_ite in a browser extension; or perhaps this issue and commentary will suffice -- I defer to your judgment. In any case, things seem to be working now.

create3000 commented 8 months ago

I'm glad you were able to resolve the matter yourself. I'll see if I can find a place for the solution in the documentation.