Universal Image Swapper Pro

Alt + Click to swap images. Auto-detects language.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Universal Image Swapper Pro
// @namespace    http://tampermonkey.net/
// @version      4.0
// @description  Alt + Click to swap images. Auto-detects language.
// @description:pt-BR Alt + Clique para trocar imagens.
// @author       Makatashi
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const DB_NAME = 'img_swap_db';
    const isPT = (navigator.language || navigator.userLanguage).startsWith('pt');

    const STRINGS = {
        title: isPT ? "Imagem Personalizada (Alt+Clique para editar)" : "Custom Image (Alt+Click to edit)",
        ask: isPT ? "URL da nova imagem (Deixe vazio para resetar):" : "New image URL (Leave empty to reset):"
    };

    let memory = JSON.parse(localStorage.getItem(DB_NAME) || '{}');

    const css = `
        .img-swapped-animation {
            animation: swapFlash 0.5s ease;
        }
        @keyframes swapFlash {
            0% { opacity: 0.5; filter: brightness(1.5); }
            100% { opacity: 1; filter: brightness(1); }
        }
    `;
    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    function updateStorage() {
        localStorage.setItem(DB_NAME, JSON.stringify(memory));
    }

    function applyVisuals(img, isCustom) {
        if (isCustom) {
            img.style.objectFit = 'cover';
            img.style.objectPosition = 'top center';
            img.title = STRINGS.title;
            img.classList.remove('img-swapped-animation');
            void img.offsetWidth;
            img.classList.add('img-swapped-animation');
        } else {
            img.title = '';
            img.style.objectFit = '';
            img.style.objectPosition = '';
        }
    }

    function processImage(img) {
        if (memory[img.src]) {
            if (img.getAttribute('data-og') !== img.src) {
                img.setAttribute('data-og', img.src);
            }
            img.src = memory[img.src];
            applyVisuals(img, true);
        } else {
            const og = img.getAttribute('data-og');
            if (og && memory[og]) {
                if (img.src !== memory[og]) {
                    img.src = memory[og];
                    applyVisuals(img, true);
                }
            }
        }
    }

    document.addEventListener('click', (e) => {
        if (!e.altKey || e.target.tagName !== 'IMG') return;

        e.preventDefault();
        e.stopPropagation();

        const img = e.target;
        const originalSrc = img.getAttribute('data-og') || img.src;
        const currentCustom = memory[originalSrc] || '';

        const input = prompt(STRINGS.ask, currentCustom);

        if (input === null) return;

        if (input.trim() === '') {
            delete memory[originalSrc];
            if (img.getAttribute('data-og')) {
                img.src = img.getAttribute('data-og');
                img.removeAttribute('data-og');
            }
            applyVisuals(img, false);
        } else {
            memory[originalSrc] = input.trim();
            if (!img.getAttribute('data-og')) {
                img.setAttribute('data-og', originalSrc);
            }
            img.src = input.trim();
            applyVisuals(img, true);
        }

        updateStorage();
    }, true);

    const observer = new MutationObserver((mutations) => {
        for (const m of mutations) {
            if (m.type === 'childList') {
                m.addedNodes.forEach(node => {
                    if (node.tagName === 'IMG') processImage(node);
                    if (node.querySelectorAll) node.querySelectorAll('img').forEach(processImage);
                });
            } else if (m.type === 'attributes' && m.target.tagName === 'IMG') {
                processImage(m.target);
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });

    document.querySelectorAll('img').forEach(processImage);

})();