What is Overwolf

Overwolf is a great platform for developing apps to inject into games. It allows you to easily create applications that enrich the gaming experience, such as overlays, auto capture of replays, highlights, statistics, integration with external systems (including home automation).
Its operation, from the outside, is quite simple: our HTML apps are injected through the CEF (Chromium Embedded Framework) and communicate with the games through the GEP (Game Events Provider).
Each game implements its Overwolf events via GEP, some defined by the game developers themselves, some served by Overwolf through various methodologies.

Hey, cowboy, wait!

To start developing your app, you need before to get whitelisted from Overwolf: it means your Overwolf user is recognized as developer and you’ll can load unpacked apps (apps not yet published on the store) from Developer Tools.

Click on “Load unpacked extension” to load your code not yet published

The anatomy of an Overwolf app

Our app can contain different “windows”, HTML pages (or React components) called by Overwolf and injected in separate windows.
Each window must be declared inside the manifest.json(docs: https://overwolf.github.io/docs/api/manifest-json).

The manifest.json

Inside this file most of the behaviors and configurations of the application are described.
For example:
- Define which games you target
- Define which events you want to receive and for which games
- Windows and their configurations
- Uploaded plugins
- Developer configurations
- Hotkeys

The background window

All apps should have at least one background window, which is essential to control other windows and share data among them.
A background window is a transparent window, without interface, which is explicitly declared as is_background_pagein manifest.json. Overwolf will always open that window, as the first window (a kind of start window).

Communication between windows

The windows of your app can communicate with each other. How? There are several techniques, it also depends on which framework you are using.
In React there is Redux (and its store\actions\reducers), a famous package that allows state management within a React app.

EventBus module definition
window.eventBus = EventBus;
window.eventBus.trigger(Events.FIRST_STEAMID_UPDATE, {});
let background = overwolf.windows.getMainWindow();
this.eventBus = background.eventBus;
addListenerToEventBus(eventName, callback) {
this.eventBus.addListener(eventName, callback);
}
this.addListenerToEventBus(Events.GAME_SESSION_STATS_UPDATE, this.updateGameStats.bind(this));

App state, user settings, remote data

Your app runs in a browser, basically: so to save data, be it configurations, user settings, persistent data to be used at various times, you can use the techniques used by a web app:
- the localstorage
- the IndexedDb
- Your remote API

Debugging

A developer knows that his most valuable weapon is the debugger.
To debug an Overwolf app during development, use the Developer Tools built into the CEF (the same as a Chrome Browser) or the logs written via console.log

Click on window name to open the developer tools targeting the given page

Hot reload

When you are in the middle of the development, hot reload is definitely a great ally.
You can define which files to control so that the app is reloaded with each change by pointing to their extension (.js, .jsx, ,.css etc etc).

C# Plugins

In some cases you will need functionality and operations that can not be performed by javascript: operations on the operating system, changes to the registry, special operations on the physical files of the user’s computer, process management etc etc..

Wrap up!

This tutorial is definitely not exhaustive and you may encounter other problems during the development of your app but it can be a good starting point to help you set it up and have some reference points to the Overwolf documentation (which is very extensive and very detailed).

Developer since 90s, dad of a little beautiful monster, creator of Trucky — The Virtual Trucker Companion app — https://truckyapp.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store