Media Download Assist Tampermonkey

tampermonkey.js

// ==UserScript==
// @name         Highlight and Download Media on sites
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Highlight and add a download button for images and videos on a webpage
// @author       Ron Egli <github.com/smugzombie>
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const minWidth = 200;  // Minimum width of the image/video
    const minHeight = 200; // Minimum height of the image/video

    function downloadBlob(url, filename) {
        fetch(url)
            .then(response => response.blob())
            .then(blob => {
                const blobUrl = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = blobUrl;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(blobUrl);
            })
            .catch(console.error);
    }

    function createDownloadButton(element, url) {
        const button = document.createElement('button');
        button.innerText = 'Download';
        button.style.position = 'absolute';
        button.style.top = '10px';
        button.style.right = '10px';
        button.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.padding = '5px';
        button.style.cursor = 'pointer';
        button.style.zIndex = 1000; // Ensure the button is on top
        button.addEventListener('click', function(event) {
            event.stopPropagation();
            console.log(`Downloading from URL: ${url}`);
            if (url.startsWith('blob:')) {
                downloadBlob(url, element.alt || element.src || element.currentSrc || 'download');
            } else {
                const a = document.createElement('a');
                a.target = '_blank';
                a.href = url;
                a.download = '';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        });
        return button;
    }

    function highlightMedia(element) {
        if (element.dataset.highlighted) return; // Skip if already highlighted

        element.style.position = 'relative';

        const url = element.src || element.currentSrc;
        if (url) {
            const downloadButton = createDownloadButton(element, url);
            element.parentElement.style.position = 'relative';
            element.parentElement.appendChild(downloadButton);
            element.dataset.highlighted = true; // Mark as highlighted

            // Remove highlight border
            element.style.border = 'none';
        }
    }

    function checkAndHighlightMedia() {
        const images = document.querySelectorAll('img');
        const videos = document.querySelectorAll('video');

        images.forEach(img => {
            if (img.naturalWidth >= minWidth && img.naturalHeight >= minHeight) {
                highlightMedia(img);
            }
        });

        videos.forEach(video => {
            if (video.videoWidth >= minWidth && video.videoHeight >= minHeight) {
                highlightMedia(video);
            }
        });
    }

    let observer = new MutationObserver(checkAndHighlightMedia);
    observer.observe(document.body, { childList: true, subtree: true });

    window.addEventListener('load', checkAndHighlightMedia);
    document.addEventListener('scroll', checkAndHighlightMedia);
})();