Creating your first app

To help you get a feel of Overwolf’s API, here’s an explanation on how to create a simple app that displays the name of the game you are currently playing. We’ll describe two different methods, one with the demo app as a base, and another working from scratch. It is best to review each method, so you can better understand the development process.

 

Using the demo app as a base

  1. Download the Developers version of Overwolf.

  2. Download the demo app,  extract it from the archive.

  3. Click on Settings (either the wrench icon on the dock, or the Settings button on the tray icon menu).

  4. Go to the Support tab, you will see a link labelled “Development Options”. Click that.

  5. Click on “Load unpacked extension” and navigate to where the demo app is located (i.e where you unpacked the archive or w/e location we install it to).

  6. Remember to only click on the folder, not the contents of the Demo app folder.

  7. Open the manifest.json file using your favorite text editor.
  8. Change the “name” field to “Game you are now playing” and the “author” to your name. Be sure to look at how this is built, as this file describes the basic aspects of your app.
    {
            "manifest_version":"1",
            "type":"WebApp",
            "meta":{
                    "name":"Demo_App",
                    "version":"1.0.0",
                    "minimum-overwolf-version":"0.77.10",
                    "author":"Developer_Name",
                    "icon":"IconMouseOver.png",
                    "icon_gray":"IconMouseNormal.png",
                    "description":"Demo App"
            },
    }
  9. Open the index.html file in your favorite text editor, and copy the following code:
    <!DOCTYPE html>
    <html>
        <head> 
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Demo app</title>
            <script>
                function dragResize(edge){
                    overwolf.windows.getCurrentWindow(function(result){
                        if (result.status=="success"){
                            overwolf.windows.dragResize(result.window.id, edge);
                        }
                    });
                };
                
                function dragMove(){
                    overwolf.windows.getCurrentWindow(function(result){
                        if (result.status=="success"){
                            overwolf.windows.dragMove(result.window.id);
                        }
                    });
                };
                
                function closeWindow(){
                    overwolf.windows.getCurrentWindow(function(result){
                        if (result.status=="success"){
                            overwolf.windows.close(result.window.id);
                        }
                    });
                };
            </script>
        </head>
    
        <body>
            <div style="width:20px; height:20px; bottom:0; right:0; position:absolute;" onmousedown="dragResize('BottomRight');"></div>
            <div id="content" onmousedown="dragMove();">
                <h1>Hello, world!</h1>
                
    You can drag from anywhere you want, and resize from bottom right corner.
                <button id="close" onclick="closeWindow();">Close</button>
            </div>
        </body>
    </html>

    Remember to save your work.

  10. You can also change the icons as you see fit. These icons are used in the Appstore and dock bank. DevIcons

Starting from scratch

  1. Create a folder, name it whatever you like.
  2. Create a file named “manifest.json” in that folder.
  3. Copy and paste the code from the Welcome to the Manifest.json section. If you scroll down to the technical explanation about the manifest.json, you can read about additional features that you can use to make your app even more awesome.
  4. Provide an icon for your app, and place it into the folder you created. Remember to reference it in the “icon” field of the manifest.json.
    "meta":{
            "name":"Demo_App",
            "version":"1.0.0",
            "minimum-overwolf-version":"0.77.10",
            "author":"Developer_Name",
            "icon":"IconMouseOver.png",
            "icon_gray":"IconMouseNormal.png",
            "description":"Demo App"
    },
  5. Create an index.html file in that folder. You can create a sub-folder, and place any of the resources your app needs in there.  Refer to this file in the “file” field of the manifest.json.
    "MainWindow":{
            "file":"Files/index.html",
            "transparent":"true",
            "resizable":"true",
            "size":{ "width":"400", "height":"300" },
            "min_size":{ "width":"200", "height":"200" },
            "max_size":{ "width":"600", "height":"800" }
    }

    From here on out you standard web development techniques to create, debug, and finish your application (doesn’t matter which way you used to create your app).