Initial commit

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    singleQuote: true,
+    jsxSingleQuote: true,
+    trailingComma: "none",
+    useTabs: false,
+    tabWidth: 4,
+    semi: true,
+    arrowParens: "avoid",
+};

Components/Settings.jsx

@@ -0,0 +1,29 @@
+/* Essential Packages */
+const { React } = require('powercord/webpack');
+
+/* Plugin Specific Packages */
+// There are many more componenets available in "powercord/components/settings".
+const { SwitchItem } = require('powercord/components/settings');
+
+module.exports = class Settings extends React.PureComponent {
+    /**
+     * Renderer, this is what's being executed on line 22 of index.js
+     * The example here displays a toggle between displaying a cat or a dog.
+     * */
+
+    render() {
+        return (
+            <div>
+                <SwitchItem
+                    value={this.props.getSetting('displayCat', true)} // The second parameter is the default setting
+                    onChange={() => {
+                        this.props.toggleSetting('displayCat', true); // The second parameter is the default setting
+                    }}
+                    note='If disabled, the image will change to a dog instead.'
+                >
+                    Display Cat
+                </SwitchItem>
+            </div>
+        );
+    }
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 {Name}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,18 @@
+# powercord-plugin-template
+
+Personal powercord plugin template, feel free to use this, although keep in my I don't really know what I'm doing.
+
+| Preview                                 | Settings                            |
+| --------------------------------------- | ----------------------------------- |
+| ![](https://i.plexidev.org/RmG67u3.gif) | ![](https://i.plexidev.org/FmULjPO) |
+
+## Hey There 👋
+
+I work on this project in my spare time, if you'd like to support me, you can do so by [buying me a coffee! ❤️](https://www.buymeacoffee.com/lorencerri)
+
+***Check out my other plugins:** [lorencerri.github.io/?tag=powercord](https://lorencerri.github.io/?tag=powercord)*
+
+**Twitter:** [twitter.com/lorencerri](https://twitter.com/lorencerri) <br>
+**Discord:** [discord.gg/plexidev](https://discord.gg/plexidev)
+
+> Need a custom Discord bot or project completed? Feel free to send me a message on [Discord](https://discord.gg/plexidev) (lorencerri#2113) or [Twitter](https://twitter.com/lorencerri)!

index.js

@@ -0,0 +1,78 @@
+/* Essential Packages */
+const { Plugin } = require('powercord/entities');
+const { inject, uninject } = require('powercord/injector');
+const { getModule } = require('powercord/webpack');
+
+/* Plugin Specific Packages */
+const { ContextMenu } = require('powercord/components');
+
+/* Settings */
+const Settings = require('./Components/Settings.jsx');
+
+module.exports = class MyPlugin extends Plugin {
+    /* Entry Point */
+    async startPlugin() {
+        /* CSS/SCSS - Used for styling */
+        this.loadStylesheet('style.scss');
+
+        /* Register Settings */
+        powercord.api.settings.registerSettings(this.entityID, {
+            category: this.entityID,
+            label: this.manifest.name, // Label that appears in the settings menu
+            render: Settings // The React component to render. In this case, the imported Settings file
+        });
+
+        /**
+         * The following is an example of adding an option to an image's context menu,
+         * which changes the image to a picture of a dog/cat based on the setting.
+         */
+
+        // Discord is made up of thousands of modules, the following lines look for the modules which meet the specified filters.
+        this.imageWrapper = await getModule(['imageWrapper']);
+        const injectInto = await getModule(
+            m => m.default && m.default.displayName === 'MessageContextMenu'
+        );
+
+        /**
+         * The following injects a function into the specified module.
+         * Parameter 1: The InjectionID, used to uninject (should be unique).
+         * 2: The module you want to inject into.
+         * 3: The function name you want to target.
+         * 4: The function you want to inject.
+         */
+        inject('my-plugin-image-menu', injectInto, 'default', (event, res) => {
+            const target = event[0].target;
+
+            /** Only add to the Menu when the target is an image
+             * and the parent element(module) contains an imageWrapper */
+            if (target.tagName.toLowerCase() === 'img') {
+                let displayCat = this.settings.get('displayCat');
+
+                // Push new ContextMenu item to res.props.children
+                res.props.children.push(
+                    ...ContextMenu.renderRawItems([
+                        {
+                            type: 'button',
+                            name: `Display ${displayCat ? 'Cat' : 'Dog'}`,
+                            id: `toPetButton` /* When adding items, make sure all of the id's are different */,
+                            onClick: () => {
+                                /* This is the function that is executed when the button is clicked */
+                                target.src = displayCat
+                                    ? 'https://i.imgur.com/cqAklTF_d.webp'
+                                    : 'https://i.imgur.com/rpQdRoY_d.webp?maxwidth=728&fidelity=grand';
+                            }
+                        }
+                    ])
+                );
+            }
+
+            return res;
+        });
+    }
+
+    pluginWillUnload() {
+        // When the plugin is unloaded, we need to unregister/uninject anything we've registered/injected.
+        powercord.api.settings.unregisterSettings(this.entityID);
+        uninject('my-plugin-image-menu');
+    }
+};

manifest.json

@@ -0,0 +1,7 @@
+{
+    "name": "Example Plugin",
+    "version": "1.0.0",
+    "description": "A simple plugin template.",
+    "author": "TrueXPixels",
+    "license": "MIT"
+}

style.scss

@@ -0,0 +1,3 @@
+#message-toPetButton {
+    color: orange;
+}