Greasemonkey script to Rewrite and Append to specific URLs?

Question

I'm trying to modify specific images as the site displays a lower resolution file than the original, and also replace the link href for that image -- appending something to the end of that link to make it downloadable.

The website in particular, does not properly send the information about the image to the browser when you right click/save (file saves as content.jpg), but they have a download link which does properly send the filename to the browser (All it does is append &dl=1 to the end of the URL)

I have found some example code, and modified it to do the img src changes I require, but am having issues appending to the link href.

There are many types of links on the page so specific URL replacement is required:

Clickable Links all over page (Don't touch):
example.com/view/UNIQUEID

Image Src (Low Res): example.com/subdir/preview?page=UNIQUEID

Image Src (Original Res): example.com/subdir/content?page=UNIQUEID

I only wish to change the image sources from content/preview to content/content to display the full resolution image in the browser, but also add an href link (this can be copied from the img src as its the same link, but also append something to the end of it without affecting any other links.)

Here's what I have so far which works for replacing the specific img src:

image = document.getElementsByTagName("img");
for (i = 0; i < image.length; i++) if (image[i].parentNode.href) {

    //Remove onclick attribute, cancelling their own Image Viewer
    image[i].parentNode.removeAttribute('onclick'); 

    //Replace regular sized preview image, with the full sized image
    image[i].src = image[i].src.replace('example.com/subdir/preview?page=','example.com/subdir/content?page=');

    image[i].parentNode.removeAttribute('width');
    image[i].parentNode.removeAttribute('height');  
}

Now I've found that adding

image[i].parentNode.href = image[i].src + '&dl=1';

at the end of my current script works. But it affects every image, so it breaks a lot of other things.

Any suggestions to simply append &dl=1 to the end of the now replaced 'subdir/content?page=UNIQUEID' href links?

TLDR:
Looking to change:

<a href="http://example.com/subdir/content?page=12345" onclick="imageviewer.open(); return false;">
  <img src="http://example.com/subdir/preview?page=12345&filename=this+is+the+filename.jpg">
</a>

into:

<a href="http://example.com/subdir/content?page=12345&dl=1">
  <img src="http://example.com/subdir/content?page=12345&filename=this+is+the+filename.jpg">
</a>

Answer 1

This question is almost a duplicate of: How to relink/delink image URLs to point to the full image?

The trick is to use querySelectorAll() (or jQuery) to fine-tune which images are processed.

Also, I recommend not changing the image source (keeps page fast and saves bandwidth), but just rewriting the link. Once the link is rewritten, you can right-click to save larger versions of just the pics you are interested in. Or, you can then use the excellent DownThemAll extension to bulk download images by link.

In your case, code like this should work:

var thumbImgs   = document.querySelectorAll ("a > img[src*='subdir/preview?']");

for (var J = thumbImgs.length-1;  J >= 0;  --J) {
    var img     = thumbImgs[J];
    var link    = img.parentNode;

    var lnkTarg = link.href + "&dl=1";
    link.href   = lnkTarg;
    link.removeAttribute ('onclick'); 

    //-- Not recommnded to change thumbnail...
    //var imgTarg = img.src.replace (/\/preview/, "/content");
    //img.src     = imgTarg;
}

<a href="http://example.com/subdir/content?page=12345" onclick="alert('I shouldn\'t fire on click!'); return false;">
    <img alt="Target img 1" src="http://example.com/subdir/preview?page=12345&filename=filename_1.jpg">
</a><br>
<a href="http://example.com/subdir/content?page=aaa" onclick="alert('I shouldn\'t fire on click!'); return false;">
    <img alt="Target img 2" src="http://example.com/subdir/preview?page=aaa&filename=filename_2.jpg">
</a><br>
<a href="http://example.com/some/random/link" onclick="alert('I should still fire on click!'); return false;">
    alt="Img shouldn't be altered" <img src="http://example.com/some/random/image.jpg">
</a>