Greasemonkey 脚本重写和附加到特定的 URL？

Question

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

当您右键单击/保存（文件另存为 content.jpg）时，该网站不会正确地将有关图像的信息发送到浏览器，但他们有一个下载链接，可以将文件名正确发送到浏览器（它所做的只是将&dl=1 附加到 URL 的末尾）

我找到了一些示例代码，并对其进行了修改以执行我需要的 img src 更改，但在附加到链接 href 时遇到问题。

页面上的链接类型很多，因此需要特定的 URL 替换：

整个页面的可点击链接（请勿触摸）：
example.com/view/UNIQUEID

图片来源（低分辨率）：example.com/subdir/preview?page=UNIQUEID

图片来源（原始资源）：example.com/subdir/content?page=UNIQUEID

我只希望将图像源从content/preview更改为content/content以在浏览器中显示全分辨率图像，但还要添加一个href链接（这可以从img src复制为其相同的链接，但也可以在它的末尾附加一些东西而不影响任何其他链接。）

这是我目前所拥有的用于替换特定 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 链接的末尾？

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>

Answer 1

这个问题几乎是重复的：How to relink/delink image URLs to point to the full image?

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

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

在你的情况下，这样的代码应该可以工作：

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>