Creating our tab - WazeDev/WazeDev.github.io GitHub Wiki

Now that we have our script loading it is time to create a tab for our settings.

To accomplish our tab creation we will load a utility script called WazeWrap which we will do by adding the below @require line to our header

// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js

Our header will now look like:

// ==UserScript==
// @name         WazeDev First Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Learning to script!
// @author       You
// @include      https://beta.waze.com/*
// @include      https://www.waze.com/forum/*
// @include      https://www.waze.com/editor*
// @include      https://www.waze.com/*/editor*
// @exclude      https://www.waze.com/user/editor*
// @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// @grant        none
// ==/UserScript==

WazeWrap will allow us to do several things with much less code, such as create a tab for our script. This can be hand coded, as many scripts do, but when it is possible to use a library to accomplish such things it is beneficial to save the time and gain the additional functionality. The tab creation functionality in WazeWrap makes adding the tab much easier, but it also allows our script to gracefully handle changing WME units and changing to/from Event Mode. This is important because when you change either of these things, the side panel gets re-created and we would then have to manually code to re-load the tab and re-set the script settings in the tab.

Lets modify our init method to look like the following and create an empty initializeSettings method, which we will utilize later.

function init()
    {
        var $section = $("<div>");
        $section.html([
            '<div>',
            '<h2>Our First Script!</h2>',
            '</div>'
        ].join(' '));

        new WazeWrap.Interface.Tab('WazeDev', $section.html(), initializeSettings);
    }

    function initializeSettings()
    {
    }

This will set up a variable we can use to define the html for our tab and use WazeWrap to create the tab with our HTML. There are multiple ways to define the HTML for the page - you are not locked into doing it the same as the above example, it is just a way to define the tab html.

Here we create our tab page with a div and the header "Our First Script!". Next we define a new WazeWrap.Interface.Tab and pass it the necessary values. First, the name to display for our tab. Second, the HTML for our tab. The third parameter (initializeSettings in our example) is a callback method that will be called when the tab has been created and added to the side panel. This callback should be used to set the script's tab settings and add event handlers to the settings controls so you can toggle settings in real-time as the user enables/disables them.

With this change to use the WazeWrap library, we need to modify our bootstrap to check that WazeWrap is loaded. If we do not do this, our script could load and attempt to create the tab before WazeWrap has loaded and then it will throw an exception. In order to check if WazeWrap is loaded we check its Ready property: WazeWrap.Ready. Our bootstrap should now look like this:

function bootstrap(tries = 1) {
        if (W && W.map &&
            W.model && W.loginManager.user &&
            $ && WazeWrap.Ready) {
            init();
        } else if (tries < 1000)
            setTimeout(function () {bootstrap(++tries);}, 200);
    }

Your tab should look like the following:

In the next section we will start interacting with the Waze object and display some data in our tab.

⚠️ **GitHub.com Fallback** ⚠️