Geekaholic
•  Growler — Let Safari Talk  •
A plug-in for Safari that allows web applications to post Growl notifications using Javascript.

To paraphrase a friend, It’s mid-2009 and Safari, regardless of how awesome it is, doesn’t support notifications from web apps. Let’s change that.⌘

I’ve wanted to get into development on the Mac for quite a while now, and this seemed to be an easy and light way to do it. The idea for a notification system first popped into my head when working on Filttr and its web interface. I realised that there was no mechanism in any browser (not SSBs) for a web app to send notifications to a user. Not a Firefox extension, no nothing. Back then it was just a fleeting - “Wouldn’t it be good if we had this?” - thought, and I didn’t bother too much about it, except maybe mention it to a couple of people. Last month, Abimanyu finally came up with Yip1 which he had been working on for quite a while, and it does exactly that. But, it was for Firefox.⌘

Having switched to Safari at the beginning of this year, I was left out of the party. So again, I wondered - “Wouldn’t it be good if we had this for Safari?”. This time, Abimanyu suggested I give it a shot, and this is what came out of it. I would have finished with it sooner, but I lost motivation in the middle. The second leg lasted a day, and the plug-in was complete. Well, complete enough for a version 0.1 alpha release.⌘

Quite simply, it’s a Safari plug-in that allows a web application to send Growl notifications using Javascript. The same way Fluid does. The syntax is the same as well:⌘

window.fluid.showGrowlNotification({
    'title': "TITLE HERE (Required)",
    'description': "DESCRIPTION HERE (Required)",
    'icon': "URL_TO_ICON (Optional)"
});

And the result is this:⌘

⌘

Can’t get simpler than that. I took the same path as Yip, and didn’t introduce a new standard. Fluid’s notification syntax is supported out of the box. But ‘out of the box’ is a bit of an issue in this release.⌘

Out of the Box

I looked around quite a bit, but it doesn’t seem like Javascript can access Safari plug-ins unless they’re embedded into the page. That means that Growler isn’t going to work as seamlessly as I would have wanted. I’m still looking and asking around though, so if you know something that I don’t, please let me know so that I can fix this little niggle which will go a long way in improving the experience. Update: Peter Hosey (lead developer of Growl) pointed out that Growler’s way is the stable and correct way for Safari plug-ins. Rats.⌘

Till then, you need a small bit of Javascript that will allow your application to post notifications. This bit goes in your <head>:⌘

<script type='text/javascript' charset='utf-8'>
    window.addEventListener('load', function(){
        var e = document.createElement('embed');
            e.type = 'application/x-growl';
            e.name = 'Growler';
            e.width = '0px';
            e.height = '0px';

            document.body.appendChild(e);
            if(!window.fluid || !window.platform)
                window.fluid = window.platform = document.embeds['Growler'];
    }, true);
</script>

It’s basically an <embed> tag (which if you know what you’re doing, you can directly put in your <body> instead of the Javascript) that will initialise the plug-in so that it can be used by the Javascript environment, and expose the embedded plug-in’s functions to window.fluid and window.platform. Yes, I’m sorry.⌘

Like I said before, Fluid’s notification syntax is built right in, so you can use window.fluid.showGrowlNotification in your Javascript directly (after embedding the plug-in, of course). Currently, only title and description keys work. Update: Added support for icon as well. A blank string/missing icon attribute will show Safari’s Growler’s icon.⌘

The plug-in includes Growl’s framework, which will prompt the user to install Growl in case it’s not present. Frankly, everyone should have Growl installed whether they’ll need it or not, and I am a little confused as to why Apple doesn’t include it with OS X. But in case you run in to the odd ball, the plug-in should take care of it on its own.⌘

Development

I plan to release early, and release often, since this is something that I’m sure a lot of people will find useful. Which is also why I’m giving out the source, so that others can contribute in case I’m taking too long to release the next version. I’ve tried to keep the code as clean and self-explanatory as possible, but quite a bit has been lifted from Growl’s and Apple’s Objective-C documentation. So I won’t recommend using this as a reference for writing Safari plug-ins.⌘

But anyway, here’s to something interesting to play around with for a few weeks to come.⌘

I want to give a shout out to a couple of people who helped me through this. Abimanyu, for putting the idea in my head that I should try and make something, rather than harp on about how nice it would be to have it, and tomasf from #macdev on Freenode for getting my bundle to build without errors. It sucks to be a newbie, but hey, there’s always a first time.⌘

Download

Note: There is a newer version of the plug-in that solves the embedding issue..⌘

Here are the files you need. Growler.dmg contains the bundle and instructions to install it. The other link is to the project files hosted at GitHub for you to tinker around with. It’s released with a slightly modified MIT license, which is included in the folder. Don’t worry, you have all your freedom.⌘

Update: Forgot to add the link to a demo page. Try going to Sample Growler after installing the plug-in and wait for 4 seconds. If everything is good, you’ll see the notification pop-up.⌘

Growler Plug-In — Tested in Safari 4.x/Mac OS 10.5
Growler Xcode Project⌘

  1. You might also know him as a core developer of Ubiquity. He just loves those Firefox extensions. ↩

⌘ • Projects, Plugins, Hacks and Userscripts • 6 July, '09
Next —
Previous —