Update on 12/23/2005: The script has been updated to be compatible with Firefox 1.5. See this entry for more information.

Update on 8/28/2005: A bug that prevented the bubble from working correctly once a a conversation had been archived or trashed has been fixed. Please reinstall the script to use this updated version.

Short Version

Want preview bubbles for conversations in Gmail, as shown in the screenshot on the left? Then install the Gmail Conversation PreviewGreasemonkey script. You can then right-click on any conversation to see its recent messages in a preview bubble. Greasemonkey 0.5 is required. Should work in Greasemonkey 0.3.5 or 0.5 (neither one has the security issues that plagued earlier versions).

Full Story

One of the things touted by the upcoming Yahoo Mail and Hotmail releases is that they will have a preview/reading pane which will let you see message contents at a glance without having to navigate to an entirely new view. Gmail offers a lightweight version of this already, by showing the first hundred or so characters of each message as a snippet next to the subject. While this is handy for one-liner emails, a full-blown preview pane is often more appropriate.

Given my past experiences with Gmail and Greasemonkey, I figured that adding a preview area to Gmail may just be possible. Ignoring the technical aspects, the first issue was deciding what it should look like. My main issue with traditional preview panes is that they take up a lot of room, even when they aren't needed. Eventually, I was inspired by Google Map's bubbles and decided to try that approach.

I initially triggered the bubbles on mouse hovering, but that was not a good fit: fetching the entire conversation is a heavy-weight operation with some latency while data that appears on hover should be light-weight and display instantaneously. I then tried inserting a small magnifying glass icon within each conversation row that when clicked showed the bubble. However, the icon was too small and hard to click on (Fitts' law and all that). I then considered a keyboard modifier plus mouse click as a trigger, but that seemed like too much effort on the part of the user. In the end, attaching it to right-click seemed like the best choice. Since Gmail doesn't use real links, the contextual menu triggered by the right mouse button is mostly useless, thus overriding it seemed like an acceptable tradeoff. Furthermore, this trigger means that the user does not have to take his/her hand off the mouse. To also facilitate those who use Gmail's many keyboard shortcuts, the V key was made to toggle the preview bubble for the current conversation.

Integrating the preview bubble as smoothly as possible with the rest of the Gmail interface was also a challenge. Given a message ID, it's reasonably easy to fetch its contents (making a GET request for URLs of the form &view=cv&search=all&th=message-id&lvp=-1&cvp=2&qt=). However, message IDs are not stored in the DOM directly. Instead, it turns out we can leverage Gmail's communication scheme in order to get this information. As others have documented, Gmail receives data from the server in form of JavaScript snippets. Looking at the top of any conversation list's source, we can see that the D() function that receives data in turns calls a function P() in the frame where all the JavaScript resides. Since all data must pass through this global P() function, we can use Greasemonkey to hook into it. This is similar to the trap patching way of extending Classic Mac OS. Specifically, the Greasemonkey script gets a hold of the current P() function and replaces it with a version that first records relevant data in an internal array, and then calls the original function (so that Gmail operations are not affected). Once we have the list of conversations (including IDs) in hand, we can easily map it to its corresponding DOM nodes (each conversation's row has the ID w_message-id) and show the appropriate bubble.

The script also tries to do clever things by resizing the bubble so that it best fits the displayed messages. Since fetching a conversation implicitly marks it as read, a "Leave Unread" option is provided that actually does a POST request to the server with the appropriate mark as unread command (LiveHTTPHeaders is indispensable for figuring this out). To parse data from a fetched conversation, we grab the appropriate JavaScript text and eval() it while defining the appropriate D() function that extracts the data. In general, the script code is architected the script reasonably cleanly, with a PreviewBubble object with appropriate methods and comments for non-intuitive places, thus it should be ready to hacked on by other people.
There are still some rough edges, as well as some drawing bugs in Deer Park that may or may not be my fault. However, I have been using it for the past few weeks and it's very handy when going through lots of email quickly that needs to be read but not necessarily replied to.

(the usual) Disclaimer: I happen to work for Google. This script was produced without any internal knowledge of Gmail, and is not endorsed by Google in any way. If you have any problems with it, please contact only me.

76 Comments

Now that you have comments on, I can thank you for this!

This is, for me, hands down the best Greasemonkey script yet. It has changed the way I use Gmail, and I can't live without it.

This is quite awesome. I do in fact really like the fact that I can control the bubbles with either a right-click or a bubble. The only thing I did noticec was that if I click on any links in my Gmail window, the script stops working until I actually hit the refresh button. Other than that, this script is great.

Thank you for taking the time to read my email. First, thank you for the wonderful tools you have created. I am not able to preview messages when conducting a search in Gmail. Please reply and let me know if you will release a fix for this. Again, thanks for your time and consideration. Please reply to me via email. Thank you and Best Regards!

I've never been able to get this script to work. I use the customize google firefox extension, I don't know if this has anything to do with the problem or not though. Firefox 1.4.1 or 1.5 Beta 2. I've tried the script in the past with older versions as well.

Thanks for your time, and it looks like a great script and a nice addition, just wish I could try it.

This is an awesome script! Thank you. I edited it a bit to work better with All-in-one Gestures extension, because apparently all-in-one spawns the context menu even though this script should prevent it. I couldn't figure out how to make AIO stop, so all I did was change oncontextmenu to click on the even handlers and had it check for the middle mouse button. Then the cancel of the paste event works ok (this is on linux, with the default behavior to paste a url into the tab).

The thing though is that once you switch conversation lists (ie, search, click on all mail, etc), it no longer works. I'm pretty sure its the same way using the script you posted without modifying it. Is that the intended behavior at this point?

This is an awesome script! Thank you. I edited it a bit to work better with All-in-one Gestures extension, because apparently all-in-one spawns the context menu even though this script should prevent it. I couldn't figure out how to make AIO stop, so all I did was change oncontextmenu to click on the even handlers and had it check for the middle mouse button. Then the cancel of the paste event works ok (this is on linux, with the default behavior to paste a url into the tab).

The thing though is that once you switch conversation lists (ie, search, click on all mail, etc), it no longer works. I'm pretty sure its the same way using the script you posted without modifying it. Is that the intended behavior at this point?

Suggestion for a future script: Let the user to decide to organize conversation(s) according to user. It would help organize ongoing collaborative projects. Of course, I have no idea if it is possible.

Can't get it to work, I have the delete button script installed and it seems to be the "bug" in the machine...should I uninstall the delete script then re-install this? I'm on FF 1.5 and GM whatever version is for 1.5 I just upgraded.

(darren | November 21, 2005 03:36 PMThis great script doesn't seem to work with Firefox 1.5 and Greasemonkey 0.6.4 ...//JohanPosted by: Johan | December 2, 2005 01:36 AMHaving the same trouble as Johan. All I'm getting is the context menu on right click. Any chance of an updated script coming out?)

some suggestions?? please mi mail es damian38@gmail.com the anothers scripts run ok , but the prewiw bubbles not, is because my firefox is in spanish?? help!!!!!

Wow! The best greasemonkey script ever! Very feature-rich! I'm noticing a couple of crashes for Firefox 1.5 just in the first few minutes of use. I'll report with more details, if I can.

As much as I love this script, a mouseover *option* would be very useful. I can see what you wouldn't want to have it as the only choice. But, it would allow for far quicker scanning of email if mouseover did exist.

I love your execution of this idea. The bubbles work great, as do the top line of options.

I hope your Gmail peers have taken notice of this at Google. It would amount to the best feature implementation yet, if they introduced it.

This is wonderful and worked about of the box on a G5 Mac with Firefox 1.5.0.1. I wonder though if it's possible to add a button or (double click the text) to either jump to the conversation itself (so one could do that and then hit r to reply), or even have a button to go right to a reply screen.

I cannot install GM 0.6.4 on Firefox 1.5.0.1 b/c it says "not compatible". This is very strange b/c I could get them all work on another Mac machine, using the same version of Firefox. Any thoughts?Thanks

I cannot install GM 0.6.4 on Firefox 1.5.0.1 b/c it says "not compatible". This is very strange b/c I could get them all work on another Mac machine, using the same version of Firefox. Any thoughts?Thanks

Using Firefox 1.5.0.1 and Greasemonkey 0.6.4. The preview works great. The "Archive" button doesn't seem to work though. When I right click the message, the message does get selected, but I click on archive, the bubble goes away, and nothing happens.

Wow, super cool idea. Works for me with GM 0.6.4, FF 1.5.0.1, Mac OS X, except the right click brings up both the preview bubble AND the context menu. How do I keep it from bringing up the context menu?

It would be nice if long text in the bubble can be scrolled by keyboard, like the rest of the Gmail which can be scrolled by arrows, space bar, page up/down and home/end. Right now, press any of those keys just switch the bubble off.

Is there a way to make it work on my google homepage? I use that as my startup page and it would be so nice to just right-click over it to view emails. Greasemonkey script doesn't seem to work there, even though I added it as a page.

Hi, this script is awesome. I installed it yesterday night. I love it. I noticed a small bug, today morning. I got two new email in gmail inbox, so without refreshing the screen, I clicked on the 1st unread mail to get a preview, i got preview of the latest read mail. (i.e the mail that is after these two new email.) after refreshing the screen, it worked fine.

It seems that this script breaks the Contacts functionality in the new Gmail interface, which is why people are having to uninstall the Better Gmail plug-in. I did some trial and error, and the only way I could access my Contacts page was if I uninstalled the Preview plug-in. I hope you can update it soon, since I certainly don't want to have to live without it! It's an incredibly useful and thoughtfully designed plug-in!

This is regarding Damian B.'s comment -- about how the preview plug-in seems to break the CONTACTS functionality in Firefox.

I concur, that this is indeed causing the same problem for me. Now I really love this plug-in, and would hate to stop its use. I really hope the issue can be resolved in a future update to the product.

I've installed it (through the BetterGmail package, but also individually) and it doesn't seem to work.

When I right-click on conversation, I see the bubble and inside it says 'loading...' and remains so forever. The actual contents of the conversation never show up. Did anyone encounter this? Using: FF2.0 plus BetterGmail 1.0 and a couple of other FF modules. I use Gmail old version.

I also have installed the Bubble preview. I have Firefox 2.0.0.12 and the latest Greasemonkey and the script doesn't work for me. It just hangs at "Loading..." and never loads the bubble with a preview.Thanks in advance for any help you can offer.

However, message IDs are not stored in the DOM directly. Instead, it turns out we can leverage Gmail's communication scheme in order to get this information.

Hi, it seems that Gmail renamed its functions, and top.js.P is no longer the function through which all data is routed (or even a function). How can one find out the right function, or just find the message IDs?