owo-vencord/docs/2_PLUGINS.md

Plugins Guide

Welcome to Megu's Plugin Guide! In this file, you will learn about how to write your own plugin!

You don't need to run pnpm build every time you make a change. Instead, use pnpm watch - this will auto-compile Vencord whenever you make a change. If using code patches (recommended), you will need to CTRL+R to load the changes.

Plugin Entrypoint

1. Create a folder in src/plugins/ with the name of your plugin. For example, src/plugins/epicPlugin/ - All of your plugin files will go here.

2. Create a file in that folder called index.ts

3. In index.ts, copy-paste the following template code:

import definePlugin from "../../utils/types";

export default definePlugin({
    name: "Epic Plugin",
    description: "This plugin is absolutely epic",
    authors: [
        {
            id: "your discord user id goes here",
            name: "Your Name",
        },
    ],
    patches: [],
    // Delete these two below if you are only using code patches
    start() {},
    stop() {},
});

Change the name, description, and authors to your own information.

How Plugins Work In Vencord

Vencord uses a different way of making mods than you're used to. Instead of monkeypatching webpack, we directly modify the code before Discord loads it.

This is significantly more efficient than monkeypatching webpack, and is surprisingly easy, but it may be confusing at first.

Making your patch

For an in-depth guide into patching code, see CONTRIBUTING.md

in the index.ts file we made earlier, you'll see a patches array.

You'll see examples of how patches are used in all the existing plugins, and it'll be easier to understand by looking at those examples, so do that first, and then return here!

For a good example of a plugin using code patches AND runtime patching, check src/plugins/unindent.ts, which uses code patches to run custom runtime code.

One of the patches in the isStaff plugin, looks like this:

{
    match: /(\w+)\.isStaff=function\(\){return\s*!1};/,
    replace: "$1.isStaff=function(){return true};",
},

The above regex matches the string in discord that will look something like:

abc.isStaff = function () {
    return !1;
};

Remember that Discord code is minified, so there won't be any newlines, and there will only be spaces where necessary. So the source code looks something like:

abc.isStaff=function(){return!1;}

You can find these snippets by opening the devtools (ctrl+shift+i) and pressing ctrl+shift+f, searching for what you're looking to modify in there, and beautifying the file to make it more readable.

In the match regex in the example shown above, you'll notice at the start there is a (\w+). Anything in the brackets will be accessible in the replace string using $<number>. e.g., the first pair of brackets will be $1, the second will be $2, etc.

The replacement string we used is:

"$1.isStaff=function(){return true;};"

Which, using the above example, would replace the code with:

Note In this example, $1 becomes abc

abc.isStaff = function () {
    return true;
};

The match value can be a string, rather than regex, however usually regex will be better suited, as it can work with unknown values, whereas strings must be exact matches.

Once you've made your plugin, make sure you run pnpm lint and make sure your code is nice and clean, and then open a PR on github :)

Warning Make sure you've read CONTRIBUTING.md before opening a PR

If you need more help, ask in the support channel in our Discord Server.