BabelExt

I’m finally ready to release BabelExt into the wild. It’s not a huge amount of code, and it’s not a monumental achievement in terms of “programming” – but what I do believe is that it lowers the barrier to entry to browser extension development for a lot more people.

There are two key purposes for BabelExt:

1) Providing a boilerplate / abstraction layer that allows for cross-browser extension development for Chrome, Firefox, Opera and Safari. This boilerplate is (at least currently) strongly geared toward “content scripts” – the sorts of modifications you’d see from tools like Greasemonkey.

2) Providing a quick means of converting most Greasemonkey userscripts (anything you’d find on userscripts.org) into a legitimate browser extension. There are a few caveats here, but the vast majority of simple userscripts should “just work” if pasted into a BabelExt boilerplate.

When it comes to Greasemonkey type development, the transition to writing extensions can be a bit tricky. Simple tasks like opening a new tab or making a cross domain httprequest require a little bit more know-how and research, because your content script needs to communicate with a background process in order to do these things (for security reasons, primarily). BabelExt handles all of this for you.

Here are a few examples of simple tasks you can accomplish with BabelExt:

Storing data for later retrieval:

BabelExt.storage.set(key, val, function() {
  alert('value set successfully');
});

Grabbing that data:

var val = BabelExt.storage.get(key, function(returnData) {
  alert('variable val set to value: ' + returnData.value);
});

Opening a new tab, and choosing to open it in the background (unfocused):

BabelExt.tabs.create('http://www.google.com', true);

Creating a new notification (desktop in Chrome and Firefox, browser bar in Opera and Safari), with support for icons, as well:

BabelExt.notification.create(
  'Some title',
  'Some stuff I really want to tell you about because it is important',
  'http://example.com/icon.png'
);

Adding a URL to the browser’s history (note: only Chrome supports this natively – a tricky iFrame hack is used for other browsers) – this sort of thing is useful for extensions like HoverZoom that show you an image without forcing you to leave the page. It allows you to add those image URLs to the browser’s history:

BabelExt.history.add(url, function(url) { alert('url added to history: ' + url); });

Adding CSS to the page:

BabelExt.css.add('BODY { margin: 0; padding: 0}');
BabelExt.css.add('.someClass { border: 1px solid red; }');
BabelExt.css.render();

In the future, more functionality may be added to BabelExt.  For now, I’d like to get it in the hands of some developers and see just how they use it and where it may be limiting.  I’d love to hear your feedback!

• Mike Potter posted on May 23, 2012
  Hey Steve: We haven't had too many problems. Its been really great so far. Shoot ...
• admin posted on May 18, 2012
  That's great Mike, thanks for letting me know! I have been so busy I haven't gotten around to writing ...
• Mike Potter posted on May 18, 2012
  We're planning to use this for our cross browser extension (currently a Chrome only one) at http://gijit.co. Thanks for writing this ...

An early version exists on github, but I’ll be adding a couple more features before I make any announcement or do any promotion of it.

The initial version will be simple, and support only a few core features:

• Greasemonkey abstraction – so that you can (probably) paste in Greasemonkey scripts and turn them into extensions for all 4 browsers quite easily.
• Abstraction for the following common browser extension APIs:
• Tab creation (including choosing if it will be focused / backgrounded)
• Cross domain xmlhttprequests
• Extension storage, for storing data, settings, etc.
• History API (native for Chrome, “faked” for Firefox, Opera and Safari)

The next step will be to post it to github and get community feedback on the initial architecture before moving too far forward with additional features, etc.

Some sample code:

BabelExt.xhr({
  method: "GET",
  url: 'http://www.babelext.com/',
  onload: function(data) {
    console.log(data);
  }
});