如何用JavaScript获取网页所有标签的资源请求数据包？

你提到的window.performance.getEntriesByType("resource")确实有明显局限性：它只能捕获已完成加载且被浏览器标记为"资源"的请求，仅提供性能元数据，完全拿不到请求/响应的数据包内容；至于带hidden属性的img请求没被捕获，大概率是浏览器资源加载优先级策略导致（隐藏元素的资源可能被延迟加载，调用方法时还未完成加载），但核心问题是这个方法根本满足不了你获取数据包的需求。

针对浏览器插件开发，以下是两种可行方案：

方案1：使用浏览器扩展webRequest API（推荐） #

这是浏览器扩展专属的特权API，能从网络层面拦截所有进出请求（不管对应DOM元素是否隐藏），还能获取完整的请求头、响应头，甚至读取响应体内容。

配置与代码示例： #

1. 在扩展manifest.json中声明权限（以Manifest V3为例）：

{
  "manifest_version": 3,
  "name": "资源请求捕获工具",
  "version": "1.0",
  "permissions": ["webRequest", "<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

2. 在后台脚本background.js中监听请求：

// 监听所有图片请求的完成事件，获取请求/响应头
chrome.webRequest.onCompleted.addListener(
  (details) => {
    if (details.type === "image") {
      console.log("捕获图片请求：", details.url);
      console.log("请求头：", details.requestHeaders);
      console.log("响应头：", details.responseHeaders);
      // 可根据details中的信息区分请求（比如URL、请求头等）
    }
  },
  { urls: ["<all_urls>"] },
  ["requestHeaders", "responseHeaders"]
);

// 如果需要获取响应体，修改监听配置：
chrome.webRequest.onCompleted.addListener(
  (details) => {
    if (details.type === "image" && details.responseBody) {
      // 将响应体转为Base64格式
      const bodyBase64 = details.responseBody.raw 
        ? btoa(String.fromCharCode(...new Uint8Array(details.responseBody.raw)))
        : details.responseBody.bytes;
      console.log("图片响应体Base64：", bodyBase64);
    }
  },
  { urls: ["<all_urls>"] },
  ["responseBody"]
);

这个方案能覆盖所有资源请求，不受DOM元素状态影响，是浏览器插件捕获网络请求的标准方案。

方案2：重写DOM元素加载逻辑（内容脚本场景） #

如果需要关联到具体的DOM标签（比如判断是否带hidden属性），可以在内容脚本中重写img等标签的src属性 setter，手动发起请求并捕获数据包：

// 内容脚本中执行
const originalSrcSetter = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src').set;

Object.defineProperty(HTMLImageElement.prototype, 'src', {
  set: function(value) {
    // 判断当前img是否带hidden属性
    const isHidden = this.hasAttribute('hidden');
    // 手动发起请求捕获数据包
    fetch(value, { credentials: 'include' })
      .then(response => {
        console.log(`捕获图片请求${isHidden ? '(hidden)' : ''}：`, value);
        console.log("响应头：", response.headers);
        return response.blob();
      })
      .then(blob => {
        // 转成URL赋值给原src，不影响图片显示
        const url = URL.createObjectURL(blob);
        originalSrcSetter.call(this, url);
        console.log("图片响应体Blob：", blob);
      })
      .catch(err => {
        // 出错时回退到原加载逻辑
        originalSrcSetter.call(this, value);
        console.error("请求捕获失败：", err);
      });
  }
});

注意：如果页面通过setAttribute('src', ...)方式设置图片源，还需要额外重写Element.prototype.setAttribute方法来覆盖这种场景。

补充说明 #

performance.getEntriesByType("resource")无法捕获hidden img的常见原因：浏览器会对隐藏元素的资源加载优先级降级，延迟加载，如果你调用方法时该资源还未完成加载，就不会出现在性能条目中；但即便能捕获，它也无法提供数据包内容，因此不适合你的需求。

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