Chrome Extension: Display Sandbox Page in SidePanel And Send/Receive Messages?

Question

Question:

Has anyone figured out how to display a sandboxed page in the Chrome side panel and send/receive messages from/to it? Communication with sandboxed pages can only be done with window.postMessage(), and I don't know how to get the sidePanel's window.

Details

• I can easily set a sandboxed page to display in the side panel
• I can't figure out how to send/receive messages to/from it

The sandbox "page" examples chrome provides only show how to insert an <iframe/>. The <iframe/> is not displayed and only returns a string; I want mine to display.

• Communication is done via window.postMessage, but I don't know how to get hold of the side panel's window.

Is it the same window as the tab that it's displayed in?

Janky, Crummy Implementation

Following the examples as close as I can, I created a sidePanel.html page that contains an <iframe/> with the src set to my sandbox.html file. I've set the height and width to 100%, and it works: the iFrame takes up the whole side panel and renders just fine. Now, I could set up a communication interchange between the sidePanel.html and the <iframe/> by grabbing the <iframe/>'s currentWindow and sending the message like so:

... document.getElementById('theFrame').contentWindow.postMessage(message, '*');

and receiving it in the sandboxed page with:

// Set up message event handler:
      window.addEventListener('message', function (event) {
        const command = event.data.command;

... 

event.source.postMessage({ result: result }, event.origin);

But this isn't ideal and makes me think that I'm doing something wrong.

Is this really the way sandbox pages that send/receive messages work in a side panel? Put it in an <iframe/> just because I can't get access to the <iframe>'s window object?