Show image catalog Greasemonkey script

Sunday 10 September 2006

I’m a late-comer to the magic of Greasemonkey. It’s a powerful Firefox add-in that lets you run bits of JavaScript on pages. There are a ton of Greasemonkey scripts available, many designed to fix or add features to particular sites.

Here’s my first script: it provides a menu command to display a catalog of the images on a page. It can be very helpful for picking apart a page for debugging, for example. It’s kind of basic. For example, if the same image is used more than once on the page, it will be listed more than once.

It’s short:

// ==UserScript==
// @name          Image Catalog
// @namespace     http://nedbatchelder.com/
// @description   Shows a catalog of the images on a page.
// @include       http://*
// @include       https://*
// @include       file://*
// ==/UserScript==

GM_registerMenuCommand("Show image catalog", show_image_catalog);

function show_image_catalog() {
    var img_display = document.createElement("div");
    ihtml = "<div style='margin: 10px auto 0 auto; border-top: 2px dotted black; background-color: white;'>";

    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) {
        img = imgs[i];
        ihtml += "<div style='margin: 5px 10px'>";
        ihtml += "<img src='" + img.src + "'/>";
        ihtml += "<br/>";
        ihtml += "src = <a href='" + img.src + "'>" + img.src + "</a>";
        ihtml += "<br/>";
        ihtml += "width = " + img.width + ", height = " + img.height;
        if (img.width != img.naturalWidth || img.height != img.naturalHeight) {
            ihtml += ", <span style='color:red; font-weight: bold'>";
            ihtml += "naturalWidth = " + img.naturalWidth;
            ihtml += ", naturalHeight = " + img.naturalHeight;
            ihtml += "</span>";
        }
        ihtml += "</div>";
    }
    ihtml += "</div>";
    img_display.innerHTML = ihtml;
    document.body.insertBefore(img_display, null);
}

Here’s a direct link to the script: image_catalog.user.js. If you have Greasemonkey installed, clicking the link will install it.

Comments

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.