Overwolf

Overwolf

  • Getting Started
  • Docs
  • API
  • Events Status
  • Blog
  • Q&A
  • Support

›Using Windows API

Best Practices

  • Overview
  • App specific experience
  • First time user experience
  • App launch performance
  • Marketing Communications
  • User journey and error handling
  • Per-game settings
  • Hotkey best practices
  • Second monitor usage
  • Data persistence
  • Reduce OPK size
  • Use Tab as an app Hotkey
  • Type definition file
  • Download Link with referral ID
  • Video capture best practices
  • Enable Developer Tools
  • Exclusive Mode Overlay
  • Electron Migration

Using Windows API

  • Using Overwolf windows
  • Windows Communication
  • Windows Types
  • Resolution Size and Position
  • General Tips

Understanding OW logs

  • What are Overwolf logs
  • DxDiag log
  • Trace logs
  • OBS logs
  • OverwolfPerf log
  • Overlay game HTML

Using Plugins

  • Plugins overview
  • Plug-in Implementation
  • Write your own plugin
  • Sample plugin
  • Simple I/O plugin
  • TeamSpeak plugin
  • Downloader plugin
  • Process Manager plugin

Using Events

  • JavaScript events overview
  • Using game events in your app
  • Game events Simulator
  • Verifying event status

Developers Console

  • Submit a new version
  • Release notes
  • Submit for review
  • Update store listing
  • Manage your subscriptions
  • Users and permissions
  • Crash reports
  • Rating and reviews
  • App Channels
  • CLI

Integrations

  • Integrating app analytics
  • Login with Twitch
  • Login with Overwolf
  • Event SDK for Game Devs
  • Twitch Extensions

Request a Service

  • Marketing asset requirements
  • Looking for Group
  • Promoting your app
  • App recommendations

Community Help

  • Join the Community
  • Webinars
  • Developers Content
  • Code snippets

Legal

  • Legal overview
  • App terms
  • Developers terms
Edit

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.

  • Read more about background controllers.
  • Download our sample app which demonstrates all basic design principals.

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 .

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

Last updated on 12/29/2020 by James Ross
← Using Overwolf windowsWindows Types →
  • Using a background controller
  • Using direct messages
  • Communication channels using an iframe inside an Overwolf window
  • Legal
    • Terms overview
    • Developer's terms
    • App terms
    • Overwolf terms
    • Overwolf Privacy policy
  • Support
    • Questions and Answers
    • Discord
    • Slack
    • Facebook
    • Twitter
  • Documentation
    • Changelog
    • API
    • App Creation Process
    • Best Practices
    • Game Events status
  • Information
    • Careers
    • Fund
    • Developers Blog
    • Overwolf Appstore
    • Advertise on Overwolf
Overwolf 2022