Chrome扩展Manifest v3：无法通过webRequest获取requestBody求助

你遇到的requestBody返回{error: "Unknown error"}的情况，通常是Chrome的webRequest API在特定场景下的限制导致的，下面是具体的排查和解决方法：

一、排查核心原因 #

1. 请求类型限制：日志里显示请求类型是ping，Chrome对这类非标准请求类型，通常不会解析并返回requestBody，这类请求一般也不携带业务参数。
2. 安全/性能限制：对于部分POST请求（比如使用fetch的no-cors模式、大体积请求体、multipart/form-data编码的请求），webRequest API无法读取请求体，会直接返回错误。
3. 过滤规则问题：确认analyticsHost变量是否正确匹配目标Analytics服务的域名，避免监听了无关请求。

二、具体解决方案 #

方案1：优化webRequest监听规则 #

调整监听的请求类型，只针对可能携带业务参数的请求类型（如xmlhttprequest、fetch），同时补充必要权限：

1. 更新manifest.json的权限：

{
  "permissions": ["storage", "webRequest", "webRequestBlocking", "tabs", "background"],
  // 其他配置保持不变
}

2. 修改background.js的监听逻辑：

// 先确保analyticsHost已正确定义，比如const analyticsHost = "你的Analytics域名";
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (details.url.includes(analyticsHost)) {
      console.log("捕获到请求:", details);
      // 尝试解析requestBody（如果存在）
      if (details.requestBody?.formData) {
        console.log("表单数据:", details.requestBody.formData);
      } else if (details.requestBody?.raw) {
        // 处理raw格式的请求体，转为字符串
        const rawBody = new TextDecoder().decode(details.requestBody.raw[0].bytes);
        console.log("原始请求体:", rawBody);
      }
      capturedData.push(details);
      broadcastData();
    }
  },
  { 
    urls: ["<all_urls>"],
    types: ["xmlhttprequest", "fetch"] // 只监听这两类常见业务请求
  },
  ["requestBody", "blocking"]
);

方案2：改用Chrome DevTools Network API（更可靠） #

如果webRequest无法满足需求，利用你已配置的devtools_page，通过DevTools API可以更稳定地获取请求体：

1. 在devtools.html中引入devtools.js：

<!DOCTYPE html>
<html>
<head>
  <script src="devtools.js"></script>
</head>
<body></body>
</html>

2. 编写devtools.js的逻辑：

// 监听请求完成事件
chrome.devtools.network.onRequestFinished.addListener((request) => {
  const targetHost = "你的Analytics域名"; // 替换为实际域名
  if (request.request.url.includes(targetHost) && request.request.method === "POST") {
    // 获取请求体内容
    request.getContent((content, encoding) => {
      console.log("POST请求体:", content);
      // 将内容传递给background或popup供查看
      chrome.runtime.sendMessage({ type: "ANALYTICS_DATA", data: content });
    });
  }
});

3. 在background.js中接收消息并存储：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "ANALYTICS_DATA") {
    capturedData.push(message.data);
    broadcastData();
  }
});

三、注意事项 #

• DevTools API仅在打开DevTools面板时生效，如果需要后台持续监听，优先用优化后的webRequest方案，也可结合两种方案覆盖更多场景。
• 对于multipart/form-data类型的请求，webRequest可能无法解析，此时DevTools API的getContent能直接返回原始内容，你可以自行解析。

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