I’ve developed extension using Angular which works well on Chrome but, doesn’t work on Firefox. Since firefox works differently compared to chrome as mentioned here https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Sharing_objects_with_page_scripts. I’m unable to figure out where to make these changes to work.
Now, when I run my extension it throws error “Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper”
Error stack show’s as below In polyfills.bundle.js.
// hook global Reflect
(function (__global) {
console.log('label', window.wrappedJSObject);
if (typeof __global.Reflect !== "undefined") {
if (__global.Reflect !== Reflect) {
for (var p in Reflect) {
__global.Reflect[p] = Reflect[p];
}
}
}
else {
__global.Reflect = Reflect;
}
})(typeof window !== "undefined" ? window :
typeof WorkerGlobalScope !== "undefined" ? self :
typeof global !== "undefined" ? global :
Function("return this;")());
})(Reflect || (Reflect = {}))
manifest.json as follows
{
"applications": {
"gecko": {
"id": "some@email.com"
}
},
"manifest_version": 2,
"name": "Extension name",
"version": "2.5.1822",
"description": "",
"icons": {
"16": "assets/icon/icon16.png",
"32": "assets/icon/icon32.png",
"48": "assets/icon/icon48.png",
"128": "assets/icon/icon128.png"
},
"permissions": [
"*://*/*",
"browsingData",
"cookies",
"storage",
"tabs",
"webRequest",
"webRequestBlocking"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",
"web_accessible_resources": ["*"],
"background": {
"scripts": ["content-script.js"]
},
"browser_action": {
"default_title": "Some Player"
}
}
content-script.js as follows
async function register() {
return await browser.contentScripts.register({
allFrames: true,
js: [
{
file: 'polyfills.bundle.js'
},
{
file: 'vendor.bundle.js'
},
{
file: 'main.bundle.js'
},
{
file: 'libraries.bundle.js'
}
],
css: [{
file: 'styles.bundle.css'
}],
"matches": ["*://*/*"],
"allFrames": true,
"runAt": "document_start"
});
}
var registered = register();