Skip to main content

Communicating between windows

Over the years we had multiple methods used to communicate between Overwolf windows: localStorage events, cookies and more. But due the fact that windows of the same app share the same process, the communications between windows can be done with direct pointers to the window/DOM, without any overhead. Naturally, this also means that the calls are synchronous.

Recommended ways to communicate between app windows:

Using a background controller​

In our experience the best method for communicating between windows of the same app is using overwolf.windows.getMainWindow(). This function allows you to get direct access to your main index page and it’s HTML Window object - including any JS function or DOM element.

Using this method, you can use a shared “communication-bus” variable - one global "manager" object in your background that allows different windows to communicate through this one single object.

This object is also guaranteed to exist when calling this method from any other window - unlike overwolf.windows.getOpenWindows(). We strongly recommend not to use getOpenWindows() for windows communication.

Using direct messages​

Another option for communication between windows is the method overwolf.windows.sendMessage(). This method allows to send messages directly to a window. The window receiving the message needs to listen on the overwolf.windows.onMessageReceived event.

warning

Using sendMessage is not our best practice since it might not work on some occasions, for example, when sending extremely long messages.

Using localStorage events​

Another option for communication between windows is using localStorage events. In the Overwolf app, add an event listener for a "storage" event using the example below. The listener will fire when a localStorage event occurs regardless of the window that made the change.

window.addEventListener("storage", (event) => {
  console.log(event);
  // do something interesting with the event
});

For more information, see Window: storage event.

Communication channels using an iframe inside an Overwolf window​

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).