How to implement plugins into Electron app?

Viewed 4894

I'm looking for a way to implement "Plugins" for my Electron tool.

Below is a pseudo example of how I'm thinking it would work

Supply .js/.zip/plugin file

File would contain name of plugin, and it's category (Global, Team centric, Misc)

File would contain HTML for the GUI, which get's placed in a div designated for tool space. This name would be added as an option to the necessary Select, as well as logic added to pull in the HTML to the same div

In the tool, select the plugin file: page will load the JavaScript script, and add option to select along with logic to switch to the plugin

The hope is to automate my current process. Currently I'm manually updating the index page to reference the new JavaScript script, and to add the option on the select The JavaScript Script has logic in it looking at the Select, and looking to see if the option was selected which then pulls in it's own HTML via a function within

Is there anything I can reference/utilize to make this work?

3 Answers

After 4+ months of working on this, I've managed to get this to work. I will try to outline my approach.

  • Each "plugin" or "tool" will need it's own .js file
  • the js file should contain an exports.html function that will return the html for the tool
  • the js file should contain an exports.Events function that adds all relevant event listeners
  • create a json file cataloging each tool, along with information needed i.e. a description, image path, .js file path, etc.
  • require the .js file when selected, load the html and the events
  • parse the json to figure out which tool to load along with needed info

all i need to do is update the json file and upload the .js file to add a new plugin.

I developed an electron app using vue as the front-end.

My idea was to develop plugins as vue plugins and publish via npm.

I used live-plugin-manager to install and uninstall plugins.

The dependencies were automatically removed by making use of a counter

The only problem I faced was how to load these installed plugins into my main app.

The workaround I found was posted as answer to my own question at How to use electron to load the vue plugins installed dynamically into a plugins folder

Hope it helps

I know I'm a little late to the party but I encountered the same problem. To solve it I have built a plugin framework for Electron called Pluggable Electron and it is available on npm.

The framework handles the lifecycle of plugins, provides as npm packages, like installation, activation, removal, etc. The plugins can then be called on at any time to exend the core app functionality.

The framework is still under development but you can find a 1st version here: pluggable-electron.

I expect it is too late for Marker but still answering here for anyone else that might have this question.

Related