I am using Parcel to bundle my content script code, I also have material-components-web library in manifest’s content-scripts/js. From the content script code that I bundle using Parcel I am trying to use window’s global variable mdc provided by material-components-web library in code using export const mdc = (<any> window).mdc; in file1.ts and then I import that mdc in file2.ts but this imported entity is undefined in Firefox browser but no such error occurs on Google Chrome or Brave browser. Can you guide me as to why this is happening as my manifest is correct, if it would have been wrong it should also have not worked in chrome. I feel it is something to do with firefox browser not loading the javascript material components file. Can you guide me on how to resolve this error?
The reason is likely how the window global works in content scripts. Have you tried accessing it directly in the global scope?
You can find some details on how the window global in content scripts works at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
I think even if mdc sets the property directly on the window global in tis context it should be shared with your other content scripts.
The content script documentation also warns about
In the Web console that shows up by pressing Ctrl+Shift+K, I tried checking window.mdc but it was undefined, so I feel before using window.wrappedJSObject.mdc as mentioned on the link you shared above, I need to make sure window.mdc is not undefined. window.wrappedJSObject is also undefined in global scope. Can you suggest some other reason why even the mdc might be undefined in the global scope?
Yesterday when I posted, I couldn’t see the extension name/folder with files in the debugger, but today I was trying different things, and now it shows the folder with some files. I can see the source typescript files that I bundle using Parcel. Maybe this is due to Firefox using the source maps. But still, I can’t see Material web components or other js libraries like Sentry that I have mentioned in content-scripts/js of the manifest file in the debugger. It is strange to observe that I also have jquery library mentioned in content-script/js in the manifest, but that is not undefined in the global scope(checked using Ctrl+Shift+K console), and I can use it in Typescript files for the content script as well. I am not even using window.wrappedJSObject to access jquery.
That would sound correct, since the content script defines it in its local window (which should be shared with other content scripts), but not in the window of the page context. For the normal web dev tools to see the mdc variable, you’d have to export it as described in that one wiki page. However, you shouldn’t need that just to make it accessible to another content script. That wiki page is about the boundary between the page context and content scripts.
When handling content script issues, make sure to check also Browser console (Ctrl + Shift + J), some errors are printed only there.
Anyway, I’m a bit confused. There is no dynamic script loading for content scripts, right? So all your script files must be present inside your content script file, bundled together by Parcel.
As you mentioned that wiki page is about boundary between the page context and content scripts and both the parceled content script and material-components-web library reside in a common local window, window.mdc should work fine but it is resulting in undefined. I don’t know why this is happening. Can you suggest some other ways to find a solution to this issue?
Thank You for your help!
No, some of the libraries I am using by importing from the window variable where as some of the libraries I am using by bundling with the parcel. I am unable to use material web components library by bundling with parcel because of some other issue, so I wish to use the mdc library using a sibling library defined in manifest’s content-scripts/js so that I can use it by window.mdc. This is working fine in Chrome but is giving undefined in Firefox.
So you are injecting multiple content scripts into same page and some of them defines global properties on the window, right?
I’m still unsure how the “window” works in the content script, for example recently I’ve been solving strange bug where window.encodeURIComponent would fail in content script but using encodeURIComponent would work just fine.
But properties created by your own scripts should be visible across all your scripts.
Also I would like to mention it again - the dynamic script loading doesn’t work in Firefox in content scripts (but I’m pretty sure it does in Chrome content scripts)
So if your bundler is using it, it won’t work.