What is a cross-origin object error in a content script?

Add-ons Development
#1

I’m likely overlooking something obvious but am having trouble getting my content script to work in the web page.

I experimented some time ago adding content to empty HTML containers stored locally; and it all worked fine. The content scripts requested HTML content from the background script, and CSS was inserted and a script added through tabs.executeScript. Then, knowing that it could be done, I focused on building out that content.

Now that my HTML and scripts are more complex something isn’t working. The first container works fine, and through user action in that page a second container is opened in a new tab and more complex content is added to it.

The HTML and CSS load but I get a cross-origin object error of Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper. And it is at a line of JS code that assigns an array to an object property held in RAM.

There is no page script and the content script is not using any special APIs. I’m not attempting to use anything related to XrayWrapper.

The script fails after initializing some variables, opening an existing database, and populating that page with that stored data of last state. A portion of that data is held in RAM and it seems to fail at the first attempt at modifying that data.

Would you please let me know what I am missing?

Thank you.

#2

What exactly is your content script doing?

#3

It’s a big script, over 35,000 lines that runs a large one-page application.

It works outside of the extension. I was trying to “serve” it to the empty local HTML containers through the extension. The HTML, CSS, and JS appear to have loaded, according to what I observe and the tabs.executeScript succeeds.

At the point of that error, it created a database, populated it with some initial mapping data, and then executed a set of separate promises that extract data to populate each of the tabs (not browser tabs) in the tabbed layout. It threw the error at a statement of object.prop=[value,null].

It keeps executing after that error message, but completely fails when extracting data for the second tab. It extracts the data successfully, but fails in validation of it. There is a statement of if ( result && result.prop && result.prop instanceof Array ). If I write those value to the console of the page, result is an object with property prop and result.prop is displayed as an empty array, Array [] in the console. However, result.prop instanceof Array returns false, which results in my validation checks throwing an error message because the data map is missing from the database.

I don’t mean to be confusing. I’m not sure yet what the cross-origin object error does to the functionality of the page because it won’t load the tabs for interaction without a valid map in the database. I’ve yet to figure out why an array is not an instance of array, although when the exact same code is run locally outside the extension it works and an array is an instance of array.

Thank you.

#4

Not sure that really sheds enough light. But if you want to create objects that page scripts can access, you’ll have to read into

essentially, all objects the content script creates belong to it and can’t be read by the page.

Edit: oh, also:

#5

Thank you. I’ll try replacing the instanceof with Array.isArray().

[ This part worked, thanks. Does the content script run under something different than the page script, that would result in instanceof returning true when it’s a page script but not when a content script? ]

I read that document before and again this morning, but I don’t have a page script. I put all the JS code in the content script. So, I think I don’t need to share objects.

The content script is mostly just a means of accepting user input and storing it in indexedDB and retrieving and displaying it. The database is connected to the page, and from that data the content script builds document fragments and adds them to the page DOM. And the user adds DOM elements through button interaction and context menus.

The content script makes all the database requests. Is that a sharing issue?

Now that the tabs are displayed and populated, I can see that the cross-origin error takes place any time I attempt to alter the value of an object held in RAM. But those are created in the content script, except for the fact that they may often times be pointing to the result of a database get request. Perhaps, the database result object is owned by the page and not the content script.

But it’s odd in that the content script can use the database result object to build the DOM elements for display but cannot alter their values.

The window.wrappedJSObject doesn’t sound so good, considering the note

Note that once you do this, you can no longer rely on any of this object’s properties or functions being, or doing, what you expect. Any of them, even setters and getters, could have been redefined by untrusted code.

Perhaps, they can be copied in the content script after extraction, but that would use more RAM.

After all of this, I don’t think my idea of using local HTML files databases is any good. It has too many problems that are out of programmatic control. It seems that either the extension’s database must be used or an external database. My goal is to not require the user to install a local server.

Thank you.