Hack 43. Show Image Information | Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox

< Day Day Up >

Generate a report of all the images on a page.

Here's a feature I've always wanted and never found in a browser: the ability to generate a report that shows all possible information about all the images on a page. It would be extremely helpful in debugging my own complex web pages, and it's just generally useful and fun to get to see a different view of the images that constitute someone else's site. Firefox sort of does this, in the Media tab of the Page Info dialog. But it's unwieldy to use for complex pages, since it only shows you the URL and type of each image, not the image itself.

5.5.1. The Code

This user script runs on all web pages. The code is divided into three parts:

Create the link that the user clicks to generate and display the image report. This is positioned in the lower-left corner of the screen with position: fixed, so it will remain anchored there even if the user scrolls the page.
Once the user clicks the "Image report" link, cycle through all the images (using the document.images collection) and gather the information on each image by using a combination of the image's attributes (alt, title, src) and the image's style (by calling the getComputedStyle function).
This is the really magical part. Instead of trying to display the report on the original page (which might react badly with the page's style or layout), this script generates a data: URL that contains the complete HTML source of the report and sets the window location to the data: URL. This creates the illusion of following a link to a separate report page, which seems normal enough until you realize that the report page isn't generated by or stored on a remote server. Everything is done entirely on the end user's machine.

data: URLs are defined in RFC 2397, available online at http://www.ietf.org/rfc/rfc2397.

Save the following user script as showimageinformation.user.js:

 // ==UserScript== // @name Show Image Information // @namespace http://diveintomark.org/projects/greasemonkey/ // @description display information on all images on a page // @include http://* // ==/UserScript== var elmWrapper = document.createElement('div'); elmWrapper.innerHTML = '<div style="position: fixed; bottom: 0; ' + 'left: 0; padding: 1px 4px 3px 4px; background-color: #ddd; ' + 'color: #000; border-top: 1px solid #bbb; border-left: 1px ' + 'solid #bbb; font-family: sans-serif; font-size: x-small;">' + '<a href="#" title="Display report of all images on this page" ' + ' style="background-color: transparent; ' +  'color: black; font-size: x-small; font-family: sans-serif; ' + 'text-decoration: none;">Image report</a></div>'; document.body.append(elmWrapper); document.getElementById('displayinfo').addEventListener( 'click', function(event) { var html = '<html><head><title>' + document.title + '</title></head><body>'; var oImages = new Object(); for (var i = 0; i < document.images.length; i++) { var elmImage = document.images[i]; var urlSrc = elmImage.src || ''; if (!urlSrc) { continue; } if (oImages[urlSrc]) { continue; } oImages[urlSrc] = 1; var style = getComputedStyle(elmImage, ''); var iWidth = parseInt(style.width); var iHeight = parseInt(style.height); var sTitle = elmImage.title || ''; var sAlt = elmImage.alt || ''; var urlLongdesc = elmImage.longdesc || ''; html += '<p><img width="' + iWidth + '" height="' + iHeight + '" src="/books/4/281/1/html/2/' + urlSrc + '"></p><table border="1" ' + 'cellpadding="3" cellspacing="0"><tr><th>src</th><td>' + '<a href="' + urlSrc + '">' + urlSrc + '</a></td></tr>' + '<tr><th>width</th><td>' + iWidth + '</td></tr>' +  '<tr><th>height</th><td>' + iHeight + '</td></tr>'; if (sTitle) { html += '<tr><th>title</th><td>' + sTitle + '</td></tr>'; } if (sAlt) { html += '<tr><th>alt</th><td>' + sAlt + '</td></tr>'; } if (urlLongdesc) { html += '<tr><th>longdesc</th><td><a href="' + urlLongdesc + '">' + urlLongdesc + '</a></td></tr>'; } html += '</table><br><hr>'; } html += '</body></html>'; GM_openInTab('data:text/html,' + html); event.preventDefault(); }, true);

5.5.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.oreilly.com. In the bottom-left corner of the screen, you will see a link titled "Image report," as shown in Figure 5-6.

Click the small "Image report" link in the lower-left corner of your browser window, and you will see an autogenerated report of all the images on the page, as shown in Figure 5-7.

Figure 5-6. O'Reilly home page with "Image report" button

Figure 5-7. O'Reilly home page image report

The report includes the source URL of each image, the image's dimensions, and the image's alternate text and title (if defined). You can click any image URL to see that image in isolation.

< Day Day Up >