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/";
}

Answer 1

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

Cross-Origin issue with getViews()

Question

background.js

my-page.html

my-page.js

1 answers

solution1
0 2016-09-08 22:53:43

Cross-Origin issue with getViews()

Question

background.js

my-page.html

my-page.js

1 answers

solution1 0 2016-09-08 22:53:43

solution1
0 2016-09-08 22:53:43