From efdf356f98023eed730560823501aea944ee9c93 Mon Sep 17 00:00:00 2001 From: GhostMander <58628835+GhostMander@users.noreply.github.com> Date: Tue, 26 Jan 2021 13:22:52 +0530 Subject: [PATCH] Initial commit --- .prettierrc.js | 9 +++++ Components/Settings.jsx | 29 +++++++++++++++ LICENSE | 21 +++++++++++ README.md | 18 ++++++++++ index.js | 78 +++++++++++++++++++++++++++++++++++++++++ manifest.json | 7 ++++ style.scss | 3 ++ 7 files changed, 165 insertions(+) create mode 100644 .prettierrc.js create mode 100644 Components/Settings.jsx create mode 100644 LICENSE create mode 100644 README.md create mode 100644 index.js create mode 100644 manifest.json create mode 100644 style.scss diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..d897d62 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,9 @@ +module.exports = { + singleQuote: true, + jsxSingleQuote: true, + trailingComma: "none", + useTabs: false, + tabWidth: 4, + semi: true, + arrowParens: "avoid", +}; diff --git a/Components/Settings.jsx b/Components/Settings.jsx new file mode 100644 index 0000000..ab0a076 --- /dev/null +++ b/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 ( +
+ { + 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 + +
+ ); + } +}; diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..95a8b56 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..f2a455b --- /dev/null +++ b/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)
+**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)! diff --git a/index.js b/index.js new file mode 100644 index 0000000..bc9b748 --- /dev/null +++ b/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'); + } +}; diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..c818a88 --- /dev/null +++ b/manifest.json @@ -0,0 +1,7 @@ +{ + "name": "Example Plugin", + "version": "1.0.0", + "description": "A simple plugin template.", + "author": "TrueXPixels", + "license": "MIT" +} diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..28a1186 --- /dev/null +++ b/style.scss @@ -0,0 +1,3 @@ +#message-toPetButton { + color: orange; +}