compatibility issue with Firefox extension system

[Grant]

Hey there,

I built an extension for organizing subscriptions on Youtube. One of the customization functions within it uses the Iro.js library. I would like to say, this extension is spectacularly simple to use, so thank you!

However, I'm attempting to port my extension (originally developed for Chromium) to Firefox. After some debugging, I found that window.iro was left undefined, so I do not have access to create a color picker module within Firefox with my setup.

I currently have iro.min.js v5.3.2 deployed as a content file with my extension. This should allow it to be loaded alongside my main extension script. This works perfectly on Chromium browsers, but not Firefox, as described above.

[Chris]

Hi,
I don't know if this problem correlates but I have an issue with the circular picker on firefoy too. Everything is fine except the iro.ui.Wheel module

in a modal windows it looks like this:

[James]

@Gmanicus iro.js seems to be working fine for me in Firefox when included in a webpage (just checked this codepen: https://codepen.io/rakujira/pen/WZOeNq?editors=0010), could you check that too?

There shouldn't be any difference to how its code is executed in a plugin context, so I'm thinking this is likely some Firefox plugin-specific thing that's blocking access to the window object or something like that. I don't know anything about plugin development personally, are you able to do some further digging there?

@Christian-Me I think that's a different thing entirely, please could you open a separate issue for that so it's easier to track/discuss?

[Grant]

@jaames It works fine for me as well in that codepen. In your JS example, you are referencing iro.ColorPicker to create the color picker module. I unfortunately can't import the library or have it included by placing a link to the script within the HTML of Youtube from an extension. I have to reference it via window.iro.ColorPicker after having the browser load the minified iro.js script alongside my main script. I think that's where the problem lies.

I think you may be right about that. I'll do some digging and report back what I can find.

[Grant]

Solved!

To fix this issue, I had to change the order of the content scripts within the manifest file. The order does matter, as the browser will load them sequentially, so place the exports before the scripts that import them:

"content_scripts": [
    {
      "matches": ["www.google.com"],
      "js": ["iro.min.js", "content.js"],
      "css": ["tabs.css"]
    }
  ]

Now, the latter scripts will automatically be able to access anything exported by the former. As such, I can now access the color picker by simply doing: iro.ColorPicker instead of window.iro.ColorPicker.

Now, why was window.iro not being set? Firefox says this:

However, content scripts get a "clean" view of the DOM. This means:

• Content scripts cannot see JavaScript variables defined by page scripts.
• If a page script redefines a built-in DOM property, the content script sees the original version of the property, not the redefined version.

So, even though iro.js was being loaded as a content script, my other content scripts would not be able to see iro.js' changes to the window DOM property.