Sep 28, 2012

Dumbwaiter Chrome Extension

I recently got around to trying out Statamic to create a little recipe manager. Yes, I know there are tons of apps out there that do this type of stuff, but I wanted to really be able to control everything.

I also wanted to figure out some way that my wife could bookmark recipes for us, and I didn’t expect her to login to my Statamic install and go through that whole process of adding a new entry. I wanted her to be able to click a button when she was on a site displaying a recipe that she wanted to bookmark, and an entry would then be created. That led me to create my first Chrome Extension, Dumbwaiter.

Dumbwaiter Options

The basic idea is that you provide a URL that will be opened in a popup window when you click the exntension. Then you provide some JavaScript to do something on the current page you are on, and then some more JavaScript to do something with that data. So in my case, I grab the URL of the page where the recipe is coming from, grab the name of the recipe, and then whatever text is highlighted on the page. So, the process to add a recipe is to highlight the actual recipe, then click the Dumbwaiter icon, and all the data will be pre-populated into my Statamic new entry form.

Here is some example code that I am using, but the options are limitless: whatever you can do with jQuery, you can do with Dumbwaiter.

Retrieve Data Code

var title = jQuery('meta[property="og:title"]').attr('content');
var source = window.location.href;
var img = jQuery('meta[property="og:image"]').attr('content');
var content = window.getSelection().toString();

if(!title) {
	title = jQuery('title').text();

var data = {
	title: title,
	source: source,
	img: img,
	content: content

Insert Data Code

function makeSlug(str) { 
	str = str.replace(/^\s+|\s+$/g, ''); // trim
	str = str.toLowerCase();
	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
	var to   = "aaaaeeeeiiiioooouuuunc------";
	for (var i=0, l=from.length ; i < l ; i++) {
		str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
	.replace(/\s+/g, '-') // collapse whitespace and replace by -
	.replace(/-+/g, '-'); // collapse dashes
	return str;

var slug = makeSlug(data.title);

You can download Dumbwaiter here, and let me know if you guys find any creative uses!