O'Reilly logo

Greasemonkey Hacks by Mark Pilgrim

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required