Extension works Chrome on but doesn't work on firefox due to [Object] or [Array] XrayWrapper error

[d.sai535]

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();