How to write an Electron plugin?

[bcallaghan-fri]

I'm trying to write an Electron plugin, but I found almost no useful information in the docs. I started by making a WebPlugin as suggested in #1281. I'm still struggling to finish and deploy this plugin, and I have a few more questions that haven't been covered yet.

1. Where do I call registerElectronPlugin? Should it be in the plugin's code? In the consumer's code? Should it be called in an Electron preload script, or in a regular renderer script?
2. How do I import the registerElectronPlugin method? The main npm package is a CommonJS module that doesn't contain that function. It's buried deeper inside a separate, internal ES module.
3. Are native npm modules (those containing platform-specific builds) supported in Capacitor plugins? If so, what is the process of building those (usually requires electron-rebuild)?
4. How do I package and deploy an Electron plugin? Is it a separate package? Is it a folder within my Web plugin's package?
5. When can I expect better documentation/templates/guides on building an Electron plugin?

Sorry for all the questions, but I'm in the process of porting an Electron/Ionic app to Capacitor, and these are all issues I've run into.

[REPTILEHAUS]

+1 is there any way we could get a bare bones guide on creating a bridge between an electron app and capacitor

[filpet95]

+1 Would be great to have an update regarding this! Especially if one would interact with desktop hardware.

[digaus]

Yep would be great. Have a capacitor wifi plugin and would like to extend it with electron support. Also If I know how to inckude electron I would create a file server plugin.

[Inateno]

Same, it seems easy but I'm receiving errors while using registerElectronPlugin, at least an example would be nice.

[sikfreeze]

+1 It has been almost a year after that answer has been posted

[Timeswitch]

+1, no idea.

[Timeswitch]

Ok, I think I sort of got it...

1.:
Write your electron plugin in a seperate file, like you would with the web version (you can even use registerWebPlugin)
Just make sure, you enter 'electron' and not web as platform and don't export it in your index.ts!!

2.:
Add your electron.ts to the tsconfig files section

3.:
Open your rollup.config.js so it looks like this:

import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: 'dist/esm/electron.js',
  output: {
    file: 'dist/electron-bridge.js',
    format: 'iife',
    name: 'capacitorPlugin',
    sourcemap: true
  },
  plugins: [
    nodeResolve()
  ]
};

4.:
Add rollup to you build script inside packege.json and run it
"build": "npm run clean && tsc && rollup --config rollup.config.js"

You should now have your plugin under dist/esm/index.js and a electron-bridge.js file in dist/

5.:
In you app, open electron/index.js and modify the preload property of your window config

webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preload.js')
    }

6.:
Create a preload.js next to your index.js

require('@capacitor/electron/dist/electron-bridge');
require('your-awesome-plugin/dist/electron-bridge');

This will keep your plugin clean of any electron/nodejs code, so you should be able to use any existing webpack / whatever config insider your app. All electron code and imports are only inside electron-bridge.js rollup compiled and the electron.js inside dist/esm. Since the plugins index.js does no export them, your build systems should ignore them as well.

When running electron, the electron-bridge package gets preloaded and you should have all you native electron stuff.

This seems to be roughly how capacitor does it under the hood, as far as I can tell and it works quite well for me.

[coreyjv]

@IT-MikeS --

@kensodemann recommended I contact you regarding creating custom plugins for Electron.

Would you be willing to provide a "hello world" (or maybe the "Echo" example from the docs) example of how someone would write an Electron plugin?

Thanks!

[IT-MikeS]

This in my plans currently for the new version of the Capacitor Electron platform, Im taking stock on how to make it as simple as possible going forward with that version. The new version is not ready yet but will be soon.

As for right now, what is that you are interested in doing in the platform that would make a good plugin?

[coreyjv]

Thanks for the quick reply @IT-MikeS!

We're looking to implement a version of Auth Connect in Electron.

If I had to build something today what options do I have?

[IT-MikeS]

As a non-plugin you could put most of this logic into the main process and then communicate with the renderer(webapp) through IPC

[coreyjv]

@IT-MikeS -- Is there an ETA on when one will be able to use the new Capacitor Community Electron project?

[IT-MikeS]

Well, I can say it wont be sooner than the 24th of June.

Still a few things I'm playing with and some stuff the core team is advising me on. However I do have a plan to make electron plugins a lot more straight forward and behave more native like.

[IT-MikeS]

Just as a little update,

There is a preview version of the next electron platform version up on the new Capacitor Community Org. at:
https://github.com/capacitor-community/electron

That version has a new pattern for plugins for electron and a document on how to start making them.
https://github.com/capacitor-community/electron/blob/main/docs/CreateElectronPluginGuide.md

[sikfreeze]

Thank you. When can we expect this new capacitor release? Does this mean that we cannot use electron in the current version of capacitor?

[IT-MikeS]

You will be able to use the current version of the electron platform up until the 3.0 release of Capacitor. If you wish you can stay on 2.0 but support will be limited after the 3.0 release

As for timing, when it's ready / I don't have that info

There will be a an intermediate release along the lines of 2.3 that will bring support for custom platforms in the CLI and this will bridge the gap until 3.0, the community platform readme will be accurate to the current version of Capacitor so keep an eye out for instructions on how to use the community platform 🙂

The community platform is functional but in preview for the time being while the community heats up and the core team works away on the next version.

[IT-MikeS]

Hey everyone, now that capacitor 2.3 has released, it brings support for community platforms via CLI.

I have updated the electron platform (https://github.com/capacitor-community/electron) with instructions on how to use it with the new CLI features and there is also now a plugin guide on that repo too. 🎉