Creation

Creating a theme or plugin

Manifest Format

Every theme or plugin requires a manifest.

{
    "name": "name", // The name of your theme or plugin
    "author": "author", // Your name, preferably on github
    "version": "x.x.x", // Your theme or plugin's version in this format
    "description": "description", // Your theme or plugin's description
    "url": "https://github.com/babeuh/betterteams", // A link to your theme or plugin's repo
    "type": "css" | "sass" | "dev" // Your theme's type. This is only for themes. Dev recompiles your theme on each load.
    "mainFile": "css/main.css", // Path from this folder to your theme or plugin
}

Plugin Format

const BetterTeamsPlugin = require("../../../src/outlet/plugins/plugin");

module.exports = class Plugin extends BetterTeamsPlugin {
    loadPlugin() {
        //your code here
    }
    unloadPlugin() {
        //code to unload your plugin
    }
}

Regular Node.js modules (like fs) can currently be used in plugins.

Plugin Injector API

An example:

...
loadPlugin() {
    /*
    this.injector.scope("head");
    This returns an object: {
        get: (scopeKey: string) => any,
        set: (scopeKey: string, scopeValue: any) => void
    }
    */

    const fullscreenCtrl = this.injector.scope("head").get("fullscreenCtrl"); // This fetches the fullscreenCtrl from the scope of the head element
    fullscreenCtrl.toggleFullscreen();
    
    this.injector.scope("head").set("examplePluginText", "Hello World!"); // This sets examplePluginText on the scope of the head element
    console.log(this.injector.scope("head").get("examplePluginText")); // Logs "Hello World!"

}


unloadPlugin() {
    this.injector.uninjectAll(); // This removes any modifications we did to scopes
    /*
    Sometimes you might want to uninject one element at a time, in this case you can use
    this.injector.uninject(elementSelector)
    */
}
...