MB 7 Extension Reloading

When developing an extension it can be helpful to load a new version of extension code without refreshing the page. This can be done by making a few small changes to your code.

Note: If you turn on developer mode under settings, this is done automatically for you.

To start, let's use a simple demo extension.

MessageBot.registerExtension('demo', function(ex, world) {
    // Add listeners
    function listener({player, message}) {
        console.log(player.name, 'said', message)
    }
    world.onMessage.sub(listener)

    // When uninstalling remove the listener
    ex.uninstall = function() {
        world.onMessage.unsub(listener)
    }

    // Add a UI if a UI extension is loaded
    let ui = ex.bot.getExports('ui')
    if (!ui) return

    let tab = ui.addTab('Demo')
    tab.innerHTML = `<div id="demo_tab">Demo!</div>`
    ex.uninstall = function() {
        world.onMessage.unsub(listener)
        ui.removeTab(tab)
    }
})

Now, what if we only wanted to listen to admin chat? We can change the extension, reload the page, and paste the code in again, but this will get old fast. A better solution is to automatically reload the extension when it is registered. By refactoring the original code, this is possible without very much extra code.

MessageBot.registerExtension('demo', function(ex, world) {
    // Create a function which will be used to remove listeners / content from the page
    // but will not remove extension information
    let destruct = function() {
        world.onMessage.unsub(listener)
    }
    // In the uninstall function, call the destructor and remove anything from storage
    ex.uninstall = function() {
        destruct()
        // ex.storage.clear()
    }

    // Listen for this extension to be reloaded
    function onExtensionLoad(id) {
        if (id != 'demo') return
        // Remove this listener
        ex.bot.extensionRegistered.unsub(onExtensionLoad)
        // Disable completely removing this extension and only deactivate it
        ex.uninstall = destruct
        // Call the destructor
        ex.bot.removeExtension(id)
        // Load the new version of the code that was just loaded
        ex.bot.addExtension(id)
    }
    ex.bot.extensionRegistered.onExtensionLoad()

    // Add listeners
    function listener({player, message}) {
        console.log(player.name, 'said', message)
    }
    world.onMessage.sub(listener)

    // Add a UI if a UI extension is loaded
    let ui = ex.bot.getExports('ui')
    if (!ui) return

    let tab = ui.addTab('Demo')
    tab.innerHTML = `<div id="demo_tab">Demo!</div>`
    destruct = function() {
        world.onMessage.unsub(listener)
        ui.removeTab(tab)
    }
})