Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper

How can I avoid the following error and why do I get it?

Edit: Maybe I have to ask how I can make objects from a privileged scope visible to a less privileged scope.

My goal is to export/return dynamically created objects to the page script as a return value of a previously cloned/injected function.

manifest.json

{
    "manifest_version": 2,
    "name": "foo",
    "version": "1.0.0",
    "description": "Does something",
    "content_scripts": [
     {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
     }
    ]
}

content-script.js

function foo (obj) {
  obj.x = {"xxx": 444};
}
window.wrappedJSObject.foo = exportFunction(foo, window);

page script (can be insert in web console)

foo({"sss": 333})
// Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper

Deeper in the brwoser console I get this:

"ObjectActor.prototype.grip previewer function threw an exception: Error: Permission denied to access object
Stack: PseudoArray@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/object.js:1797:16
ObjectActor.prototype.grip@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/object.js:131:15
WCA_objectGrip@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/webconsole.js:483:12
createValueGrip@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/object.js:2187:14
WCA_createValueGrip@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/webconsole.js:429:12
WCA_onEvaluateJS@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/webconsole.js:900:21
WCA_onEvaluateJSAsync@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/actors/webconsole.js:857:20
onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/server/main.js:1743:15
ChildDebuggerTransport.prototype.receiveMessage@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/transport/transport.js:761:7
Line: 0, column: 0"

I think I did not perfectly understand the XRay behaviour, so I'm not shure if this is even possible due to the scurity mechanisms.

Trying to explain how Xray vision work in detail is not within my ability, but the problem here should be that you are creating {"xxx": 444} in a script context with other permission than the page script that is trying to access x. This means the page script won't be allowed to access this data. The solution is to create the object within the page context, this can be done with cloneInto.

content-script.js

function foo (obj) {
  obj.x = cloneInto({"xxx": 444}, obj);
}
window.wrappedJSObject.foo = exportFunction(foo, window);