---
title: Create plugin for Cordova
tags: custom plugin, cordova
description: Create plugin for Cordova
---

# 建立自己的plugin@Cordova for iOS and Android

---

## 前置作業

- Android Studio or XCode ready.
- Cordova project ready.
- Node.js and npm ready.

---
## 安裝plugman

npm install -g plugman

---
## 透過plugman建立plugin

plugman create --name CustomPlugin --plugin_id "cordova.plugin.customplugin" --plugin_version 0.0.1

---
## 加入plugin for android or iOS

cd CustomPlugin
plugman platform add --platform_name ios

---
## 建立package.json套件相關資訊

plugman createpackagejson .


---
## 目錄架構

CustomPlugin/
├───src/
│   └───android/
│       └───CustomPlugin.java
├───www/
│   └───CustomPlugin.js
├───package.json
└───plugin.xml

---
## 加入plugin到專案中
先切換到Cordova專案platforms那一層

cordova plugin add "plugin path"

e.g.
cordova plugin add "/Users/aa/Google Drive/Library/test/CustomPlugin"


---
## 檢視plugin是否被加入專案中
1. CustomPlugin.java

2. CustomPlugin.js

3. cordova_plugins.js裡面是否有plugin資訊

---
## 修改index.js

var customPlugin = cordova.plugins.CustomPlugin;

customPlugin.coolMethod("test Custom Plugin ok", function(data) {
    alert(data);
}, function() {
    alert("Error calling Plugin");
});


---
## 增加其他method
1. 在CustomPlugin.js加上程式碼

exports.packageName = function (success, error) {
    exec(success, error, 'CustomPlugin', 'packageName', []);
};


2. 在CustomPlugin.java加上程式碼

 else if (action.equals("packageName")) {
    callbackContext.success(cordova.getActivity().getApplicationContext().getPackageName());
    return true;
}


3. 在index.js加上程式碼

customPlugin.packageName(function(data) {
    alert(data);
}, function() {
    alert("Error calling Plugin");
});


---
### 執行結果
+ 成果1
+ 成果2

---

### 參考資訊

- [5分鐘創建Cordova Plugin教學](https://www.blogbrb.com/posts/skillshare/create-cordova-plugin-5-minutes/)