Creating a Publishable Capacitor Plugin

When integrating custom native code we have mostly been focusing on adding that code directly to our local native projects. However, you might also want to build and publish a plugin that is installable just like any other official plugin or the community plugins. This is great for if you want to share your plugin with the world, or if you just want to be able to easily install it in multiple different projects without having to manually configure code every time.

In this lesson, we are going to cover how you can create a publishable plugin.

Generate a new Plugin

To generate a new Capacitor plugin as its own project we can run the following command:

npm init @capacitor/plugin

This will prompt you for what you want the name of your package to be (e.g. the name you would use with the npm install command). We will use our AlertPlugin as an example, so maybe we would name it capacitor-alert-plugin.

You will eventually get to a prompt asking you for the Class name, you might use something like Alert for this but it doesn’t really matter. It will also make you supply a repo URL, you can just enter a fake value here for now or where you expect to create the GitHub URL, e.g:

https://github.com/your-username/capacitor-alert-plugin

Make your way through the rest of the prompts, and then your plugin should be generated.

Implementing the Plugin

The great thing about this generate command is that it does so much for you - almost everything is completely set up and if you are just creating a simple plug in it is really easy to drop in your code.

Let’s walk through the steps required to add our basic AlertPlugin functionality to this project we just created.

Implement the interface by modifying src/definitions.ts:

export interface AlertPlugin {
  present(options: { message: string }): void;
}

This is the interface we will use in our application to interact with the plugin, and it is the same approach that we have already been using for our local plugins.

Implement the web definition in src/web.ts:

import { WebPlugin } from '@capacitor/core';

import type { AlertPlugin } from './definitions';

export class AlertWeb extends WebPlugin implements AlertPlugin {
  present(options: { message: string }): void {
    console.log(options.message);
  }
}

You may not care about the web implementation, because often you will only want to run your application on iOS and Android - not the web. If you like, you can just do something simple like this for the web version (logging the message out). However, it is also possible to implement some web specific behaviour here if it makes sense to.

Implement the iOS code in ios/Plugin/AlertPlugin.swift: