Greasemonkey Script: Gmail and Reader Integrator

Friday, Nov 3rd, 2006
Comments
98c71549d280d7f0af91f08e995aa1d7 Del.icio.us
Update on 6th August 2008

This script does not work with the new version of Gmail and due to misc. commitments, I am not able to devote effort and time to improve this script (as much as I would like to). For similar functionality and more, please take a look at LifeHacker’s Better Gmail 2 Firefox extension.

Thank you once again for the overwhelming response!

Update on 11th November 2006

Previously, if your default start-page in “Settings” was “Home”, it was redirected to “All”. This has now been modified such that no redirection occurs, and “Home” is displayed.

Thanks to David for pointing this out. Download the updated script.

Update on 9th November 2006

There is a programming bug, specifically a variable name error on Line 304 in the script. The variable name for the Google Reader shared items URL should be READER_BROADCAST_URL and NOT READER_SHARED_URL. Sorry for the mistake! Download the updated script, again.

Update on 6th November 2006

I removed the Reader view when “Contacts” link is clicked as it “damages” the interface. Download the updated script. No other changes to the rest of the script logic.

The Short Story

I wrote a Greasemonkey script that integrates Gmail with Google Reader.

Features

  • Spilt-window view of Gmail and Reader on a single page
  • Links to collapse|expand either Gmail or Reader
  • Integrated Reader uses start-page as specified in Reader’s “Settings”
  • Labels selector
  • Key ‘v’ to open Reader links in a new Window
  • Automatic resize of Gmail and Reader views

Requirements

Installation Instructions

  1. Install Greasemonkey Extension
  2. Click on THE SCRIPT (gmailreaderintegrator.user.js)
  3. Click “Install”
  4. Open Gmail and ENJOY!

Screenshots

GR_1.jpg GR_2.jpg
GR_3.jpg GR_4.jpg

The Not-So-Short Story

Recently when Google reintroduced Google Reader with a new look, new features and improved usability, they marketed it as the “Inbox for the Web”. Immediately, the word “inbox” associates the Reader to emails, and Chris Wetherell - Google Reader Engineer, explained that using the Reader to obtain the latest updates of your favourite websites is similar to reading your emails. You just wait for the updates to be sent to your inbox.

Within the same day, the Reader created a huge buzz and I gave it a try. Previously, I wasn’t accustomed to the not-so-intuitive interface of the historical version and so chose to use Rojo as my RSS aggregator instead. But after exploring the new Reader, I was excited about the changes which Google introduced and have started using it as my default RSS reader.

Then, I found this Greasemonkey script by Mihai Parparita, from a post in Lifehacker, which embeds the Reader into Gmail. This makes perfect sense! They both are inboxes and ideally, they should belong on the same page. Moreover, I use Gmail frequently at work and the interface integration is an amazing productivity hack.

However, I felt that it wasn’t adequate for my use, and that my wish-functionalities were similar to comments left on Mihai’s Blog and Lifehacker. Therefore, I decided to write my own script to integrate Gmail and Google Reader; even though I have never written a Greasmonkey script before.

By examining Mihai’s code, I was able to learn and understand how a Greasemonkey script is written with Javascript. Then, I took about 1.5 weeks to complete coding my version of the Gmail and Reader Integrator, with a list of features that brought more functionalities to the integration. Importantly, I should bring to attention that I reused certain functions written by Mihai for convenience, and I acknowledged these functions clearly in my script. Thank you Mihai for the inspiration and wonderful code.

Lastly, please do report any bugs encountered or feedback any suggestions for possible improvements. I hope that you would find my Gmail and Reader Integrator script useful, as much as I do.

Bookmark & Share
Subscribe to Winstonyw

Blog Design + Layout Explained

Sunday, Jul 9th, 2006
Comments
60cab65624edf21f29b8be57ca998b15 Del.icio.us
Update on 6th August 2008

The blog design as described in the post below is now history, and can be seen here.

As a second post, I believe it is only appropriate to describe the site design, layout and several items which you may be unfamiliar with, or are not commonly seen in normal blogspot or livejournal blogs that work with just a few clicks of the mouse.

Firstly, the original design of this blog is credited to theundersigned, who have also created several other wordpress template designs. After a week of endless PHP and CSS re-coding, I have successfully modified the original design and layout, and added several “features” to achieve the current state.

The layout is basically separated into 3 major segments:

  • Top: Navigation
  • Middle: Primary Content
  • Bottom: Secondary Content

Navigation

As the name suggests, you navigate the blog with the links.

Primary Content

On the index page, you see 2 columns. The larger column contains the content of the LATEST POST, while the smaller column contains information about the other latest activities on the blog, such as the “Latest Posts” and “Latest Comments”.

That was quite intuitive, but did you notice several icons at the end of the LATEST POST? If you know what they are, you may skip this paragraph. Those icons are known as “Social Links”. Basically what it does, if you click on any of the icons, is that it would post (or bookmark) the article which you were reading to the corresponding bookmarking and social-sharing site, such as digg or del.icio.us. That is, of course, assuming you already have a registered account under one of those sites. Anyway, this makes it really convenient for anyone who would like to bookmark certain articles for future references.

Another feature associated to each article is “Tags”. With the proliferation of Web 2.0 methodologies, it is no longer adequate to file articles under categories only. For easier search and archival purposes, it is best to associate tags to the articles as well, so that there exists a more descriptive record for the article rather than just a broad category name, and vieweres would also be able to gauge, at a glance, the content an article entails.

Secondary Content

In this area, you would find not-so-important information.

Again, this area is divided into 2 columns. The larger column contains excerpts of the earlier posts, my digg and del.icio.us links, and photos from my Flickr. The smaller column mainly contains archival information, based on timeline, categories and tags.

As the name suggests, excerpts are short snippets of a post. To be exact, the excerpts shown on my blog contains 120 words, with HTML stripped. To read the entire content of the post, click on title of the post and you would be directed to another page.

What are “my digg and del.icio.us links”? These are 2 websites I visit daily. For interesting news or sites featured on digg, del.icio.us, or discovered by myself, I would bookmark them in either digg or del.icio.us and they would be displayed on my blog as links. So in a nutshell, you would be able to see the latest headline which caught my attention. Check out the Remove-Windows Genuine Advantage links I have which saved quite a lot of people.

As for the other items found in the “Secondary Content” area, they should be quite self-explanatory.

I hope you found this description of the site layout helpful, and that it cleared most of your doubts as to what certain things were? Basically, I have chosen to present, in my blog, information which I appreciated for their significance in making this blog look “fresh” and I hope you would as well. Suppose I do not have any posts, then check out the latest comments or even the latest links I discovered.

Bookmark & Share
Subscribe to Winstonyw

Official Launch

Monday, Jul 3rd, 2006
Comments
09f6cb212c61d78c145a4e5f3c3871e5 Del.icio.us

Aloha!! This day marks the beginning of “The Next Phase”, a new blog that celebrates the end (for at least a few years) of my education and the start of another stage in life. Purposefully, today is also the 1st day of my career in a MNC far, far away from my residence.

Do update your links as I wouldn’t be updating the old blog anymore, and that would just be left to rot in cyberspace. Knowing me, you might ask if this blog would last? I wonder.. Most probably I would only be able to blog with the time I have left after deducting work, travel, eat and sleep from 24 hours a day? Oooh.. That’s like 5min left per day..

This should be enough for a starter post and I took 5min.

I’ll blog more when I have more to blog. I WILL!!

Bookmark & Share
Subscribe to Winstonyw
Winston{YW} Copyright © 2008
Powered By Wordpress, JQuery and A Lazy Search Monkey