Gmail Image Viewer

• Download Windows installer - 53.8 Kb (w/ uninstall)
• Download source - 2.44 Kb

Introduction

The purpose of this little script was to make viewing emails with images in Gmail a bit faster. When installed using the installer, this program will add a "Gmail Image Viewer" items to the context-menu of your Internet Explorer. When selecting this menu-item while viewing a Gmail message that has image attachments, the script will run and will inline all the images in the message, so you don't have to click each image in order to view it.

Background

The code is rooted in its ability to add an item to IE's context menu. This is done by adding a new registry key under HKCU\Software\Microsoft\Internet Explorer\MenuExt\. The registry key's name will be the name of the new context menu item, and the default value points to an HTML file that will be parsed when the user clicks the menu item.

Understanding the code

Since the code is very small, I will present it (a version of it) here in full:

<script>
var w=window.external.menuArguments;
var l=w.document.links
var len=l.length
var re_v=/http...gmail.google.com.gmail.view=att.disp=inline/i
var re_d=/http...gmail.google.com.gmail.view=att.disp=attd/i
var no_context=
   'onclick="event.returnValue=false" oncontextmenu="event.returnValue=false"'
var c=0

//hide thumbnails
var re_i=/http...gmail.google.com.gmail.view=att.disp=thd/
var img=w.document.getElementsByTagName("IMG")
var len2=img.length
for (var i=0;i<len2;i++) {
    if (img[i].src.search(re_i)>-1) img[i].style.display='none'
}

for (var i=0;i<len;i++) {
    //search for "View" followed by "Download" 
    //link (let gmail do the dirty work for us)
    if ( l[i].href.search(re_v)>-1 && i+1<len && l[i+1].href.search(re_d)>-1 ) {
        l[++i].outerHTML=l[i].outerHTML+
            '<br><img src="'+l[i].href+'" '+ no_context +'><br>'
        c++
    }
}
w.status="Gmail Image Viewer ©2004 by Nir Levy (Found " + 
    "((!c)?"no":c) + " image" + ((c!=1)?"s":"") +")"
</script>

Access to the calling page is obtained by accessing the menuArguments element of the external object. The program then gets a list of all the links in the document and defines two regular expressions that correspond to the View and Download links in a Gmail message with attachments (hopefully they will not change their links scheme anytime soon :-).

The process then continues to loop over all the links in the document and search for a View link followed by a Download link. If a pair is found then the outerHTML of the Download link is appended with the <IMG SRC> link of the download. (A separate loop hides all thumbnails before replacing the links).

The onclick and oncontextmenu events for the images are removed because they crashed my computer (I am guessing it was because of an IE5.5/NT bug - worked fine on other platforms).

History

• 14^th-Dec-04: Released a new version of this script (version 1.0). This version hides the thumbnails and shows the full images inline. Thumbnails are nice, but full images are sometimes nicer :-).
• 25^th-Nov-04: The people at Google finally added this feature as a built-in option in Gmail. This makes my script rather redundant, but I will leave it here as a reference for future developers.

Further Reading

• Adding Entries to the Standard Context Menu (MSDN)
• The external DOM Object (MSDN)