Greasemonkey Hacks

Hack #43. Show Image Information

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.

The Code

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

1. 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.

2. 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).

3. 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