如何在Chrome扩展中正确拦截POST请求及获取响应体？

你当前的代码只能获取请求体，但chrome.webRequest API本身没办法直接获取响应体。要拿到Facebook广告库POST请求的响应内容，得用chrome.debugger API配合网络事件监听来实现，以下是可行方案：

步骤1：配置扩展权限 #

先在你的manifest.json里添加必要权限：

{
  "manifest_version": 3,
  "name": "FB广告库响应拦截",
  "version": "1.0",
  "permissions": ["debugger", "webRequest", "tabs"],
  "host_permissions": ["https://www.facebook.com/*"]
}

步骤2：实现响应体拦截代码 #

替换你现有的代码，用下面的逻辑：

// 监听标签页加载完成，启动调试器
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.includes('facebook.com/ads/library')) {
    try {
      // 附加调试器到目标标签页
      await chrome.debugger.attach({ tabId }, '1.3');
      
      // 启用网络调试能力
      await chrome.debugger.sendCommand({ tabId }, 'Network.enable');
      
      // 监听响应接收事件
      chrome.debugger.onEvent.addListener(async (source, method, params) => {
        // 只处理POST请求的响应
        if (method === 'Network.responseReceived' && params.request.method === 'POST') {
          const requestId = params.requestId;
          // 获取响应体内容
          const responseBody = await chrome.debugger.sendCommand(
            { tabId: source.tabId },
            'Network.getResponseBody',
            { requestId }
          );
          
          // 处理并保存响应体（可改成写入本地文件或存储到扩展存储）
          console.log('POST响应体:', responseBody.body);
          // 若是JSON格式，可直接解析
          try {
            const parsedData = JSON.parse(responseBody.body);
            console.log('解析后的响应:', parsedData);
          } catch (e) {
            console.log('响应非JSON格式');
          }
        }
      });
    } catch (err) {
      console.error('调试器启动失败:', err);
    }
  }
});

// 标签页关闭时自动断开调试器
chrome.tabs.onRemoved.addListener((tabId) => {
  chrome.debugger.detach({ tabId });
});

关键说明 #

• chrome.debugger API通过Chrome调试协议获取网络响应体，这是目前Chrome扩展中获取响应内容的可靠方式
• 仅针对Facebook广告库页面启动调试器，避免干扰其他站点
• 响应体若为gzip/deflate压缩格式，Network.getResponseBody会自动解压，直接返回明文内容
• 测试时需确保扩展已加载，刷新Facebook广告库页面后即可触发拦截逻辑

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