Friday, February 10, 2006 Image Focuser (Greasemonkey Userscript)

My ImageVenue Userscript

I have been annoyed by the junk they surround an image with when viewing an image at In the past I created a series of "site specific stylesheets", which look something like this:

@-moz-document domain( {
  .adHeadline {display: none;}
  #mbtb {display: none;}
  IFRAME {display: none ! important;}
  BODY > P > FONT {display: none ! important;}
  BODY > BR {display: none ! important;}
  P { margin: 0 ! important; }

This was over a long time, but it still had issues. First was that I was still loading the IFRAME, then I realised that I could simply use Adblock (Addons @ Mozilla homepage) to block the IFRAME.

Second, was trying to stop the page from scaling large images to a maximum width of 720 pixels. Hey, I have a 21" monitor, I have no problem displaying anything larger than 720 pixels. The scaling was happening in a JavaScript (JS) function that was attached to the images 'onLoad' event, meaning it would scale after the image has loaded. This means you get the annoying effect of viewing the image as it downloads in it's normal resolution, then it abruptly scales and stuffs you around!!

So I tried to make a Greasemonkey (GM) "Userscript" that would use the scale function again to return it to normal resolution. Since I am new to Greasemonkey, this took a little bit of getting used to.

  1. I tried calling the scaleImg() function in the Userscript. No dice, since the Firefox JS console reported that I don't have access to the function (I later read that you need to use specific GM API calls to work in the page's "sandbox" to get to its JS functions).
  2. Tried copy-n-pasting the scaleImg() code directly into my Userscript so sandboxing isn't an issue. Didn't work, as a variable saved for later was needed (the original width of the image), but I didn't have access to that.
  3. Using Firefox's Document Inspector, I discovered that I can get to the original width by accessing its "naturalWidth" DOM property. This still didn't work.
  4. I then found out I needed to run my code after the scaling function has been run from the onLoad event. Using the Tip from the GM Authoring page, I used:
    window.addEventListener("load", function(e) {
      what = document.getElementById('thepic');
    }, false);
    This worked!! Though I then realised...
  5. That I could just "view" the plain image by changing the browser location to the image!! (redirection)
    what = document.getElementById('thepic');
    document.location = what.src;
    GM scripts run after a page has downloaded, but before any onLoad events have occurred. This means that my code is called before the image is downloaded (and maybe before it starts downloading).

So, it turned out to be dead simple, why didn't I think of that Before!!!!


Anonymous said...

I'm not sure if it's a known issue, but this script seems to break backward navigation (i.e. pressing backspace after viewing a picture sends you right back to the image). I know that this behavior is technically correct, but it does force one to use the back arrow on the toolbar to get back to the referring page. At any rate, thanks for the script :).

Anonymous said...

wow, thanks for this really useful script.

Do you know know how I can make this work with the "Linky" extension?

Anonymous said...

I wonder if you could make similar script working with Opera browser. That would be great! :)

Archimedes Trajano said...

Though the script does work when browsing one image at the time, you cannot use a download manager to perform a mass download on the site.

The only way to do this I think is to go through each link open it up and then process it. Which is very slow.

Anonymous said...

Works good with one image at a time. If multiple images load in tabs at the same time only the first image gets the desired treatment, the others are still embedded in their HTML... although I have no idea why.

Anonymous said...

Hm. I was a bit trigger happy with my previous comment. It appears parallel loading works *mostly*. However, if I click on 6 imagevenue links quickly, opening each in a new tab (background), there will always be one or two where the script does not work. Strange...

BlueMM said...

Yeah, you occasionally see that with ImageVenue. If you don't have the Userscript active, and open many image links into tabs, some of those will get a "not found" page.

You can usually do a Ctrl+F5 (Force Reload) to get the proper page. Other times you have to hit back before reload, or click the picture link from the webpage it came from.

I think ImageVenue does this to stop people using some kind of automatic spider for downloading.

BTW, I haven't worked out a way to stop breaking the Back navigation yet (you have to go back 2 steps). Basically need a way to redirect (after we know where the pic is), not open another location (the pic). But this way, a mass-tab downloader like Magpie (see my post on Magpie)

Anonymous said...

Beautiful. Thank you so much!