Embbnux Ji
Jul 9 · 3 min read

RingCentral Embeddable provides an easy way to add a full RingCentral user experience to any web app. After releasing the stand-alone widget, we provided a way to deploy Embeddable as a Google Chrome extension to enhance web apps that aren’t natively extensible including many CRM apps. Now, we are providing the same capabilities for Firefox add-ons so you can easily integrate RingCentral into any CRM or other websites.

In this article, we will use RingCentral Embeddable to build a Firefox add-on with the Google API integration.

Reference the following GitHub repos for additional code:

  1. Core widget: RingCentral Embeddable
  2. Full code: RingCentral Embeddable for Google in Firefox add-on
  3. Base Firefox add-on: RingCentral Embeddable Firefox extension template

Steps

  1. Build Firefox add-on manifest.json

Build Firefox add-on `manifest.json`

Before we build a Firefox add-on, we need to define a manifest.json file as follows:

The manifest.json file for the Firefox add-on is very similar to the file for the Chrome extensions. We need to add permissions , content , background and content_security_policy . We will inject JS and CSS files into Google related websites, so we need to add website url into content_scripts.matches list.

With manifest.json, we can go to the add-ons debug page about:debugging#addons, and install it into Firefox.

Remember to reload add-on every time you update code.

Inject RingCentral Embeddable into web page

We will use content_scripts to inject RingCentral Embeddable into web pages.

Inject RingCentral Embeddable in content.js

In the add-on’s content.js file, inject the Embeddable using the widget’sadapter.js file:

Init widget message listener

Add the following code to content.js to enable the widget to receive and send messages using the browser’s postMessage functionality. Messages with the rc-post-message-request will be received by the widget. Request messages will be passed from the widget to the extension background and the background will handle and respond.

Init message response service in background.js

Add the following code into background.js

Integrate Google related feature

After injecting the RingCentral Embeddable widget into a webpage, we also want to integrate third party services into RingCentral Embeddable to provide more interactivity and functionality. In this section, we will integrate Google Authorization, Google Contacts, Google Calendar and Gmail into the widget.

Integrate Google authorization into widget:

Add the following codes into background.js

You can get full google client code here. Firstly, we register an authorize path when we register service. Then we build a message listener to respond to the authorize request.

Integrate Google contacts into widget

Add the following code into background.js

Firstly, we register a contact path when register service. Then we respond to the contacts request.

For more feature integrations and details, you can get the full code here.

We also provide a CRM Firefox extension factory CLI tool to help developers build the Firefox extension. You can get it here. Just run it and select the Firefox extension, and you can get it work.

Try it out

Get the release packages here and try it out by installing them into Firefox. Reach out to us on GitHub issues, Developer Community, or Stack Overflow if you have any questions.

RingCentral Developers

Cloud Business Communications

Embbnux Ji

Written by

RingCentral Developers

Cloud Business Communications

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade