Image Info on Hover

Hiển thị kích thước, dung lượng và định dạng ảnh khi hover
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Image Info on Hover
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Hiển thị kích thước, dung lượng và định dạng ảnh khi hover
// @author       You
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @connect      *
// ==/UserScript==

(function () {
    'use strict';

    let tooltip = document.createElement("div");
    tooltip.style.position = "fixed";
    tooltip.style.zIndex = 999999;
    tooltip.style.background = "rgba(0,0,0,0.8)";
    tooltip.style.color = "#fff";
    tooltip.style.padding = "6px 10px";
    tooltip.style.fontSize = "12px";
    tooltip.style.borderRadius = "6px";
    tooltip.style.pointerEvents = "none";
    tooltip.style.display = "none";
    document.body.appendChild(tooltip);

    function formatSize(bytes) {
        if (!bytes) return "Unknown";
        if (bytes < 1024) return bytes + " B";
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
        return (bytes / (1024 * 1024)).toFixed(2) + " MB";
    }

    function getImageInfo(img, callback) {
        let url = img.src;

        GM_xmlhttpRequest({
            method: "HEAD",
            url: url,
            onload: function (res) {
                let size = res.responseHeaders.match(/content-length:\s*(\d+)/i);
                let type = res.responseHeaders.match(/content-type:\s*([^\s;]+)/i);

                callback({
                    width: img.naturalWidth,
                    height: img.naturalHeight,
                    size: size ? formatSize(parseInt(size[1])) : "Unknown",
                    type: type ? type[1] : "Unknown"
                });
            },
            onerror: function () {
                callback({
                    width: img.naturalWidth,
                    height: img.naturalHeight,
                    size: "Unknown",
                    type: "Unknown"
                });
            }
        });
    }

    document.addEventListener("mouseover", function (e) {
        let img = e.target.closest("img");
        if (!img) return;

        tooltip.style.display = "block";
        tooltip.innerText = "Loading...";

        getImageInfo(img, function (info) {
            tooltip.innerText =
                `${info.width} × ${info.height}\n` +
                `${info.size}\n` +
                `${info.type}`;
        });

        document.addEventListener("mousemove", moveTooltip);
    });

    document.addEventListener("mouseout", function (e) {
        if (e.target.closest("img")) {
            tooltip.style.display = "none";
            document.removeEventListener("mousemove", moveTooltip);
        }
    });

    function moveTooltip(e) {
        tooltip.style.top = (e.clientY + 15) + "px";
        tooltip.style.left = (e.clientX + 15) + "px";
    }
})();