Monday, April 14, 2008
Making Google Reader for Fluid
Okay here is the setup: Google Reader is ugly, but it works great as an online RSS newsreader. So what if I used Fluid.app to create a standalone Mac app and replace my desktop newsreader.
Okay, that was easy. But it didn’t solve the problem that Google Reader is still really UGLY!
After some quick research I find Jon Hicks’ excellent gReader theme for Google Reader. But the recommended method of replacing the stylesheet using SafariStand won’t work with Fluid. Okay, no problem, Fluid supports Userscripts, so I just create a Javascript to call the stylesheet from my server.
Shazaam! The technology of Google Reader minus one craptacular design.
But that wasn’t enough for me. I wanted Google Reader to look more like my preferred desktop newsreader Newsfire.
“Why,” you may ask, “do I not just use Newsfire?” I have for years. I love it. Both elegant and useful. But I want to read my news on multiple Mac’s or on my iPhone. Syncing just isn’t a feature of Newsfire. Plus I occasionally want to share my favorite articles or feeds with others.
So this weekend I began a very ill advised attempt to customize a version of the gReader theme to work with Fluid and feel a little bit more like a native Mac app. After days of hacking and reverse engineering Google’s code, I had to quit before I lost the rest of my hair and drove myself nuts.
The result of my efforts is an evolved version of gReader for Fluid that works pretty good. There are still plenty of visual and interface bugs, but the bulk of day-to-day newsreading seems to work without a hitch.
The problem is Google Reader is constantly changing the DOM depending on the action. You can’t just view source and find a style, the only way to track down a style is to view every element in X-Ray and figure out what is going on, then add your new style to override it. It is long, frustrating and tedious work.
I have to say Mr. Hicks has done an amazing job! He is a much more patient man than I, going through over 4,000 lines of Google’s code to find the 1,100 or so that mattered. I only added about 400 lines of code to tweak the appearance for Fluid, most of which are brute force hacks to override styles. I tip my hat to you sir. Well done.
Over the course of the weekend, as things became harder and harder to tweak, I kept asking myself do I keep moving forward? should I keep hacking on it?
At some point in the middle of the night last night I realized it would be easier to just build an online newsreader from scratch, one that works great, but also looks great. One that supports user-defined stylesheets so if you don’t like the look of your newsreader you can customize to suit, like Mr. Hicks has. (You can read more about that epiphany here.)
But for those who want to use Google Reader in Fluid, here you go. All you need to do is create a Google Reader Site Specific Browser (SSB), travel to this page and click this link.
This should install the Userscript to Fluid. Just select it from the Userscript menu and reload the browser, that’s it. (If you just want to run the normal version of gReader, click this link. If it doesn’t install it automagically, then just create a new Userscript in Fluid and cut and paste the above Javascript and Save.)
Or if you would like to call it locally, modify the styles or improve on what I was able to do, go ahead and download the source.
Download the source for gReader for Fluid.
Special thanks to Todd Ditchendorf for making Fluid, Jon Hicks for enduring to make gReader and David Watanabe for making Newsfire which I still think is the best newsreader out there (and is also now free BTW).
For feedback and general comments, go to http://flingmedia.com/contact/