Skip to main content

Communicating between windows

There are multiple methods of communicating between Overwolf windows. Communicating between windows is performed using direct pointers to the window/DOM and has little to no effect on app performance and are synchronous.

Download our sample app which demonstrates the recommended windows communication methods.

Recommended ways to communicate between app windows:

Using a background controller​

Overwolf recommends using overwolf.windows.getMainWindow() for communicating between windows of the same app. This function allows you to get direct access to your main index page and it’s HTML Window object. You will also have direct access to any JS function or DOM element.

Using this method, you can use a shared communication-bus variable. This is a global manager object that you use in the background and allows different windows to communicate through it.

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

Using direct messages​

You can use the overwolf.windows.sendMessage() method to send messages directly to a window. The window receiving the message needs to listen for the overwolf.windows.onMessageReceived event.

warning

Using sendMessage may not be suitable for all messages (e.g. when sending extremely long messages).

Using localStorage events​

You can use localStorage events for communication between windows in an Overwolf app. You will need to add an event listener for a storage event. The listener will fire when a localStorage event occurs regardless of the window that made the change.

Example localStorage event listener:

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.

Allow your app to load and communicate with your chosen domain via the externally_connectable key in the manifest.json.

The selected web page should post a message to the parent window (the Overwolf app) containing the page. In your Overwolf app add an event listener for message event and validate the origin of the message.

Example event listener:

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