Home del.icio.us this! Share on Facebook!  Tweet this! Share on Reddit! RSS 2.0 

BabelExt is ready (in beta form)!

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!

33 Comments

  1. Comment by Yaroslaff Fedin:

    May I suggest a shared API to add a panel to firebug/web inspector? It would be invaluable tool, and I’d use the **** out of it, as a framework developer that needs to have some custom tools in the browser.

  2. Comment by Christian Romeni:

    This looks realy promissing! Keep up the work to extend for some more features…

  3. Comment by Mike Potter:

    We’re planning to use this for our cross browser extension (currently a Chrome only one) at http://gijit.co.

    Thanks for writing this – we were planning to write something similar, but now we’ll just contribute to your project.

    Great job,

    Mike

  4. Comment by admin:

    That’s great Mike, thanks for letting me know! I have been so busy I haven’t gotten around to writing decent documentation yet so please don’t hesitate to send me an email if you have any questions!

  5. Comment by Mike Potter:

    Hey Steve:
    We haven’t had too many problems. Its been really great so far. Shoot me an email with your email address / twitter account and I’ll connect with you on LinkedIn and Twitter.

    Thanks,

    Mike

Leave a Reply

Your email address will not be published. Required fields are marked *