javascript - Greasemonkey 脚本重写并附加到特定 URL？

Question

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

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

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

页面上有多种类型的链接，因此需要替换特定的 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 链接 (这可以从 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>