Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Loading Cordova
  • Upgrading the Cordova version
  • Built-in Cordova plugins in Monaca
  • Importing Cordova plugins

Was this helpful?

  1. Product Guides
  2. Monaca CLI
  3. Project Dependencies

Cordova Plugins

PreviousJS/JSS ComponentsNextCustom Cordova Plugins

Last updated 2 years ago

Was this helpful?

Usually, you need native code (Java for Android, Objective-C for iOS, etc) to access native device functions such as camera, file system, storage, etc. However, you can access these native functions using JavaScript with Cordova.

Cordova is a set of device APIs that allow a mobile app developer to access native device functions such as the camera or accelerometer from JavaScript. Therefore, Monaca uses Cordova to enable hybrid apps to access native device functions from JavaScript.

For more information about Cordova, please refer to .

Loading Cordova

You can’t use device APIs (Cordova plugins) before Cordova is fully loaded. The deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs. Applications typically attach an event listener with document.addEventListener once the HTML document’s DOM has loaded.

As an example, let’s start up the camera function by using Camera APIs. Please copy and paste the code below to your project in Monaca Cloud IDE. Then you can run it on .

This code was written for Cordova 7.1. We apologize in advance in case the code may behave differently on different devices.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    document.addEventListener ("deviceready", onDeviceReady, false);

    //these functions runs when Cordova is ready
    function onDeviceReady () {
      alert ('Cordova is ready!');
    }

    function snapPicture () {
      navigator.camera.getPicture (successCallback, FailCallback, {destinationType: Camera.DestinationType.DATA_URL});

      //Success Callback
      function successCallback (imageData) {
        //Display image
        var image = document.getElementById ('picture');
        image.src = "data:image/jpeg;base64, " + imageData;
      }

      //Error CallBack
      function FailCallback (message) {
        alert ('Error!!!: ' + message);
      }
    }
  </script>
</head>
<body>
  <h1>Camera Sample</h1>
  <input type="button" onclick="snapPicture()" value="Snap" ><br><br>
  <img id="picture" src="" width="150" height="150">
</body>
</html>

Upgrading the Cordova version

The Cordova version in Monaca cannot be downgraded.

When upgrading a Cordova version, a backup of the project is automatically created before the conversion.

When creating a new project, the latest Cordova version available in Monaca will be automatically applied.

In order to upgrade the Cordova version of your project, please do as following:

  1. From Monaca Cloud IDE, go to Configure → Cordova Plugin Settings.

  2. Click the Upgrade link.

Built-in Cordova plugins in Monaca

Directly from Cordova Plugins page in Monaca Cloud IDE, you can easily enable Cordova plugins.

Importing Cordova plugins

To import a Cordova plugin into your project, please do as follows:

  1. From the Monaca Cloud IDE, go to Configure → Cordova plugin Settings.

3. Once a plugin is enabled/imported, you might want to configure it. Mouseover a plugin you want to configure and click Configure to open the plugin’s settings dialog where you can change the plugin’s version and set the plugin’s parameters.

Core Cordova plugins refer to a minimal set of Cordova APIs such as battery, camera, contacts, devices. For more information, please refer to .

Third-party Cordova plugins refer to other existing Cordova plugins. There are that you can add to your project right from the Cordova Plugins page.

Built-in Cordova Plugins

The Cordova Plugins page will be shown. On this page, core and some third-party Cordova plugins are listed. Mouseover a plugin and click Enable to add the plugin. If you cannot find the plugin you want in the list, you can import other third-party Cordova plugins by using the Import Cordova Plugin button. A project containing external third-party Cordova plugins requires a custom built Monaca Debugger. Please refer to .

here
Monaca Debugger
Core Cordova Plugins
some third-party Cordova plugins
Monaca Debugger with Custom Cordova Plugin
Setting Dialog