Cross-Origin issue with getViews()

Question

I have been working in my free time to create a Firefox WebExtensions based add-on that essentially reads the page, opens a local HTML, submits a form on the HTML page to navigate to a new URL but I am running into issues with chrome.extension.getViews() once my opened page changes URLs.

If I reuse getViews() I receive the following error:

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

I tracked this down and find it happens once my local HTML navigates away. How should I be interacting with my opened web page to get around this issue?

Below is a small recreation I hacked together with timeouts (not my actual project, just to show the problem):

background.js

var views;

function openMyPage() {
  console.log("injecting");
    chrome.tabs.create({
        url: chrome.extension.getURL("content_scripts/my-page.html"),
        active: false
    }, function(tab) {
        chrome.windows.create({
            tabId: tab.id, 
            type: "normal",
            state: "maximized"
        }, function(window) {
            setTimeout(function(){
                views = chrome.extension.getViews();
                for(var i = 0; i < views.length; i++)
                    console.log("window location: " + views[i].location + " view id: " + i);
                views[1].example();
                setTimeout(function(){
                    for(var i = 0; i < views.length; i++)
                        console.log("window location: "+views[i].location+" view id: " + i);
                }, 5000);
            }, 2000);

        }); 
    });
}

chrome.browserAction.onClicked.addListener(openMyPage);

my-page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="my-page.js"></script>
  </head>
<body>
  <h1>It's my page!</h1>
</body>
</html>

my-page.js

console.log("loaded in my-page");

function example() {
    document.location.href = "https://www.google.com/";
}

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

As you found out, the window object you were provided is no longer valid once you navigate away from the page that the window object conained. The window object was valid while the window you opened was displaying the same page as it was when you made the call to extension.getViews(). It became invalid as soon as you navigated away from that page. The old window object would have been invalid, even if you had navigated to another page within your extension, because a new window object would have been created for the new page. However, if the new page was from within your extension, you would have been able to obtain a new window object with a new call to extension.getViews().

Once you navigate away from a page that is from within your extension, extension.getViews() will no longer find the window object for the popup/tab.

Once you navigate away from the URL which is to a page within your own extension, you should be interacting with the page the same way you would with any other content: with a content script.

extension.getViews() will get window objects for:

Returns an array of the Window objects for each of the pages running inside the current extension. This includes, for example:

the background page, if one is defined

any popup pages, if defined and loaded

any options pages, if defined and loaded

any browser tabs that host content packaged with the add-on

I guess I understand the reason it fails but does it make sense `extension.getViews()` becomes completely broken as soon as an extension page navigates away? I found I couldn't utilize content scripts with my local HTML pages so I opted to this. I'll probably rework things to inject the form into the current web page and go from there. — Fiji, Sep 09 '16 at 17:02

Cross-Origin issue with getViews()

background.js

my-page.html

my-page.js

1 Answers1