Developing Gmail Inbox extensions using inboxSDK

Developing Gmail Inbox extensions using inboxSDK:

InboxSDK:

What is InboxSDK ?

InboxSDK is a platform to develop extensions/plugins for gmail inbox. It’s just a single JS file which you can download from InboxSDK.

 

inbox sdk gmail apps

 

Extension in Gmail ? Where can I find it?

Yes. It’s a extension in gmail. You can find in sidebars, new compose messages/reply messages etc.,

New message widget:

inboxsdk tutorials and examples

 

 

 

How to develop a hello world extension using inbox SDK for gmail ?

Requirements:

inboxSDK.js

App ID [It can be registered here, AppId Registration].

 

 

download

 

manifest.json:

Place where we need to load the inboxsdk js and our own js[here myapp.js – main logics/business] file.

[xml]

{
"manifest_version": 2,
"name": "Hello World Extension | Javadomain.in",
"version": "1.0",
"permissions": [
"https://mail.google.com/",
"https://inbox.google.com/"
],
"content_scripts" : [
{
"matches": ["https://mail.google.com/*", "https://inbox.google.com/*"],
"js": ["inboxsdk.js", "myapp.js"]
}
]
}

[/xml]

 

myapp.js:

[html]

InboxSDK.load(‘1.0’, ‘ABOVE_CREATED_APP_ID’).then(function(sdk){
sdk.Compose.registerComposeViewHandler(function(composeView){

// This below added button will exist in the new compose message/reply widget
composeView.addButton({
title: "Hello world – Javadomain.in",
iconUrl: ‘http://www.ngdeveloper.com/wp-content/uploads/2015/05/javadomain.png’,
onClick: function(event) {
event.composeView.insertTextIntoBodyAtCursor("Hello World Extension by Javadomain.in using InboxSDK");
},
});
});
});

[/html]

 

Output:

inboxsdk tutorials examples

 

 

How to Load our JS ?

 

We can load our own JS in the below ways,

1. Local [Keeping our myapp.js file also in local]

Keeping myapp.js file in local is not recommended one, because when you are updating something in your myapp.js then all the existing users whoever added your extension in their chrome extensions need to update this plugin to sync with the updates you provided.

 

2. Remote [myapp.js file will be in your server]

This is the most recommended way, because when you are providing any updates, then users do not need to update their extensions all the time, since the myapp.js file is already loaded from your own server. So changes will be in sync always.

Drawback: Your server should be https [secured http protocol], else you will be getting this error when try to load your extension,

[plain]

This request has been blocked; the content must be served over HTTPS.

[/plain]

Please find the remote myapp.js file example at the bottom of this page.

 

 

Insert Signature Example:

 

download

 

myapp.js

[java]

InboxSDK.load(‘1.0’, ‘YOUR_INBOX_SDK_APP_ID_HERE’).then(function(sdk){
sdk.Compose.registerComposeViewHandler(function(composeView){

// This below added button will exist in the new compose message/reply widget
// Onclick of the button signature will be added into the mail content.
composeView.addButton({
title: "Insert Signature",
iconUrl: ‘http://www.ngdeveloper.com/wp-content/uploads/2015/05/javadomain.png’,
onClick: function(event) {
event.composeView.insertTextIntoBodyAtCursor("\n\n\n\n\nRegards,\nNaveenkumar Gunasekaran,\nJavadomain.in.");
},
});
});
});

[/java]

Output:
inboxsdk insert signature example

 

 

 

SideBar Navigation InboxSDK Example:

 

download

myapp.js

[html]

InboxSDK.load(‘1.0’, ‘YOUR_INBOX_SDK_APP_ID_HERE’).then(function(sdk){
var _log = function(msg) {
console.log(msg);
};
var routeID = ‘foobarroute/:jdReq’;

sdk.NavMenu.addNavItem({
name: "SideBar Javadomain",
routeID: routeID,
routeParams: {jdReq: "bar"}
});

sdk.Router.handleCustomRoute(routeID, function(routeView) {
_log(routeView.getParams().jdReq);
_log(routeView.getParams());
});
});

[/html]

 

Output:


sidebar inbox example

 

 

 

 

Dropdown InboxSDK Example:

 

download

myapp.js:

[html]

InboxSDK.load(‘1.0’, ‘YOUR_INBOX_SDK_APP_ID_HERE’).then(function(sdk){
sdk.Compose.registerComposeViewHandler(function(composeView){
composeView.addButton({
title: "Javadomain inboxSDK – Dropdown Example",
iconUrl: ‘http://www.ngdeveloper.com/wp-content/uploads/2015/05/javadomain.png’,
hasDropdown: true,
onClick: function(event) {
event.dropdown.el.innerHTML = ‘Javadomain.in\nProud to be Programmer\nNaveenkumar Gunasekaran’;

}
});

});
});

[/html]

 

 

Output:
dropdown inboxsdk example

 

 

 

 

Remote Way myapp.js loading Example:

As we discussed above that remote way loading myapp.js is the recommended one, here find the sample code. [untested due to https server non-availability]

myapp.js: [Should be moved to your own https server]

[html]

Promise.all([
InboxSDK.load(‘1.0’, ‘YOUR_INBOX_SDK_APP_ID_HERE’)
])
.then(function(results){
var sdk = results[0];
sdk.Compose.registerComposeViewHandler(function(composeView){
// This below added button will exist in the new compose message/reply widget
composeView.addButton({
title: "Hello world – Javadomin.in",
iconUrl: ‘http://www.ngdeveloper.com/wp-content/uploads/2015/05/javadomain.png’,
onClick: function(event) {
event.composeView.insertTextIntoBodyAtCursor("Hello World Extension by Javadomain.in using InboxSDK – Remote");
},
});
});
});

[/html]

 

 

jdhello.js:

Loading the above moved server file[myapp.js] in the local js file.

Path of the moved myapp.js file should be given in the local jdhello.js file.

[plain]

InboxSDK.loadScript(‘http://demo.ngdeveloper.com/inboxsdk/myapp.js’);

[/plain]

 

manifest.json:

Need to give the server name [demo.ngdeveloper.com] and local js file [jdhello.js], which loads the server myapp.js file.

[html]

{
"manifest_version": 2,
"name": "Hello World Extension",
"version": "1.0",
"permissions": [
"https://mail.google.com/",
"http://demo.ngdeveloper.com/"
],
"content_scripts" : [
{
"matches": ["https://mail.google.com/*"],
"js": ["inboxsdk.js", "jdhello.js"]
}
]
}

[/html]

 

How to Debug ?

You can debug using the console.log, Which you can see in the browser console window,

inboxsdk console log

 

 

Browser Supports:

As per the inboxsdk site documentation, as of now it supports chrome and safari. Firefox support is in progress, we can expect it soon.

 

 

 

Leave a Reply