capacitor-plugin-contacts

How to Build Your Own Capacitor Plugin for Ionic

Creating Capacitor Plugins

1. Install Capacitor to global

npm install -g @capacitor/core @capacitor/cli

2. Generating a Plugin

Creating Capacitor Plugins

$ npx cap plugin:generate
*  Creating new Capacitor plugin
? Plugin npm name (kebab-case. ex: capacitor-plugin-example): capacitor-plugin-contacts
? Plugin id (domain-style syntax. ex: com.mycompany.plugins.example) com.lequyettien.plugins.contacts
? Plugin class name (ex: Example) Contacts
? description: Access and manage Contacts on the device
? git repository: https://github.com/LeQuyetTien/capacitor-plugin-contacts.git
? author: Le Quyet Tien
? license: MIT
? package.json will be created, do you want to continue? Yes


√ Adding plugin files in 67.90ms
√ Writing package.json in 1.49ms
√ Installing NPM dependencies in 13.28s
[info] Your Capacitor plugin was created at capacitor-plugin-contacts

3. Linking to Github

Create repository on Github

Link existing project to the repository just created

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/LeQuyetTien/capacitor-plugin-contacts.git
$ git push -f origin main

Implementing a New Function

1. Setup the Interface

Add getContacts function to ContactsPluginPlugin interface in src/definitions.ts

export interface ContactsPluginPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
  getContacts(filter: string): Promise<{ results: any[] }>;
}

2. Web Capacitor Plugin Code

Capacitor Web/PWA Plugin Guide

3. iOS Capacitor Plugin Code

Capacitor iOS Plugin Guide

4. Android Capacitor Plugin Code

Capacitor Android Plugin Guide

Local Testing

To test the plugin locally while developing it, link the plugin folder to your app project using the npm link command.

First, within the plugin folder, run: npm link.

Then, within the project that will test the plugin, run:

$ npm link capacitor-plugin-contacts
$ npm install capacitor-plugin-contacts