How to create a communication channel with an iframe inside my Overwolf window?

General Questions
1

Do you have any best practice, for developers that want to wrap their web app / webpage with an overwolf window? I’m using an iframe to do that, but I don’t have an access to the Overwolf JavaScript object from my iframe.

2

The recommended way to access the overwolf object from an online web page loaded inside an iframe is to set up a communication channel using the postMessage method.

To do so:

Allow your app to load and communicate with your domain via externally_connectable configuration in the manifest.

Your web page should post a message to the parent window (the Overwolf app) containing the page.

In the Overwolf app add an event listener for “message” event and validate the origin of the message:


window.addEventListener("message", message => {
	if (message.origin !== "https://yourdomain.gg") {
	return;
	}

	let data = message.data;
	if (!data) {
	return;
	}

	// do something interesting with the data
});

Make sure to handle cases where the iframe may not load or when an error may prevent setting the communication channel

(a fallback or retry mechanism)