Chrome扩展开发：自动解密并下载网站Blob格式图片的问题

你的核心问题是把二进制图片数据当成文本处理了：atob解码后得到的是ASCII字符串，直接用这个字符串创建text/plain类型的Blob，会让浏览器用UTF-8编码重新转换字节，破坏了PNG的原始二进制结构。

修正步骤如下：

• 将atob解码后的字符串转换为Uint8Array二进制数组，保留原始字节
• 使用响应头中的Content-Type作为Blob的类型（而非固定text/plain）
• 增加图片类型过滤，避免处理非图片的Blob请求

修改后的panel.js代码 #

let a = document.getElementById('a');

chrome.devtools.network.onRequestFinished.addListener(request => {
  // 只处理图片类型的Blob请求
  const isImageBlob = request.request?.url.includes('blob') && 
                      request.response?.content?.mimeType?.startsWith('image/');
  
  if (!isImageBlob) return;

  request.getContent((body) => {
    // 将Base64解码后的字符串转成Uint8Array二进制数组
    const byteArray = new Uint8Array(body.length);
    for (let i = 0; i < body.length; i++) {
      byteArray[i] = body.charCodeAt(i);
    }

    // 使用响应的实际MIME类型创建Blob
    const blob = new Blob([byteArray], { type: request.response.content.mimeType });
    const url = window.URL.createObjectURL(blob);

    // 触发下载
    const downloadLink = document.createElement('a');
    downloadLink.style.display = 'none';
    downloadLink.href = url;
    // 自动匹配图片后缀
    downloadLink.download = `image.${request.response.content.mimeType.split('/')[1]}`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    
    window.URL.revokeObjectURL(url);
  });
});

关键说明 #

• 二进制转换：atob返回的字符串中，每个字符对应原始二进制的一个字节（0-255范围），通过charCodeAt(0)取每个字符的ASCII码存入Uint8Array，就能完整保留图片的原始二进制数据。
• 正确的MIME类型：从request.response.content.mimeType获取实际的图片类型（比如image/png），确保Blob被识别为正确的图片格式。
• 请求过滤：增加startsWith('image/')的判断，避免处理JS、CSS等其他类型的Blob请求，减少无效操作。

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