Pokemoncard.io card preview Bookmarklet

Bookmarklet in bookmark format

javascript: (() => { function cardHoverListener() {
    let hoveredCard = undefined;
    
    const observer = new MutationObserver((mutationList) => {
       for (const list of mutationList) {
           if (list.type === "childList") {
               for (const node of list.addedNodes) {
                    if (node.classList.contains("img-container")) {
                        setupListeners(node);
                    }
               }
           }
       }
    });

    function setupListeners(node) {
        if (node.hasAttribute("hover-listener")) {
            return;
        }
        node.setAttribute("hover-listener", "");
        node.addEventListener("mouseenter", () => {
            hoveredCard = node;
            updateImage();
        });
        node.addEventListener("mouseleave", () => {
            hoveredCard = undefined;
            updateImage();
        });
    }

    document.querySelectorAll(".img-container").forEach(container => setupListeners(container));
    
    observer.observe(document.body, { childList: true, subtree: true });

    const mouseFollowElement = document.createElement("div");
    const mouseFollowImg = document.createElement("img");
    mouseFollowElement.appendChild(mouseFollowImg);
    mouseFollowElement.style.position = "fixed";
    window.addEventListener("mousemove", (e) => {
        mouseFollowElement.style.top = e.y - 200 + "px";
        mouseFollowElement.style.left = e.x + 25 + "px";
    });

    document.body.appendChild(mouseFollowElement);

    function updateImage() {
        const imgSrc = hoveredCard?.querySelector("img")?.src;
        if (imgSrc !== undefined) {
            mouseFollowImg.src = imgSrc;
        }
        mouseFollowImg.style.display = imgSrc !== undefined ? "block" : "none";
    }
}

cardHoverListener(); })();

bookmarklet.js

function cardHoverListener() {
    let hoveredCard = undefined;
    
    const observer = new MutationObserver((mutationList) => {
       for (const list of mutationList) {
           if (list.type === "childList") {
               for (const node of list.addedNodes) {
                    if (node.classList.contains("img-container")) {
                        setupListeners(node);
                    }
               }
           }
       }
    });

    function setupListeners(node) {
        if (node.hasAttribute("hover-listener")) {
            return;
        }
        node.setAttribute("hover-listener", "");
        node.addEventListener("mouseenter", () => {
            hoveredCard = node;
            updateImage();
        });
        node.addEventListener("mouseleave", () => {
            hoveredCard = undefined;
            updateImage();
        });
    }

    document.querySelectorAll(".img-container").forEach(container => setupListeners(container));
    
    observer.observe(document.body, { childList: true, subtree: true });

    const mouseFollowElement = document.createElement("div");
    const mouseFollowImg = document.createElement("img");
    mouseFollowElement.appendChild(mouseFollowImg);
    mouseFollowElement.style.position = "fixed";
    window.addEventListener("mousemove", (e) => {
        mouseFollowElement.style.top = e.y - 200 + "px";
        mouseFollowElement.style.left = e.x + 25 + "px";
    });

    document.body.appendChild(mouseFollowElement);

    function updateImage() {
        const imgSrc = hoveredCard?.querySelector("img")?.src;
        if (imgSrc !== undefined) {
            mouseFollowImg.src = imgSrc;
        }
        mouseFollowImg.style.display = imgSrc !== undefined ? "block" : "none";
    }
}

cardHoverListener();

Example of in use

How to use a bookmarklet: https://www.freecodecamp.org/news/what-are-bookmarklets/