The Silver Lining

Lessons & Learnings from a salesforce certified technical architect.

Developing Chrome Extensions for Salesforce

with 5 comments

Get off my case!Chrome extensions are awesome, they provide amazing convenience that is limited only by your imagination. There are some amazing Chrome Extensions for Salesforce already, some of my favourites being:

As a great fan of JavaScript I’ve always wanted to create a Chrome Extension for Salesforce and I’ve finally gotten around to it. The hardest part was figuring out what context the JS executes in (e.g. in the current tabs context, or in some separate context). Let me step through the code to show you how it’s done.

Chrome Extension Structure

A Chrome Extension is made up of a JavaScript, HTML, images and JSON. At its core is a manifest file which contains the metadata describing your application in JSON. There is a lot of documentation about the structure of this file but some of the key elements are shown below.

{
  "name": "Get off my case!",
  "version": "0.8.1",
  "description": "Presents a notification above the favicon with the number of cases assigned to the current user.",
  "manifest_version": 2,
  "icons" : {
               "16": "img/icons/16.png",
               "48": "img/icons/48.png",
               "128": "img/icons/128.png"
             },
  "permissions": [ "tabs", "https://*.force.com/*", "https://*.salesforce.com/*"],
  "update_url": "https://clients2.google.com/service/update2/crx",
  "author": "Wesley Nolte",
  "browser_action": {
     "default_icon": "img/tquila_lozenge.png"
  },
  "content_scripts": [ {
     "js": [  "js/jquery.js",
              "js/forcetk.js",
              "js/tinycon.js",
              "js/contentscript.js" ],
     "matches": [ "https://*.salesforce.com/*", "https://*.force.com/*" ]
  }]
}

This file references all external resources (JavaScript, images etc.), the important parts here being the JavaScript i.e. jquery.js, forcetk.js, tinycon.js and contentscript.js. In short these files represent:

  • jquery.js – the jQuery library
  • forcetk.js – the JavaScript wrapper for the Salesforce.com REST API, but with one modification i.e. the ability to fetch info about the current user
  • tinycon.js – a small library used to create the notification on the tab
  • contentscript.js – the JavaScript file that brings them all together

The JavaScript

The first 3 JavaScript files are libraries that great, but aren’t particularly interesting in the context of this tutorial. The last file is where the magic happens, the code is listed below.

/* Get the cookie values om nom nom */
function getValueFromCookie(b) {
    var a, c, d, e = document.cookie.split(";");
    for (a = 0; a < e.length; a++)
        if (c = e[a].substr(0, e[a].indexOf("=")), d = e[a].substr(e[a].indexOf("=") + 1), c = c.replace(/^\s+|\s+$/g, ""), c == b) return unescape(d)
}

/* Encapsulating code instead of just letting it lay about */
function init() {
	// Get an instance of the REST API client and set the session ID
	var client = new forcetk.Client();
	client.setSessionToken(getValueFromCookie("sid"));

	// Retrieve the data representing the current user
	client.currentUser(function(response){
		var user = response;

		// Find cases that belong to the current user
		client.query("SELECT COUNT() FROM Case WHERE ownerId = '{0}'".replace("{0}",user.id), function(response){
			Tinycon.setBubble(response.totalSize);
		});
	});
}

init();

In short the code gets the session ID from the user’s cookie (the extension works in the context of the current user session for that tab) and uses that to call in using the REST API. Pretty easy huh?

Sourcecode and Extension Install

The sourcecode is on github if you want to experiment with it, and if you’d like to see it in action you can install it from the Chrome Web Store.

About these ads

Written by Wes

September 14, 2013 at 1:26 pm

5 Responses

Subscribe to comments with RSS.

  1. SutoCom

    September 14, 2013 at 7:35 pm

  2. Nice post – thanks for sharing. I’ve got a couple of ideas that this will suit very well.

    Bob Buzzard

    September 16, 2013 at 11:27 am

  3. How to pass count to popup page?

    ambition

    October 20, 2013 at 8:40 am

  4. Thanks for detailed post and source code, this will really help first time developers. Great work!

    Might be add one additional step on how to load same (instead of using extension). This is required if someone wants to develop a new extension using this as basis. To do so we do “Load Unpacked extension” from chrome extensions page :)

    However, unpacked load of your extension folder is resulting in error “Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension”

    To address this error we need to update manifest.json with below line:
    “web_accessible_resources”: ["js/jquery.js"]

    Thanks once again!

    Chirag Mehta

    October 24, 2013 at 11:52 am

  5. […] quick Google search for people doing something similar brought me to Wes Nolte’s post on Developing Chrome Extensions for Salesforce. Fortunately for me, it had a lot of the pieces that I was going to need, in particular the ability […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 2,205 other followers

%d bloggers like this: