用于重写和附加到特定 URL 的 Greasemonkey 脚本?

Greasemonkey script to Rewrite and Append to specific URLs?

我正在尝试修改特定图像,因为网站显示的文件分辨率低于原始文件,并且还替换了该图像的 link href -- 在末尾附加了一些内容link 使其可下载。

特别是该网站,当您正确 click/save 时,它不会正确地将有关图像的信息发送到浏览器(文件另存为 content.jpg),但他们有一个下载 link 正确地将文件名发送到浏览器(它所做的只是将 &dl=1 附加到 URL 的末尾)

我找到了一些示例代码,并对其进行了修改以执行我需要的 img src 更改,但是在附加到 link href.[=21= 时遇到了问题]

页面上有许多类型的 link,因此需要特定 URL 替换:

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

我只想将图像源从 content/preview 更改为 content/content 以在浏览器中显示全分辨率图像,同时添加一个 href link(可以复制来自 img src,因为它是相同的 link,但还在其末尾附加一些内容而不影响任何其他 links。)

这是我目前所拥有的用于替换特定 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');  
}

现在我发现添加

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

在我当前脚本的末尾有效。但它会影响每一个图像,所以它会破坏很多其他东西。

任何简单地将 &dl=1 附加到现在替换的 'subdir/content?page=UNIQUEID' href links 末尾的建议?

TLDR:
希望改变:

<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>

进入:

<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>

这个问题几乎与以下问题重复:How to relink/delink image URLs to point to the full image?

诀窍是使用querySelectorAll()(或jQuery)微调要处理的图像。

此外,我建议不要更改图像源(保持页面快速并节省带宽),而只是重写 link。重写 link 后,您可以右键单击以保存您感兴趣的图片的放大版本。或者,您可以使用 the excellent DownThemAll extension 通过 link 批量下载图片。

对于您的情况,像这样的代码应该可以工作:

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>