Summary:

Assuming extension and child page, a child page has no idea who loaded it and the extension can't know when the child page has loaded. Therefore, it's not possible to create a postMessage between the two reliably because an extension will never have the same domain as a child page.

Details:

I have an extension that must work cross-browser. The extension has a button that opens another page window.open('https://subdomain.mydomain.com). That page opens in a new tab. Unfortunately, because an extension doesn't have a domain, the browser treats the webpage and the extension as different domains which means I don't have access to most of the APIs because of cross domain protections.

Attempts:

window.referrer is an empty string on the child page.

window.opener only works in chrome but not in firefox.

window.postMessage('test message', 'chrome-extension://my-id'); This doesn't work on the child page and I dont know why since the target would only be to the extension.

window.postMessage('test message','*'); This also doesn't get the message back to the extension even though origin is not specified and should send it to everywhere.

externally_connectable being added to the manifest. This doesn't work because Firefox doesn't yet have it implimented.

Possible Solution:

The only way I can think of doing it is to have the parent open the child page and then do a pinging type of message like (edited)

const w = window.open('https://sub.mydomain.com');
setInterval(() => {
  w.postMessage('test message', 'https://sub.mydomain.com');
}, 1000);

On the child you would have a message listener like

window.addEventListener('message', (event) => {
    event.source.postMessage('message back to ext', event.origin);
});

I believe at that time, you can use the event to message back to the parent page. However, Firefox garbage collects the window variable before the set interval can start and therefore, we never send a message.

Question:

Has anyone come up with a good solution to this problem yet?