How to create a new Plugin
In this wiki page, you will learn everything to get you started in creating plugins. Lets not waste any more time and get started.
The easiest way to get plugin created is to use the premade template, it has the barebones structure for a plugin, in this page we will use that to create a simple plugin that open a new tab with a user selection, learn the system and some caviants. lets get started.
-
JavaScript- https://github.com/webdeckjs/webdeck-plugin-template -
TypeScript- comming soon.
From here you can click on the Use this template button.
You can give you new plugin a new name, I'm calling mine hotlinker. You can then pull down you newly created repository and open with you favorite editor. If you unsure how to do that, check out how to clone a repo docs.
Now that the new plugin repo has been created, we now will need to configure it to make it work for webdeck. First thing to do is install all the dependencies. Make sure you have nodejs installed and on version 20.x or above (can run npm -v in you terminal to find out).
npm run install
Once everything installed, we need to fix the name. First, navigate to the ./package.json file and change the name to the name of the repo, in my example i call it hotlinker. Then update ./src/App.js component to have our new name. and finaly update ./README.md file with the new title. To make sure everything is gone to plan, lets start the application.
npm run start
You should this in the terminal and browser:
Copy the Plugin url from the terminal and paste into https://webdeck.org to test out that you application is working correctly. Congratulation, you have a running plugin 🥳
Now that we got the plugin all configured and development environment setup, lets do some coding. The example we provide is how to write a simple plugin that stores some config (in our case a url) and user presses the button, we open this link in a new tab: The code is something like this:
// on press function, called when user click/presses on a button
export const onPress = ({ config }) => {
if(config.link) {
window.open(config.link, "_blank");
}
}
// renders as settings under plugin selection
const App = ({ config, setConfig }) => {
return (
<div>
<h3>hotlinker plugin</h3>
<div className="setting">
<label htmlFor="link">link: </label>
<input
type="text"
name="link"
placeholder="http://"
onChange={(e) => setConfig({ link: e.target.value }) }
value={config.link || ""}
/>
</div>
</div>
)
};We have two function
This function fire when user click the button, this is the main piece of code to trigger something to happen, you can put anything here to trigger. Here we will open the link.
The App component to render to the screen, this should be all you config and setting the user can control. Her we allow the user to configure the link
--
That it, test it out on webdeck and you will see it in action: Check out the the Plugin API docs to learn more.
Create a commit and push the change. Navigate to the Github page for new repo and you will notice that build has started: (orange icon). This template comes with a CI/CD deployment pipeline already. So you code is compiled and ready to be consumed. You will see a green tick once everything is built.
To finish the publishing and make the plugin consumable we first must setup Github Pages. Go into the Setting > Pages.
From here we must choose gh-pages and click save. You should then after a few minutes reload the page and see you Github pages configured. Now lets tag and set the url for the plugin so webdeck can easyly import it
And you done, you plugin is live :)
Congratulation! Have fun with you own plugin!
Here a list of refrences to help you on you plugin creation path.