Plugin Management

Capacitor CLI provides comprehensive plugin discovery, installation, and management for both Capacitor and Cordova plugins through command-line interfaces. Plugin management functions are handled internally and are not exposed as exportable functions.

Capabilities

Plugin Listing and Discovery

List Plugins

List all installed Capacitor and Cordova plugins for the project.

Command:

npx cap ls [platform]

Examples:

# List all plugins
npx cap ls

# List plugins for specific platform
npx cap ls ios
npx cap ls android

Output: The command displays:

• Capacitor plugins with their versions and compatibility
• Cordova plugins with their versions and platform support
• Plugin status and any compatibility warnings

Plugin Development

Generate New Plugin

Create a new Capacitor plugin project with scaffolding.

Command:

npx cap plugin:generate

This command is interactive and will prompt for:

• Plugin name and identifier
• Plugin description
• Plugin class name
• Target platforms (iOS, Android, Web)

Example:

# Start interactive plugin generation
npx cap plugin:generate

Plugin Installation and Management

Plugins are typically installed through npm/yarn and automatically detected by Capacitor:

# Install a Capacitor plugin
npm install @capacitor/camera

# Install a Cordova plugin
npm install cordova-plugin-camera

After installing plugins, run sync to update native projects:

npx cap sync

Plugin Configuration

Capacitor Plugins

Capacitor plugins are configured in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  plugins: {
    Camera: {
      permissions: ['camera', 'photos']
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert']
    }
  }
};

export default config;

Cordova Plugins

Cordova plugins can be configured through:

1. capacitor.config.ts (recommended):

const config: CapacitorConfig = {
  // ... other config
  cordova: {
    preferences: {
      ScrollEnabled: 'false',
      BackupWebStorage: 'none'
    }
  }
};

2. config.xml (legacy):

<preference name="ScrollEnabled" value="false" />
<preference name="BackupWebStorage" value="none" />

Plugin Compatibility

Capacitor Plugin Types

• Core Plugins: Official Capacitor plugins (@capacitor/*)
• Community Plugins: Third-party Capacitor plugins
• Cordova Plugins: Legacy Cordova plugins with compatibility layer

Platform Support

Plugins can support different combinations of platforms:

• Web: Browser-based implementation
• iOS: Native iOS implementation
• Android: Native Android implementation

Compatibility Checking

The doctor command can help identify plugin compatibility issues:

# Check for plugin compatibility issues
npx cap doctor

# Check platform-specific plugin issues
npx cap doctor ios
npx cap doctor android

Common Plugin Operations

After Installing New Plugins

1. Sync native projects:

   npx cap sync

2. Update dependencies:

   npx cap update

3. Check for issues:

   npx cap doctor

Troubleshooting Plugins

1. List installed plugins:

   npx cap ls

2. Check plugin compatibility:

   npx cap doctor

3. Clean and rebuild:

   npx cap sync
   npx cap build ios
   npx cap build android

Plugin Types and Structure

Plugin Interface Structure

Plugins detected by Capacitor have the following structure:

interface Plugin {
  id: string;        // Plugin identifier
  name: string;      // Display name
  version: string;   // Installed version
  rootPath: string;  // Path to plugin directory
  manifest?: PluginManifest;  // Plugin manifest data
  ios?: {
    name: string;
    type: PluginType;
    path: string;
  };
  android?: {
    type: PluginType;
    path: string;
  };
}

enum PluginType {
  Core,           // Official Capacitor plugin
  Cordova,        // Cordova plugin
  Incompatible    // Incompatible or problematic plugin
}

Internal Architecture

Plugin management is implemented through internal modules:

• Plugin detection and analysis functions are in /plugin.ts
• Platform-specific plugin integration is in /android/ and /ios/ modules
• Cordova plugin compatibility is handled by /cordova.ts

These internal functions are called by CLI commands but are not part of the public API.