Building Chrome Extension Integrations with RingCentral Embeddable

Embbnux Ji
Aug 21, 2018 · 4 min read
RingCentral Embeddable With Chrome extension

We provide the RingCentral Embeddable web widget to help developers integrate RingCentral into their CRM websites. We have some demos of integrating this into CRMs that allow in-app customizations, but for some SaaS CRMs don’t have CTI frameworks for customers to add scripts into website. This article will show you how to embed RingCentral Embeddable into any website as a Chrome extension.

We will use Office 365 website as a example.

Related Links:

Create a Chrome extension manifest

For Chrome extension, we need to create manifest.json file to clarify our Chrome extension.

{
"name": "RingCentral Embeddable Voice Demo",
"description": "A RingCentral Embeddable Voice extension demo",
"version": "0.0.1",
"permissions": [
"http://*/",
"https://*/",
"storage",
"activeTab",
"tabs",
"background",
"tabCapture",
"unlimitedStorage",
"https://*.office365.com/*",
"https://*.office.com/*"
],
"content_scripts": [
{
"matches": ["https://*.office365.com/*", "https://outlook.office.com/*"],
"js": [
"./content.js"
]
}
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {},
"content_security_policy": "script-src 'self' https://ringcentral.github.io/ringcentral-embeddable; object-src 'self'",
"manifest_version": 2
}

We will inject scripts into office365.com , so we need to add it in to content_scripts.matches . Content_scripts means that when chrome matches current office365’s url, it will inject our content.js file into this web page. We add `https://ringcentral.github.io/ringcentral-embeddable` into “content_security_policy”, so we can inject RingCentral Embeddable by content.js .

backgroud.scripts make our background.js run in background to listen chrome event.

Create blank content.js and background.js files in project root folder. And you can install your extension in chrome. Go to chrome://extensions/ , enable developer mode, and click Load unpacked to install extension:

install to chrome extensions

After installed, you can get a extension icon in right of chrome toolbar. When you click this button, nothing happens. We need to add codes in content.js and background.js to accomplish features.

Inject Embeddable Voice into Web Page

We will use content.js to help us inject RingCentral Embeddable widget into web page. Just add following codes into content.js file.

console.log('import RingCentral Embeddable Voice to web page');(function() {
var rcs = document.createElement("script");
rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.js";
var rcs0 = document.getElementsByTagName("script")[0];
rcs0.parentNode.insertBefore(rcs, rcs0);
})();

After update extension codes, we need to refresh our extension in chrome. Click refresh button in chrome extensions pages:

Chrome extension refresh

Now go to the Office 365 website https://outlook.office365.com/owa/, you can find that RingCentral Embeddable widget appears in that page:

RingCentral widget in Office365

Show widget app when click extension icon

We can listen to icon clicked event in background.js file. Add following codes:

chrome.browserAction.onClicked.addListener(function (tab) {
// open float app window when click icon in office page
if (tab && tab.url && tab.url.indexOf('office.com') > -1) {
// send message to content.js to to open app window.
chrome.tabs.sendMessage(tab.id, { action: 'openAppWindow' }, function(response) {
console.log(response);
});
return;
}
}

Add following codes in `content.js` to open widget:

// Listen message from background.js to open app window when user click icon.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request);
if (request.action === 'openAppWindow') {
console.log('opening window');
// set app window minimized to false
window.postMessage({
type: 'rc-adapter-syncMinimized',
minimized: false,
}, '*');
//sync to widget
document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
type: 'rc-adapter-syncMinimized',
minimized: false,
}, '*');
}
sendResponse('ok');
}
);

Interact with RingCentral Embeddable

Now we have embedded RingCentral Embeddable widget into the website. We also want to interact with the widget to receive call or message information from it.

Add following codes into content.js to get call information from widget:

window.addEventListener('message', (e) => {
const data = e.data;
if (data) {
switch (data.type) {
case 'rc-call-ring-notify':
// get call on ring event
console.log('RingCentral Embeddable Voice Extension:', data.call);
break;
case 'rc-call-end-notify':
// get call on call end event
console.log('RingCentral Embeddable Voice Extension:', data.call);
break;
case 'rc-call-start-notify':
// get call on start a outbound call event
console.log('RingCentral Embeddable Voice Extension:', data.call);
break;
default:
break;
}
}
});

You can also send message to widget. Such as following codes to register service into the widget:

function registerService() {
document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
type: 'rc-adapter-register-third-party-service',
service: {
name: 'TestService',
conferenceInvitePath: '/conference/invite',
conferenceInviteTitle: 'Invite with Office 365 Calendar'
}
}, '*');
}
var registered = false;
window.addEventListener('message', function (e) {
const data = e.data;
if (data && data.type === 'rc-adapter-pushAdapterState' && registered === false) {
registered = true;
registerService();
}
});

For more operation with RingCentral Embeddable, please follow the document.

Try it out

You can get full extension codes from here. Follow its README to install the extension and try it. 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