Sunday 10 September 2006 — This is 18 years old. Be careful.
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: