浏览器扩展实现屏幕截图QR码识别教程（无需摄像头）

在浏览器中实现屏幕内QR码识别功能是一种常见需求。用户希望快速读取网页图片或Canvas中的二维码，而无需使用摄像头对准屏幕，避免操作繁琐与对焦困难。

这一目标完全可行，其核心思路是将视觉识别流程分解为三个步骤：定位 → 截图 → 解码。整个过程不依赖摄像头，而是利用浏览器扩展能力直接处理网页内容。关键在于如何将这三个步骤合理地分配至扩展的不同运行环境，主要涉及内容脚本与后台服务线程之间的协作。

以下将按照这一实践路径，逐步介绍具体实现方法。

1. 定位QR码区域（由内容脚本负责）

首先需要确定二维码在页面中的位置。此任务适合由内容脚本处理，因为它能直接访问和操作DOM。

实现思路是智能识别页面中可能包含QR码的节点。常见位置包括：

• 标签，其src属性可能为base64数据或包含“qrcode”字样的URL。
• 元素，特别是动态渲染二维码的情况。
• 图形。
• 任何带有data-qr等自定义属性的容器元素。

可以编写函数收集这些潜在目标：

// content.ts
function findQRElements() {
  const candidates = [
    ...document.querySelectorAll('img[src*="data:image/png;base64"], img[src*="qrcode"]'),
    ...document.querySelectorAll('canvas.qr-code, canvas[data-qr]'),
    ...document.querySelectorAll('[data-qr-src], [aria-label*="QR"]')
  ];
  return candidates.map(el => ({
    rect: el.getBoundingClientRect(),
    node: el
  }));
}

// 向后台发送位置信息（包含坐标、尺寸，必要时包含截图DataURL）
chrome.runtime.sendMessage({
  type: 'SCAN_QR_REGION',
  regions: findQRElements().map(({ rect }) => ({
    x: rect.left,
    y: rect.top,
    width: rect.width,
    height: rect.height,
    scrollX: window.scrollX,
    scrollY: window.scrollY
  }))
});

定位到目标后，将其位置与尺寸信息（需考虑页面滚动偏移）发送至后台处理。

2. 截图与图像预处理（由后台服务线程执行）

后台服务线程收到坐标信息后，负责截取并裁剪目标区域。

主要利用浏览器截图API，例如chrome.tabs.captureVisibleTab()或更精确的chrome.tabs.captureTab()（后者需申请"tabs"权限）。获取整页截图后，通过Canvas API依据前台传递的坐标精准裁剪出二维码区域，并转换为解码库所需的ImageData格式。

// background.ts
chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
  if (req.type === 'SCAN_QR_REGION' && req.regions.length > 0) {
    const tab = await chrome.tabs.get(sender.tab.id);
    const screenshot = await chrome.tabs.captureTab(tab.id, { format: 'png' });

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = () => {
      // 按坐标裁剪（注意：需考虑页面滚动偏移与缩放）
      const scale = window.devicePixelRatio || 1;
      canvas.width = req.regions[0].width * scale;
      canvas.height = req.regions[0].height * scale;

      ctx.drawImage(
        img,
        req.regions[0].x * scale,
        req.regions[0].y * scale,
        req.regions[0].width * scale,
        req.regions[0].height * scale,
        0, 0,
        canvas.width,
        canvas.height
      );

      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // → 传入解码器
      decodeQR(imageData).then(result => {
        sendResponse({ success: true, data: result });
      }).catch(err => {
        sendResponse({ success: false, error: err.message });
      });
    };
    img.src = screenshot;
  }
  return true; // 保持异步响应通道开启
});

需注意细节：截图坐标需考虑设备像素比，以确保在高分屏上准确裁剪。

3. 解码：优先使用jsQR，并提供兼容方案

最后一步是将裁剪后的图像数据交由解码库处理。推荐使用jsQR库，它轻量、纯JS实现、无依赖，且被Google Authenticator等应用广泛使用。该库可直接接受Canvas生成的Uint8ClampedArray格式灰度图像数据。

import jsQR from 'jsqr';

function decodeQR(imageData) {
  const code = jsQR(
    imageData.data,
    imageData.width,
    imageData.height,
    { inversionAttempts: 'dontInvert' }
  );
  return code  Promise.resolve(code.data) : Promise.reject(new Error('No QR code found'));
}

识别成功后，即可获取二维码内嵌的文本信息。

注意事项

实现过程中需关注以下几点：

• 权限声明：在manifest.json中声明必要权限，如"activeTab"、"tabs"。若需跨域截图，还需添加"host_permissions": [""]。
• 跨域限制：captureTab API对chrome://、about:等安全敏感页面无效，代码中需做好降级处理或友好提示。
• 性能优化：避免高频轮询扫描以节省资源。更优方式是通过右键菜单、快捷键或用户点击扩展图标触发扫描。
• 容错增强：若截图质量不佳（如对比度低），可在解码前对imageData进行预处理，例如灰度化、二值化或提升对比度，以提高识别率。

总体而言，该方案技术路径成熟。可参考Authenticator等成熟扩展的架构，聚焦于三个核心环节：内容脚本的智能元素发现、后台服务的精准截图以及jsQR库的高效解码。从监听用户操作到获取目标区域，再到截图解码并返回结果，整个流程清晰可控，便于调试。最终可根据具体业务逻辑将这些模块组合实现。