Creating Plugin

Prerequisites

• A development Plexcord install
• VSCode with the extensions recommended by Plexcord

Other knowledge requirements include:

• JavaScript/TypeScript knowledge
• Basic regex knowledge
• Basic knowledge of the command line
• Basic knowledge of how to use chrome devtools
• The ability to understand code from just reading it, without requiring documentation
• Basic react knowledge (if you want to do anything with ui)

Plugin Setup

First, decide whether you want to use the src/plugins or src/userplugins folder.

Official Plugins vs UserPlugins

Plugin

Plugins inside src/plugins are tracked via git and are included in the official Plexcord releases.

Use this location if you intend to submit your plugin for inclusion in Plexcord.

UserPlugin

Plugins inside src/userplugins are private. They are not tracked via git.

Use this location if you don't intend to submit your plugin for inclusion in Plexcord.

---

Once you have decided, create a folder with the name of your plugin inside the chosen directory.

The folder's name should be in camelCase. For example myFirstPlugin (NOT MyFirstPlugin or my first plugin)

Plugin Structure

There are 3 special files you can create here:

index.ts(x)

Your plugin's entry point. This is where most of your plugin's code will live and where you define things like its name and description.

Code in this file runs in the browser, so you can use all browser APIs here.
Node.js APIs like fs or child_process are not available here. If you need them, you can do so in the native.ts file.

README.md

Markdown documentation for your plugin. This file should contain a description of your plugin and instructions how to use it. Screenshots, videos or gifs are highly recommended. This will be used to generate a custom webpage for your plugin at https://plexcord.club/plugins/YourPlugin.

native.ts

Your plugin's native entry point. This code will run inside NodeJS instead of the browser. You can use all Node.JS apis here, such as fs or child_process.

Browser APIs are not available here. If you need them, you can do so in the index.ts file.

Plugin Boilerplate

Start creating your plugin by adding an index.ts file inside your plugin's folder.

Type vcPlugin in the file, and you should automatically be suggested the "Define Plugin" template.

note

If this doesn't work for you, follow the editor setup guide to install the Plexcord Companion extension.

Now that you've done this, the file should look like this:

import { Devs } from "@utils/constants";
import definePlugin from "@utils/types";

export default definePlugin({
    name: "name",
    description: "description",
    authors: [Devs.author],
});

Fill out the name and description fields in the definePlugin call.

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [Devs.author],
});

For the authors property, how you do this will depend on whether you're making a plugin or a userplugin.

Plugin

If this is your first time contributing, you will first have to add yourself to the Devs object. It should already be imported, so just jump to its definition and add yourself to the object. Now, set authors to the new property!

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [Devs.YourName],
});

UserPlugin

Just set it to a plain object with your info:

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [{ name: "Your Name", id: 1234567890n }],
});

---

Save your file and it should automatically format it and insert the following license header on the top.

/*
 * Plexcord, a Discord client mod
 * Copyright (c) ${new Date().getFullYear()} MutanPlex and contributors*
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

If you want, you can change it from MutanPlex and contributors to your own name. But this is not strictly necessary, you own the code either way (and are already included in the "contributors" part).

note

If this doesn't work for you, follow the editor setup guide to set up linting.

This is all of the boilerplate needed for a Plexcord plugin. You can now start making your plugin!