Chrome is undefined when injecting script tags from extension

Add-ons Development
#1

In Chrome, I can load my standard create-react-app javascript files and the chrome variable is still set. However, in Firefox it seems to be undefined in the scripts that are loaded:

I have a content-script that just loads other content scripts dynamically:

function addToHead(s, toload) {
    s.src = chrome.extension.getURL(toload);
    s.href = chrome.extension.getURL(toload);
    (document.head || document.documentElement).appendChild(s);
}
// React app..
var toload = ["chunk.js", "runtime.js", "main.js"];
toload.forEach(function (toload) {
    console.log("Loading js: " + toload);
    var s = document.createElement('script');
    addToHead(s, toload);
})
#2

In Firefox, you can use the keyword browser instead of chrome.

#3

chrome.extension.getURL works in the above code, so it is not that.

The issue seems to be that the “extension” context is lost when I inject a script like chunk.js in Firebox, but not in Chrome.

#5

You could try the runtime API to see whether it works any better:

https://developer.chrome.com/extensions/runtime#method-getURL

Or are you saying that the content scripts are added, and the problem is using chrome.something in the added script?

Does it work any better using executeScript()?