浏览器扩展实现屏幕截图QR码识别方法

定位元素后，使用 getBoundingClientRect() 获取其在当前视口中的精确坐标与尺寸。为避免误判装饰性小图标，建议添加最小尺寸过滤条件。

// content.ts
const qrElements = document.querySelectorAll('img.qr, .qr-code, [data-qr]');
qrElements.forEach(el => {
  const rect = el.getBoundingClientRect();
  if (rect.width > 40 && rect.height > 40) { // 过滤过小区域
    chrome.runtime.sendMessage({
      type: 'CAPTURE_QR',
      bounds: { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
    });
  }
});

注意：跨上下文通信时，不应直接传递 Element 对象（会导致序列化失败），仅传递坐标信息即可。若二维码由 Canvas 或 SVG 动态渲染，可额外判断标签名，并尝试使用 toDataURL() 提前获取图像数据，此方法有时比截图更高效。

截图与图像预处理（后台脚本侧）

后台脚本收到坐标信息后，负责调用截图 API。推荐使用 chrome.tabs.screenshot()，其比 captureVisibleTab() 更可靠，且无需 activeTab 权限即可工作，返回 PNG 格式的数据 URL。

获取全页面截图后，需在内存中裁剪出二维码区域。传统方法是创建 Canvas，绘制全屏图像后使用 drawImage 进行局部裁剪。现代方案可考虑使用 OffscreenCanvas（Chrome 84+ 支持），在 Worker 中处理以避免阻塞主线程。

// background.ts
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
  if (req.type === 'CAPTURE_QR') {
    chrome.tabs.get(sender.tab.id, tab => {
      chrome.tabs.screenshot(tab.id, { format: 'png' }, screenshotUrl => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = req.bounds.width;
          canvas.height = req.bounds.height;
          ctx.drawImage(
            img,
            req.bounds.x, req.bounds.y,
            req.bounds.width, req.bounds.height,
            0, 0,
            req.bounds.width, req.bounds.height
          );
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          // → 传递给解码器
          decodeQR(imageData).then(result => sendResponse({ result }));
        };
        img.src = screenshotUrl;
      });
    });
  }
  return true; // 保持异步响应通道开启
});

提示：tabs.screenshot() 的兼容性与稳定性通常更佳，是当前推荐的选择。

解码图像数据（选择与集成解码库）

裁剪出二维码图像数据后，最后一步是解码。JavaScript 生态中有多个纯前端解码库可供选择：

• jsQR：当前主流选择，维护活跃，API 现代。它直接接受 Uint8ClampedArray（即 getImageData().data）作为输入，集成便捷。
• qrcode-reader：更老牌的库，兼容性极佳，但使用时可能需要将 ImageData 对象转换格式。

以 jsQR 为例，解码过程直观：

import jsQR from 'jsqr';

function decodeQR(imageData) {
  return new Promise((resolve, reject) => {
    const code = jsQR(imageData.data, imageData.width, imageData.height, {
      inversionAttempts: 'dontInvert', // 避免反色误判
    });
    resolve(code  code.data : null);
  });
}

回退策略：若 jsQR 未能成功解码（返回 null），可尝试备选方案：将 imageData 绘制到新 Canvas，然后调用 qrcode-reader 的 decode() 方法。这种双保险策略能显著提升识别鲁棒性。

总结与建议

完成核心流程后，以下几个工程化细节直接影响扩展的可用性与用户体验：

• 权限配置：在 manifest.json 中，需声明 "permissions": ["tabs", "activeTab"] 以及 "host_permissions": [""]（用于截图）。
• 性能优化：对于高分辨率二维码区域，解码前可进行等比缩放（如降至 300×300 像素），这能大幅提升 jsQR 处理速度，且用户几乎无感知。
• 用户体验：不建议自动扫描所有页面，以免侵扰用户。更好的方式是添加右键菜单项（chrome.contextMenus）或悬浮按钮，由用户主动触发扫描。
• 安全边界：浏览器截图 API 受同源策略限制。若二维码位于跨域 iframe 内部，上述方法可能失效，需额外向该 iframe 注入内容脚本单独处理。

此方案本质是“视觉 OCR”的轻量化特例，不追求通用图像识别，而是专注于对结构化的二维码进行精准的“屏幕抓取”与解析。理清坐标传递、Canvas 裁剪与解码库 API 之间的衔接后，即可快速搭建稳定高效的屏幕二维码读取工具。