如何将chrome.webrequest的requestBody.raw及request.raw转换为JSON格式？

我来帮你解决这个问题，在Chrome扩展的chrome.webRequest API里处理请求体的转换其实并不复杂，分两种场景给你详细说明：

一、处理requestBody.raw转换为JSON #

当你通过chrome.webRequest的onBeforeRequest或onSendHeaders等事件获取到details.requestBody.raw时，它本质是一个数组，每个元素包含bytes（请求体的ArrayBuffer格式数据）或file（上传文件时的文件信息）。对于JSON格式的请求体，我们只需要把bytes转换为字符串再解析成JSON即可：

示例代码 #

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    // 先判断requestBody和raw是否存在，避免报错
    if (!details.requestBody || !details.requestBody.raw) return;

    // 遍历raw数组（通常JSON请求体只会在第一个元素里）
    for (const rawItem of details.requestBody.raw) {
      if (rawItem.bytes) {
        // 使用TextDecoder将ArrayBuffer转为UTF-8字符串
        const decoder = new TextDecoder('utf-8');
        const requestBodyStr = decoder.decode(rawItem.bytes);
        
        try {
          // 解析为JSON对象
          const requestBodyJson = JSON.parse(requestBodyStr);
          console.log('解析后的请求体JSON:', requestBodyJson);
          // 这里可以做你需要的后续处理
        } catch (error) {
          console.error('注意：请求体不是有效的JSON格式', error);
        }
      }
    }
  },
  { urls: ["<all_urls>"] }, // 监听所有URL，可根据需求调整
  ["requestBody"] // 必须声明这个参数才能获取请求体数据
);

关键注意点 #

1. 权限声明：在扩展的manifest.json里必须添加对应的权限，比如：

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

2. 编码适配：如果请求体不是UTF-8编码（比如GBK），可以修改TextDecoder的参数为对应编码，但Chrome支持的编码有限，需要提前确认。
3. 异常处理：一定要加try-catch，因为不是所有请求体都是JSON格式，解析失败会直接抛出错误。

二、关于「request.raw数据转换为JSON」的澄清与解决方案 #

在Chrome的chrome.webRequest API中，并没有名为request.raw的直接属性，我猜测你可能是指以下两种常见场景，分别给出处理方式：

场景1：GET请求的URL查询参数转JSON #

GET请求的参数通常在URL的查询字符串里，你可以通过details.url提取并转换为JSON对象：

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    const urlObj = new URL(details.url);
    // 将URLSearchParams转换为JSON
    const queryParamsJson = Object.fromEntries(urlObj.searchParams.entries());
    console.log('GET请求参数JSON:', queryParamsJson);
  },
  { urls: ["<all_urls>"] }
);

场景2：获取完整请求的原始数据（含请求头+请求体） #

如果需要获取整个请求的原始字节流（包括请求行、请求头和请求体），chrome.webRequest API做不到，需要用chrome.debugger API配合Network域来捕获：

// 注意：需要先获取目标标签页的tabId，这里假设你已经拿到了tabId
chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
  chrome.debugger.sendCommand({ tabId: tabId }, 'Network.enable');
  
  chrome.debugger.onEvent.addListener((source, method, params) => {
    if (method === 'Network.requestWillBeSent' && params.request.postData) {
      try {
        const postDataJson = JSON.parse(params.request.postData.text);
        console.log('完整请求的POST数据JSON:', postDataJson);
      } catch (error) {
        console.error('POST数据不是有效JSON:', error);
      }
    }
  });
});

使用chrome.debugger需要在manifest.json里添加"debugger"权限，且这种方式需要用户授权调试对应的标签页。

内容的提问来源于stack exchange，提问作者天气君