Making a Plugin

Want to make a plugin of your own? Here's a quick tutorial on how to make some custom plugins for Discord. If you can improve this tutorial please add it by clicking the pencil on top.

Template

Don't care about the tutorial and you are ready to start? Check out the template below and the Plugin API.

Tutorial

Time to make a new plugin

  • First thing first you will need to have some knowledge of Javascript without it you will not be able to make a plugin.
  • Now heead on over to the Plugins directory
    Windows: %appdata%\betterdiscord\plugins\
    Mac: ~/Library/Preferences/BetterDiscord/plugins/
  • Make a file called MyPlugin.plugin.css
  • Open the file we just made with a text editor (not notepad) and insert this on the first line
    //META{"name":"MyPlugin"}*//
    Tip: Spaces in the title should use _ instead of an actual space to fix any future problems.
  • When you reload Discord go to plugins in the BetterDiscord settings and you should see... nothing?
    MyPlugin in BetterDiscord settings
  • This is because the meta tag works differently for plugins it doesn't work the same as a themes meta tag we have to do more work to get our plugin to show.
  • Open the plugin file we created and insert this below the meta tag.
    var MyPlugin = function () {};
    
    MyPlugin.prototype.start = function () {
    
    };
    
    MyPlugin.prototype.load = function () {
    
    };
    
    MyPlugin.prototype.unload = function () {}
    ;
    
    MyPlugin.prototype.stop = function () {
    
    };
    
    MyPlugin.prototype.onMessage = function () {
    //called when a message is received
    };
    
    MyPlugin.prototype.onSwitch = function () {
    //called when a server or channel is switched
    };
    
    MyPlugin.prototype.observer = function (e) {
    //raw MutationObserver event for each mutation
    };
    
    MyPlugin.prototype.getSettingsPanel = function () {
    return "Settings Panel";
    };
    
    MyPlugin.prototype.getName = function () {
    return "My Plugin";
    };
    
    MyPlugin.prototype.getDescription = function () {
    return "This is the Description";
    };
    
    MyPlugin.prototype.getVersion = function () {
    return "0.1.0";
    };
    
    MyPlugin.prototype.getAuthor = function () {
    return "Omniscient";
    };
  • Finally save the file and head back to Discord and restart it and you will see your plugin in the settings!
  • How do you make it do "things"? Click here to learn the BetterDiscords plugin api.

    Details

    • Plugins are limited to one file.
      • There can be multiple files in the BetterDiscord plugins directory, but to prevent junk and prevent future collisions, it is best practice to include your entire plugin within one .js file.
    • Discord isn't just a browser
      • Discord is node.js and chromium as one. BetterDiscord plugins can use all native node.js functions and modules. It is possible to include pure js node modules within your plugin using webpack. Any modules that require compilation and/or do not have pure js alternatives will of course not work.
    • Plugins are susceptible to throttling.
      • By default, Discord will throttle plugins when Discord is minimized. Currently there are no in-plugin workarounds to fix this. Throttling is the same as chromium, functions like setInterval and setTimeout will be throttled to at least 1000ms
    • Add namespaces to your events.
      • When creating selectors like $(document).on('dblclick'), instead use a namespace such as $(document).on('dblclick.dce') in order to easily unload the event with $(document).off("dblclick.dce") without unloading all dblclick events.