通过Chrome扩展程序的内容脚本获取已授权网页中<img>元素的图像数据

我来帮你拆解这个问题——你遇到的核心困境其实是内容脚本的同源策略约束，以及对扩展权限作用范围的误解。咱们一步步理清楚为什么之前的方法失效，再给出可行的解决方案：

为什么你的尝试都失败了？ #

• 画布污染报错：即使你在permissions里加了目标网站，内容脚本依然处于浏览器的同源策略管控下。如果图像来自跨域CDN，且服务器没有返回Access-Control-Allow-Origin头，浏览器会标记这个图像为“跨域资源”，一旦你把它渲染到Canvas，就会污染画布，禁止读取像素数据。
• FileReader返回data:：用no-cors模式发起请求时，浏览器会返回opaque响应——这种响应的内容完全不可读，只是占位符，所以FileReader根本拿不到实际数据。
• 权限不生效：扩展的permissions字段主要是授予扩展访问Chrome API或特定网站的权限，但不能直接突破浏览器的同源策略对内容脚本的限制。

截图类扩展的核心技巧：使用Chrome特权API #

这类扩展之所以能成功，是因为它们没有在内容脚本里直接读取图像，而是调用了Chrome提供的特权级截图API，绕开了同源策略。最常用的是chrome.tabs.captureVisibleTab，它直接从浏览器的渲染层捕获页面内容，不受CORS限制。

实现步骤（Manifest V3） #

1. 配置Manifest权限：需要activeTab或tabs权限，以及目标网站的主机权限（如果需要主动触发）：

{
  "manifest_version": 3,
  "name": "图像捕获工具",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 在弹出页/后台脚本中调用API：内容脚本不能直接调用这个API，需要通过扩展的特权上下文（比如弹出页、后台服务 worker）来执行：

// popup.js
document.getElementById('capture-btn').addEventListener('click', () => {
  // 获取当前激活的标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 捕获当前可见区域，返回Base64格式的PNG
    chrome.tabs.captureVisibleTab(null, {format: 'png'}, (dataUrl) => {
      // 你可以直接使用这个dataUrl，或者进一步处理
      console.log('捕获的图像数据:', dataUrl);
      
      // 如果需要裁剪特定区域（比如页面上的某个图片）
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        // 假设目标图片在页面上的位置是x=50, y=50，宽200，高200
        canvas.width = 200;
        canvas.height = 200;
        ctx.drawImage(img, 50, 50, 200, 200, 0, 0, 200, 200);
        const croppedData = canvas.toDataURL();
        console.log('裁剪后的图像:', croppedData);
      };
      img.src = dataUrl;
    });
  });
});

另一种方案：修改图像的CORS头（适合获取单张图像原始数据） #

如果你不需要整页截图，只想获取某张图像的原始像素数据，可以通过扩展的webRequest API拦截图像请求，强制添加CORS允许头，让内容脚本可以正常读取。

实现步骤（Manifest V3） #

1. 配置Manifest权限：需要webRequest、webRequestBlocking以及目标CDN的主机权限：

{
  "manifest_version": 3,
  "name": "修复图像CORS",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["*://your-cdn-domain.com/*"], // 替换成你的CDN域名
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://target-website.com/*"], // 目标网页域名
      "js": ["content.js"]
    }
  ]
}

2. 后台脚本拦截并修改响应头：

// background.js
chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 只处理图像请求
    const isImage = details.responseHeaders.some(
      header => header.name.toLowerCase() === 'content-type' && header.value.startsWith('image/')
    );
    if (isImage) {
      // 添加Access-Control-Allow-Origin头，允许任意域访问
      details.responseHeaders.push({name: 'Access-Control-Allow-Origin', value: '*'});
      return {responseHeaders: details.responseHeaders};
    }
  },
  {urls: ["*://your-cdn-domain.com/*"]}, // 拦截CDN的图像请求
  ["blocking", "responseHeaders", "extraHeaders"] // 必须添加extraHeaders才能修改部分响应头
);

3. 内容脚本正常读取图像数据：

// content.js
const targetImg = document.querySelector('img.target'); // 替换成你要获取的图像选择器
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = targetImg.width;
canvas.height = targetImg.height;
ctx.drawImage(targetImg, 0, 0);

try {
  const dataUrl = canvas.toDataURL('image/png');
  console.log('图像Base64数据:', dataUrl);
  
  // 如果需要原始像素数组
  const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  console.log('原始像素数组:', pixelData);
} catch (e) {
  console.error('读取失败:', e);
}

总结 #

• 内容脚本无法突破同源策略读取跨域图像，除非服务器允许或通过扩展特权API绕过。
• 截图类扩展的核心是使用chrome.tabs.captureVisibleTab这类特权API，直接从浏览器层面捕获内容。
• 如果你需要单张图像的原始数据，修改CORS头是更精准的方案，但需要配置对应的拦截规则。

内容的提问来源于stack exchange，提问作者s1gtrap