Hiển thị kích thước, dung lượng và định dạng ảnh khi hover
// ==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";
}
})();