[Tampermonkey Script] Enhanced Gallery View

Hey there, not sure where to post this, but I wrote a Tampermonkey script to enhance the gallery view a little for ease of quick browsing and figured somebody else might like using it.

On hover of any image container in the gallery, it shows two buttons:

• Magnifying glass:

Gets the source for the requested element and opens a preview.
It also provides a download button underneath.
There are two behaviors based on media type:
Images: Inline the original image
Gifs/Video: Grab the source and inline it
Clicking outside of the preview or hitting the Escape button closes the preview again.

• Arrow pointing down:

Download the original image or media source file

I built it for modern browsers in mind as I don't provide any fallback logic for older browsers.

The way the script works is it simply follows the post URL for the selected image/video, scans the page for the correct source and returns that.
So if you have a slower internet connection, it might take a little to get there, but in almost all cases it shouldn't really get in the way.

Screenshots:
Icons in gallery view
Preview window

Script link:
https://pastebin.com/233W1uBX

Have a nice day!

Hello ! An error is raised in the function "getOrigSrcFromPostUrl" when you download a picture without the "view original" option.
Here is my improvement :

function getOrigSrcFromPostUrl(postUrl) {
return fetch(postUrl)
.then((response) => response.text())
.then((html) => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

const videoElem = doc.querySelector('video');
if (videoElem) {
return videoElem.src;
}

const viewOriginalLink = doc.querySelector('a.image-view-original-link');

if(viewOriginalLink) {
return viewOriginalLink.href;
}

const currentImage = doc.querySelector('#image');
return currentImage.src;
})
.catch((err) => console.error(err));
}