Installing XPCOM Component as Extension on B2G Desktop

Here is how to install a hello world xpcom component as an extension on B2G Desktop, and test it.

You need a few parts:

• A simple webapi add-on via manifest, then save as an xpi
• Add new xpcom component to b2g/components/B2GComponents.manifest
• Add the xpi to gaia/build/config/additional-extensions.json

Simple Webapi Add-On via Manifest

You'll need 3 parts:

• components/helloworldapi.js
• chrome.manifest
• install.rdf

components/helloworldapi.js

Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");

function helloWorld() {
  // do something
}
helloWorld.prototype = {

  // this must match whatever is in chrome.manifest!
  classID: Components.ID("{a5d89cee-85f4-44ad-b8eb-39ad39170823}"),

  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsISupports]),

  hello: function() {
    return "Hello World!";
  }
};

// The following line is what XPCOM uses to create components. Each component prototype
// must have a .classID which is used to create it.
const NSGetFactory = XPCOMUtils.generateNSGetFactory([helloWorld]);

chrome.manifest

component {a5d89cee-85f4-44ad-b8eb-39ad39170823} components/helloworldapi.js
contract @mozilla.org/helloworld;1 {a5d89cee-85f4-44ad-b8eb-39ad39170823} 
category JavaScript-navigator-property helloworld @mozilla.org/helloworld;1

install.rdf

<?xml version="1.0"?>
<RDF xmlns="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="https://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>[email protected]</em:id>
    <em:name>example-webapi-manifest</em:name>
    <em:version>1</em:version>
    <em:type>2</em:type>
    <em:targetApplication>
      <Description>
       <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
       <em:minVersion>22.*</em:minVersion>
       <em:maxVersion>30.0</em:maxVersion>
     </Description>
    </em:targetApplication>
    <em:unpack>true</em:unpack>
    <em:bootstrap>true</em:bootstrap>
    <em:creator>Dietrich Ayala</em:creator>
    <em:description>Example of manifest approach to adding a new Web API.</em:description>
    <em:homepageURL>https://metafluff.com/</em:homepageURL>
  </Description>
</RDF>
 

Now, save this as an xpi by running the following from the base directory of this add-on:

    zip -r example-webapi-manifest.xpi ./*

Upload this to some URL for the next part.

Add to XPCOM Component to B2GComponents.manifest

The first thing you need to do is set up a standard Mozilla build environment. Once you have that, you can pull down the code you'll need and configure it to build the Firefox OS desktop client.

Before building B2G-Desktop, add your new XPCOM component to b2g/components/B2GComponents.manifest

# helloworldapi.js
component {a5d89cee-85f4-44ad-b8eb-39ad39170823} helloworldapi.js
contract @mozilla.org/helloworld;1 {a5d89cee-85f4-44ad-b8eb-39ad39170823}
category JavaScript-navigator-property helloworld @mozilla.org/helloworld;1

Now build B2G-Desktop and proceed to the next step.

Add XPI to Gaia via additional-extensions.json

Before doing this step you'll need to download gaia.

Add the new xpi extension to gaia/build/config/additional-extensions.json

{
  "Screen Reader Simulator": {
    "url" : "https://addons.mozilla.org/firefox/downloads/latest/440614/addon-440614-latest.xpi"
  },
  "Hello World Example API": {
   "url" : "https://yourdomain.com/example-webapi-manifest.xpi"
  }
}

Now, generate a profile with your new xpi, and run the B2G-Desktop client.