// ==UserScript==
// @name 二维码自动解析
// @description 鼠标悬停时自动在本地解析二维码
// @namespace http://tampermonkey.net/
// @require https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js
// @require https://unpkg.com/@zxing/library@latest/umd/index.min.js
// @match *://*/*
// @grant GM_setClipboard
// @grant GM_openInTab
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @run-at document-start
// @version 1.9
// @author Gemini
// @license GPLv3
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
// === 配置 ===
const DELAY_MS = 500;
const TOLERANCE = 2;
// === ZXing 初始化 ===
let zxingReader = null;
function getZXingReader() {
if (!window.ZXing) return null;
if (!zxingReader) {
const hints = new Map();
const formats = [ZXing.BarcodeFormat.QR_CODE, ZXing.BarcodeFormat.DATA_MATRIX];
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, formats);
hints.set(ZXing.DecodeHintType.TRY_HARDER, true); // 开启深度扫描
zxingReader = new ZXing.BrowserMultiFormatReader(hints);
}
return zxingReader;
}
// === 全局变量 ===
let hoverTimer = null;
let tooltip = null;
let currentTarget = null;
// 坐标相关
let lastMouseScreenX = 0;
let lastMouseScreenY = 0;
let lastMouseClientX = 0;
let lastMouseClientY = 0;
let topWinOffset = null;
// 组合键状态控制
let isRightClickHolding = false;
let leftClickCount = 0;
let interactionTarget = null;
let suppressContextMenu = false;
let suppressClick = false;
// 会话缓存 (存储对象 { text: string, method: string })
const qrCache = new Map(); // Key: src string
const canvasCache = new WeakMap(); // Key: DOM Element
const isTop = window.self === window.top;
// === 样式注入 ===
GM_addStyle(`
#qr-custom-tooltip {
position: fixed;
z-index: 2147483647;
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 8px 12px;
font-size: 12px;
max-width: 320px;
word-break: break-all;
pointer-events: none;
display: none;
border: 1px solid #555;
border-radius: 0px !important;
box-shadow: none !important;
line-height: 1.5;
text-align: left;
}
.qr-detected-style {
cursor: pointer !important;
outline: none !important;
}
`);
// ==========================================
// 通信模块 (跨域支持)
// ==========================================
function sendToTop(type, payload = {}) {
if (isTop) {
handleMessage({ data: { type, payload } });
} else {
window.top.postMessage({ type: 'QR_SCRIPT_MSG', action: type, payload }, '*');
}
}
if (isTop) {
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'QR_SCRIPT_MSG') {
handleMessage({ data: { type: event.data.action, payload: event.data.payload } });
}
});
}
function handleMessage(e) {
const { type, payload } = e.data;
switch (type) {
case 'SHOW_TOOLTIP':
renderTooltip(payload.text, payload.coords, payload.isLink, payload.method);
break;
case 'HIDE_TOOLTIP':
hideTooltipDOM();
break;
case 'SHOW_FEEDBACK':
showFeedbackDOM();
break;
}
}
// ==========================================
// UI 渲染模块 (仅顶层窗口)
// ==========================================
function getTooltip() {
if (!tooltip) {
tooltip = document.createElement('div');
tooltip.id = 'qr-custom-tooltip';
document.body.appendChild(tooltip);
}
return tooltip;
}
function renderTooltip(text, coords, isLink, method) {
const tip = getTooltip();
const contentColor = isLink ? '#4dabf7' : '#ffffff';
const actionColor = '#4CAF50';
const bracketColor = '#F6B64E';
const parenColor = '#B28BF7';
const isLoading = text.startsWith('⌛');
const isError = text.startsWith('❌');
// 构建标题 HTML
let titleHtml = '';
if (method === '远程解析') {
titleHtml = `
[远程解析]
`;
} else {
// 本地解析
titleHtml = `
[本地解析]
(${escapeHtml(method || '未知')})
`;
}
let htmlContent = '';
if (isLoading) {
htmlContent = `${escapeHtml(text)}
`;
} else if (isError) {
htmlContent = `${escapeHtml(text)}
`;
} else {
htmlContent = `
${titleHtml}
${escapeHtml(text)}
${isLink ? '🔗 点击打开链接' : '📋 点击复制文本'}
`;
}
tip.innerHTML = htmlContent;
tip.style.display = 'block';
// --- 坐标计算 ---
let offsetY, offsetX;
if (topWinOffset) {
offsetX = topWinOffset.x;
offsetY = topWinOffset.y;
} else {
const winScreenX = window.screenX !== undefined ? window.screenX : window.screenLeft;
const winScreenY = window.screenY !== undefined ? window.screenY : window.screenTop;
offsetX = winScreenX + (window.outerWidth - window.innerWidth);
offsetY = winScreenY + (window.outerHeight - window.innerHeight);
}
let left = coords.absLeft - offsetX;
let top = coords.absBottom - offsetY + 10;
const tipRect = tip.getBoundingClientRect();
const winHeight = window.innerHeight;
const winWidth = window.innerWidth;
if (top + tipRect.height > winHeight) {
top = (coords.absTop - offsetY) - tipRect.height - 10;
}
if (left + tipRect.width > winWidth) left = winWidth - tipRect.width - 10;
if (left < 0) left = 10;
tip.style.top = top + 'px';
tip.style.left = left + 'px';
}
function hideTooltipDOM() {
if (tooltip) tooltip.style.display = 'none';
}
function showFeedbackDOM() {
const tip = getTooltip();
if (tip.style.display === 'none') return;
const originalHTML = tip.innerHTML;
tip.innerHTML = `✅ 已复制到剪贴板
`;
setTimeout(() => {
if (tip.style.display !== 'none') tip.innerHTML = originalHTML;
}, 1000);
}
// ==========================================
// 逻辑处理模块 (所有 Frame)
// ==========================================
function requestShowTooltip(text, element, method = "JSQR") {
if (currentTarget !== element) currentTarget = element;
const isLink = isUrl(text);
const rect = element.getBoundingClientRect();
const frameOffsetX = (lastMouseScreenX && lastMouseClientX) ? (lastMouseScreenX - lastMouseClientX) : 0;
const frameOffsetY = (lastMouseScreenY && lastMouseClientY) ? (lastMouseScreenY - lastMouseClientY) : 0;
const coords = {
absLeft: rect.left + frameOffsetX,
absTop: rect.top + frameOffsetY,
absBottom: rect.bottom + frameOffsetY
};
sendToTop('SHOW_TOOLTIP', { text, coords, isLink, method });
}
function requestHideTooltip() {
currentTarget = null;
sendToTop('HIDE_TOOLTIP');
}
function requestFeedback() {
sendToTop('SHOW_FEEDBACK');
}
// === 统一入口 ===
function scanElement(target, force = false) {
if (target.tagName === 'IMG') {
scanImage(target, force);
} else if (target.tagName === 'CANVAS') {
scanCanvas(target, force);
}
}
// === 远程解析 ===
function scanExternal(target) {
if (target.tagName !== 'IMG' || !target.src || !/^http/.test(target.src)) {
requestShowTooltip("❌ 远程解析仅支持 http/https 图片链接", target);
return;
}
const src = target.src;
requestShowTooltip("⌛ 正在连接远程服务器解析...", target);
GM_xmlhttpRequest({
method: "GET",
url: "https://zxing.org/w/decode?u=" + encodeURIComponent(src),
onload: function(response) {
if (response.status === 200) {
const parser = new DOMParser();
const doc = parser.parseFromString(response.responseText, "text/html");
const tds = doc.querySelectorAll('td');
let resultText = null;
for (let i = 0; i < tds.length; i++) {
if (tds[i].textContent.trim() === "Parsed Result") {
const nextTd = tds[i].nextElementSibling;
if (nextTd) {
const pre = nextTd.querySelector('pre');
if (pre) { resultText = pre.textContent; break; }
}
}
}
if (resultText) {
// 修复:将远程解析结果写入缓存
qrCache.set(src, { text: resultText, method: "远程解析" });
applyQrSuccess(target, resultText, "远程解析");
} else {
requestShowTooltip("❌ 远程解析失败", target);
}
} else {
requestShowTooltip("❌ 远程服务器响应错误: " + response.status, target);
}
},
onerror: function() {
requestShowTooltip("❌ 网络请求失败", target);
}
});
}
// ==========================================
// 图像获取与预处理
// ==========================================
function scanImage(img, force) {
const src = img.src;
if (!src) return;
if (!force && qrCache.has(src)) return;
let displayWidth = img.width || img.clientWidth || 0;
let displayHeight = img.height || img.clientHeight || 0;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const tempImg = new Image();
tempImg.crossOrigin = "Anonymous";
tempImg.src = src;
tempImg.onload = () => processImage(tempImg, canvas, context, img, src, force, 'IMG', displayWidth, displayHeight);
tempImg.onerror = () => scanImage_Fallback(img, src, force, displayWidth, displayHeight);
}
function scanImage_Fallback(originalImg, src, force, w, h) {
GM_xmlhttpRequest({
method: "GET",
url: src,
responseType: "blob",
onload: function(response) {
if (response.status === 200) {
const blob = response.response;
const blobUrl = URL.createObjectURL(blob);
const tempImg = new Image();
tempImg.onload = () => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
processImage(tempImg, canvas, context, originalImg, src, force, 'IMG', w, h);
URL.revokeObjectURL(blobUrl);
};
tempImg.onerror = () => {
qrCache.set(src, null);
URL.revokeObjectURL(blobUrl);
};
tempImg.src = blobUrl;
} else {
qrCache.set(src, null);
}
},
onerror: () => qrCache.set(src, null)
});
}
function scanCanvas(canvasEl, force) {
if (!force && canvasCache.has(canvasEl)) return;
try {
let context = canvasEl.getContext('2d');
if (context) {
try {
const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
const padding = 50;
tempCanvas.width = canvasEl.width + (padding * 2);
tempCanvas.height = canvasEl.height + (padding * 2);
tempCtx.fillStyle = '#FFFFFF';
tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
tempCtx.putImageData(imageData, padding, padding);
runScanPipeline(tempCanvas, tempCtx, canvasEl, force, 'CANVAS', canvasEl);
} catch (e) {
canvasCache.set(canvasEl, null);
}
} else {
const dataUrl = canvasEl.toDataURL();
const tempImg = new Image();
tempImg.onload = () => {
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
processImage(tempImg, tempCanvas, tempCtx, canvasEl, null, force, 'CANVAS', canvasEl.width, canvasEl.height);
};
tempImg.src = dataUrl;
}
} catch (e) {
canvasCache.set(canvasEl, null);
}
}
function processImage(imageObj, canvas, context, targetEl, cacheKey, force, type, forcedWidth, forcedHeight) {
let finalWidth = imageObj.naturalWidth;
let finalHeight = imageObj.naturalHeight;
if (!finalWidth || finalWidth < 10) {
finalWidth = forcedWidth || 300;
finalHeight = forcedHeight || 300;
}
const padding = 50;
canvas.width = finalWidth + (padding * 2);
canvas.height = finalHeight + (padding * 2);
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, canvas.width, canvas.height);
context.imageSmoothingEnabled = false;
context.drawImage(imageObj, padding, padding, finalWidth, finalHeight);
runScanPipeline(canvas, context, targetEl, force, type, cacheKey);
}
// ==========================================
// 核心扫描管道 (JSQR + ZXing)
// ==========================================
async function runScanPipeline(canvas, context, targetEl, force, type, cacheKey) {
if (force) requestShowTooltip("⌛ 正在进行强制解析...", targetEl);
let result = null;
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// --- 阶段 1: 标准解析 ---
// 1.1 JSQR 标准
result = jsQR(imageData.data, imageData.width, imageData.height);
if (result) {
handleSuccess(result.data, "JSQR", type, cacheKey, targetEl);
return;
}
// 1.2 ZXing 标准
result = await tryZXing(canvas);
if (result) {
handleSuccess(result, "ZXing", type, cacheKey, targetEl);
return;
}
if (!force) {
handleFail(type, cacheKey, targetEl, false);
return;
}
// --- 阶段 2: 增强解析 (仅强制模式) ---
// 反色数据准备
const invertedData = new Uint8ClampedArray(imageData.data);
for (let i = 0; i < invertedData.length; i += 4) {
invertedData[i] = 255 - invertedData[i];
invertedData[i + 1] = 255 - invertedData[i + 1];
invertedData[i + 2] = 255 - invertedData[i + 2];
invertedData[i + 3] = 255;
}
// 2.1 JSQR 反色
result = jsQR(invertedData, imageData.width, imageData.height);
if (result) {
handleSuccess(result.data, "JSQR 反色", type, cacheKey, targetEl);
return;
}
// 2.2 ZXing 反色
const invertedImageData = new ImageData(invertedData, canvas.width, canvas.height);
context.putImageData(invertedImageData, 0, 0);
result = await tryZXing(canvas);
if (result) {
handleSuccess(result, "ZXing 反色", type, cacheKey, targetEl);
return;
}
// 二值化数据准备
const binarizedData = new Uint8ClampedArray(imageData.data);
const len = binarizedData.length;
let totalLum = 0;
for (let i = 0; i < len; i += 4) {
totalLum += 0.299 * binarizedData[i] + 0.587 * binarizedData[i+1] + 0.114 * binarizedData[i+2];
}
const avgLum = totalLum / (len / 4);
for (let i = 0; i < len; i += 4) {
const lum = 0.299 * binarizedData[i] + 0.587 * binarizedData[i+1] + 0.114 * binarizedData[i+2];
const val = lum > avgLum ? 255 : 0;
binarizedData[i] = val;
binarizedData[i+1] = val;
binarizedData[i+2] = val;
binarizedData[i+3] = 255;
}
// 2.3 JSQR 二值化
result = jsQR(binarizedData, imageData.width, imageData.height);
if (result) {
handleSuccess(result.data, "JSQR 二值化", type, cacheKey, targetEl);
return;
}
// 2.4 ZXing 二值化
const binarizedImageData = new ImageData(binarizedData, canvas.width, canvas.height);
context.putImageData(binarizedImageData, 0, 0);
result = await tryZXing(canvas);
if (result) {
handleSuccess(result, "ZXing 二值化", type, cacheKey, targetEl);
return;
}
handleFail(type, cacheKey, targetEl, true);
}
function tryZXing(canvas) {
return new Promise((resolve) => {
if (typeof ZXing === 'undefined') { resolve(null); return; }
const dataUrl = canvas.toDataURL('image/png');
const img = new Image();
img.onload = () => {
const reader = getZXingReader();
if (!reader) { resolve(null); return; }
reader.decodeFromImageElement(img)
.then(res => resolve(res.text))
.catch(() => resolve(null));
};
img.onerror = () => resolve(null);
img.src = dataUrl;
});
}
function handleSuccess(text, method, type, cacheKey, targetEl) {
const cacheObj = { text: text, method: method };
if (type === 'IMG') qrCache.set(cacheKey, cacheObj);
else canvasCache.set(targetEl, cacheObj);
applyQrSuccess(targetEl, text, method);
}
function handleFail(type, cacheKey, targetEl, isForce) {
if (type === 'IMG') qrCache.set(cacheKey, null);
else canvasCache.set(targetEl, null);
if (isForce) {
requestShowTooltip("❌ 强制解析失败", targetEl);
}
}
// ==========================================
// 公共辅助函数
// ==========================================
function applyQrSuccess(el, text, method) {
el.dataset.hasQr = "true";
el.classList.add('qr-detected-style');
requestShowTooltip(text, el, method);
}
function isUrl(text) { return /^https?:\/\//i.test(text); }
function escapeHtml(text) {
if (!text) return "";
return text.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
}
// ==========================================
// 事件监听
// ==========================================
document.addEventListener('mousemove', (e) => {
lastMouseScreenX = e.screenX;
lastMouseScreenY = e.screenY;
lastMouseClientX = e.clientX;
lastMouseClientY = e.clientY;
if (isTop) {
topWinOffset = {
x: e.screenX - e.clientX,
y: e.screenY - e.clientY
};
}
}, true);
document.addEventListener('mouseover', (e) => {
const target = e.target;
const isImg = target.tagName === 'IMG';
const isCanvas = target.tagName === 'CANVAS';
if (!isImg && !isCanvas) return;
if (isImg && (!target.complete || target.naturalWidth === 0)) return;
// 检查缓存
if (isImg && target.src && qrCache.has(target.src)) {
const cacheData = qrCache.get(target.src);
if (cacheData) {
if (!target.dataset.hasQr) applyQrSuccess(target, cacheData.text, cacheData.method);
else requestShowTooltip(cacheData.text, target, cacheData.method);
}
return;
}
if (isCanvas && canvasCache.has(target)) {
const cacheData = canvasCache.get(target);
if (cacheData) {
if (!target.dataset.hasQr) applyQrSuccess(target, cacheData.text, cacheData.method);
else requestShowTooltip(cacheData.text, target, cacheData.method);
}
return;
}
let w, h;
if (isImg) {
w = target.naturalWidth;
h = target.naturalHeight;
} else {
w = target.width || target.clientWidth;
h = target.height || target.clientHeight;
}
if (Math.abs(w - h) > TOLERANCE || w < 30) {
if (isImg && target.src) qrCache.set(target.src, null);
else if (isCanvas) canvasCache.set(target, null);
return;
}
hoverTimer = setTimeout(() => {
if (isImg && qrCache.has(target.src)) return;
if (isCanvas && canvasCache.has(target)) return;
scanElement(target, false); // 自动模式
}, DELAY_MS);
});
document.addEventListener('mouseout', (e) => {
const t = e.target;
if (t.tagName === 'IMG' || t.tagName === 'CANVAS') {
clearTimeout(hoverTimer);
if (currentTarget === t) {
requestHideTooltip();
}
}
});
// === 交互逻辑 ===
document.addEventListener('mousedown', (e) => {
if (e.button === 2) {
isRightClickHolding = true;
leftClickCount = 0;
interactionTarget = e.target;
suppressContextMenu = false;
}
else if (e.button === 0) {
if (isRightClickHolding) {
if (interactionTarget && (interactionTarget.tagName === 'IMG' || interactionTarget.tagName === 'CANVAS')) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
leftClickCount++;
suppressContextMenu = true;
suppressClick = true;
}
}
}
}, true);
document.addEventListener('mouseup', (e) => {
if (e.button === 2) {
isRightClickHolding = false;
if (leftClickCount > 0 && interactionTarget) {
// 1次点击 -> 强制本地解析 (全策略)
if (leftClickCount === 1) {
scanElement(interactionTarget, true);
}
// 2次点击 -> 远程解析
else if (leftClickCount === 2) {
scanExternal(interactionTarget);
}
}
interactionTarget = null;
leftClickCount = 0;
}
}, true);
document.addEventListener('contextmenu', (e) => {
if (suppressContextMenu) {
e.preventDefault();
e.stopPropagation();
suppressContextMenu = false;
}
}, true);
document.addEventListener('click', (e) => {
if (suppressClick) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
suppressClick = false;
return;
}
const target = e.target;
if ((target.tagName === 'IMG' || target.tagName === 'CANVAS') && target.dataset.hasQr === "true") {
let data = null;
if (target.tagName === 'IMG') {
const c = qrCache.get(target.src);
if (c) data = c.text;
} else {
const c = canvasCache.get(target);
if (c) data = c.text;
}
if (data) {
e.preventDefault();
e.stopPropagation();
if (isUrl(data)) {
GM_openInTab(data, { active: true, insert: true });
} else {
GM_setClipboard(data);
requestFeedback();
}
}
}
}, true);
})();