Jeremy Johnstone

This evening I decided to play with a really kewl new app called Fluid. What this app does is allow you to create Site Specific Browsers. One of the first usages which popped into mind was a product I helped develop, Yahoo! Web Messenger. An annoyance of mine with it is that it had to live in a browser tab, something prone to getting closed accidentally, and also didn’t have any decent notifications of new messages when not in focus. Being the perfect candidate for Fluid, IMHO, I set out to give it a shot. In less than an hours time I built a pretty kewl demo and here’s how you can use it too.

1. First things first, you need to download and install Fluid. You can do this by visiting http://fluidapp.com. After installing it, fire up the app.
2. Second off, we now need to create our SSB instance. For the URL, enter in
   http://webmessenger.yahoo.com

   For the name use something like

   Yahoo! Web.IM

   or whatever else strikes your fancy. The icon you can download from here. Click create and you are all set.

3. Next we can fire up the application. It should live inside your applications folder just like any other desktop app. You use Quicksilver right?
4. Now that the app is running, you can see the normal login screen of Web.IM and if you like, sign in just as a test.
5. Next comes the real powerful part. We need to create a new “userscript” which will add advanced functionality over what a normal browser experience provides. We do this by clicking on the Userscripts menu and then selecting “New Userscripts…”, or you can use Cmd-Option-N if you are a keyboard shortcut lover like me. Type in a meaningful name, I used WebIM, and then a new script editor opens. Paste the following code into the window replacing what was there already and then save and close the script editor.
   1. // ==UserScript==
   2. // @name        WebIM
   3. // @namespace   http://www.jeremyjohnstone.com
   4. // @description Enables advanced notifications and disables ads
   5. // @include     *
   6. // @author      Jeremy Johnstone
   7. // ==/UserScript==
   8.  
   9. (function () {
   10.     if (window.fluid) {
   11.                         // unread is a bit of misnomer, because we clear this
   12.                         // as soon as the window regains focus, not when you
   13.                         // actually read the IM (TODO: telepathy enabled?)
   14.                         var unreadIMCount = 0;
   15.                        
   16.                         // store the state of the user being active
   17.                         var activeState = true;
   18.                        
   19.                         // I don’t want ads in my IM client
   20.                         window.showAd = function(locale) { }
   21.                        
   22.                         // When the window regains focus, clear the unread IM count
   23.                         // Also save the state for other functions
   24.                         window.onfocus = function() {
   25.                                 activeState = true;
   26.                                 unreadIMCount = 0;
   27.                                 window.fluid.dockBadge = “”;
   28.                         }
   29.                         window.onblur = function() {
   30.                                 activeState = false;
   31.                         }
   32.                        
   33.                         // disabling this turns off the normal new IM
   34.                         // notification (aka the scrolling title message)
   35.                         window.startNotify = function(msg) { }
   36.                
   37.                         // Here we latch into the advancedNotify which
   38.                         // splits out the yid from the msg separately
   39.                         window.advancedNotify = function(yid, msg) {
   40.                                 // We don’t want to show growl alerts if the
   41.                                 // user is active already
   42.                                 if(activeState) return;
   43.                                
   44.                                 msg = unescape(msg);
   45.                                 window.fluid.showGrowlNotification({
   46.                                         title: “New Message from: “ + yid,
   47.                                         description: msg,
   48.                                         priority: 1,
   49.                                         sticky: false,
   50.                                         identifier: null,
   51.                                         onclick: null
   52.                                 });
   53.                                
   54.                                 // Now we increment the unread IM count and then
   55.                                 // set the dockBadge to be the number of unseen IMs
   56.                                 unreadIMCount++;
   57.                                 window.fluid.dockBadge = unreadIMCount;
   58.                         }       
   59.                        
   60.                         // Instead of blowing away the cookies going to login,
   61.                         // Let’s just close the app instead
   62.                         window.exit = function(url) {
   63.                                 // seems neither of these work… hmmm..
   64.                                 // fluid bug???
   65.                                 window.fluid.terminate();
   66.                                 window.fluid.hide();
   67.                         }
   68.     }
   69. })();
6. Finally, not sure this is needed, but I found it easiest to quit the app and restart it as that way you know for sure your script got loaded right. Probably not needed, but always safer. Also check the Userscripts menu and you should see a menu option for your new script. Make sure there is a check mark next to it. If so, go ahead and sign in as usual.

That’s it! You now have a new Web Messenger client inside it’s own browser tab with the following new features:

• Growl Notifications for IMs received when the app isn’t in focus
• Dock Badge updates with the count of unread IMs received
• No advertising banners shown

My hope is that I can get the author of Fluid to add a couple more improvements which will make it even better as well as hopefully fix what I think is a bug with hide() and terminate() not working. With dock icon bouncing and a separate cookie jar for each application this will be immensely useful, IMHO.

Here’s a little video tutorial taking you through the steps above.

Enjoy!

-Jeremy