如何在Chrome扩展中通过Chrome Debugger捕获iframe的请求

要捕获页面中iframe的请求，你需要确保正确配置调试器的自动附加选项，并为所有关联目标启用Network监控，具体步骤如下：

1. 附加调试器时启用自动关联目标 #

在调用chrome.debugger.attach时，必须添加autoAttachRelated: true参数，这会让调试器自动附加到当前标签的所有关联目标（包括iframe、service worker等）：

chrome.debugger.attach(
  { tabId: tabId, autoAttachRelated: true },
  "1.3",
  () => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
      return;
    }
    // 为主标签启用Network域
    chrome.debugger.sendCommand({ tabId: tabId }, "Network.enable");
  }
);

2. 监听新目标附加事件，为子目标启用Network监控 #

当新的目标（比如iframe）被自动附加后，需要主动为其启用Network域，否则无法捕获该目标的请求：

chrome.debugger.onAttach.addListener((source) => {
  // 为新附加的目标启用Network监控
  chrome.debugger.sendCommand(source, "Network.enable", {}, (result) => {
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
    }
  });
});

3. 确保事件监听器处理所有目标的请求 #

你的chrome.debugger.onEvent监听器不要限制只处理主标签的source，要接收所有目标的事件，这样就能捕获iframe的请求：

chrome.debugger.onEvent.addListener((source, method, params) => {
  if (method === "Network.requestWillBeSent") {
    // 处理所有目标（主页面+iframe）的请求
    console.log("捕获到请求：", source, params);
  } else if (method === "Network.responseReceived") {
    // 检查状态码是否≥400
    if (params.response.status >= 400) {
      console.log("捕获到错误响应：", source, params);
    }
  }
});

4. 可选：处理目标分离的情况 #

为了避免内存泄漏，建议监听目标分离事件并做相应清理：

chrome.debugger.onDetach.addListener((source, reason) => {
  console.log("目标已分离：", source, reason);
  // 可在此移除针对该目标的特定监听或资源
});

关键注意点 #

• 确保扩展在manifest.json中声明debugger权限
• 保持autoAttachRelated: true的配置，不要手动关闭自动附加
• 每个目标（主页面/iframe）都需要单独调用Network.enable才能捕获其请求

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