Chrome Extension Development, By Example

Ben Coe (@benjamincoe)

Why Create a Chrome Extension?

It's a great way to integrate seamlessly with a third-party site like Gmail.
It in turn solves the "other site" problem, i.e., your customers don't want to go to yet another website.
The Chrome Web Store is a wonderful source of traffic.
All your friends are doing it.

Challenges

A somewhat difficult paradigm to work with.
Hooking into the DOM of a 3rd party website is fragile.

Surmounting these Challenges

Learning to work within the paradigm.
Writing clean, well designed, JavaScript (make sure your DOM selectors are based on sound assumptions).
Listening to this presentation.

The Example, ImageMaily

ImageMaily lets you right-click on an image on a webpage and send it to an email address.

The Building Blocks

Background Pages

One background page runs for your extension.
Is the only place where XHR requests to the server can originate from.

Context Menus

Let you add new right click options to specific types of page elements.

Content Scripts

Allow you to interact with the current page in a tab.
Cannot make requests to the server.

A Sane Paradigm

Message queues are a great way of thinking about designing for a Chrome extension.
Content Scripts pass messages to the background page.
The background script makes requests to the server and returns messages to content scripts.

The Important Files in this Example

background.js the queue based background script for handling communication with the extension.
content.js injected into each page, displays the jQuery-UI popup for requesting an email address.
server.js a Node.js script for handling XHR requests and sending the image as an email.

Creating the Context Menu Item

Background.prototype.createContextMenuItem = function() {
	var _this = this;
	
	chrome.contextMenus.create({
		type: 'normal',
		title: 'Mail Image',
		contexts: ['image'],
		onclick: function(info, tab) {
			_this.messages[tab.id].push({
				imageUrl: info.srcUrl
			});
		}
	});
};

The Queue-Based Paradigm

In the content script:

setInterval(function() {
	chrome.extension.sendRequest(request, function(response) {
		
		if (!response) return;
		
		if (typeof(response) == 'string') {
			alert(response);
		} else {
			imageUrl = response.imageUrl;
			$( "#dialog-form" ).dialog( "open" );
		}
	});
	
	request = {};
}, 200);

In the background script:

// Returning data from queue.
if (typeof(_this.messages[sender.tab.id]) == 'undefined') _this.messages[sender.tab.id] = [];
	if (_this.messages[sender.tab.id].length > 0) {
		callback(_this.messages[sender.tab.id].pop());
	} else {
		callback(false);
	}
});
	
// Populating the queue from an XHR request.
Background.prototype.sendEmail = function(request, tab) {
	var _this = this;
	if (typeof(_this.messages[tab.id]) == 'undefined') _this.messages[tab.id] = [];
	
	$.ajax({
		type: 'get',
		url: 'http://localhost',
		data: {
			imageUrl: request.imageUrl,
			email: request.email
		},
		success: function(response) {
			if (response.success) {
				_this.messages[tab.id].push( _this.successMessage );
			} else {
				_this.messages[tab.id].push( _this.failureMessage );
			}
		},
		error: function() {
			_this.messages[tab.id].push( _this.failureMessage );
		}
	});
};

The Server

The server, written in Node.js, handles downloading the image and emailing it.

app.get('/', function(req, res){
	var imageUrl = req.param('imageUrl'),
		filename = ( imageUrl.match(/^.*\/([^/]*)$/)[1] ).match(/([^?&]*)/)[1];
	
	downloadImage(imageUrl, function(imageData) {
		sendMail(imageData, filename, req.param('email'), function(err, success) {
			res.contentType('application/json');
			if (err) {
				res.send({
					success: false
				});		
			} else {
				res.send({
					success: true
				});
			}
		});
	});
});

Conclusion

If approached in a sane, methodical, way Chrome Extension development can be a fun paradigm to work within. Building extensions is a great way to get more users for your SaaS offering.

oayandosu / DoloresLabsTechTalk