Chrome扩展V3：使用chrome.devtools.network读取API响应体遇报错求助

错误原因 #

你遇到的'getContent' is not a function报错，核心问题是调用对象错误：api.response并没有getContent方法，这个方法属于onRequestFinished回调参数（即HAREntry请求条目对象）本身。

修正后的代码 #

// 封装getContent为Promise风格
const getContent = async (requestEntry) => {
  return new Promise((resolve, reject) => {
    requestEntry.getContent((body, encoding) => {
      if (body) {
        resolve(body);
      } else {
        reject(new Error('Failed to get response content'));
      }
    });
  });
};

chrome.devtools.network.onRequestFinished.addListener(async (api) => {
  if (api.request.url.includes('https://developer.mozilla.org/pong/get')) {
    try {
      const responseBody = await getContent(api); // 传入请求条目对象而非response
      console.log('Response Body:', responseBody);
    } catch (err) {
      console.error('Error getting response content:', err);
    }
  }
});

额外注意事项 #

• Manifest配置：确保你的manifest.json正确声明了devtools_page，示例如下：

{
  "manifest_version": 3,
  "name": "API Response Capture",
  "version": "1.0",
  "devtools_page": "devtools.html"
}

• DevTools页面结构：devtools.html需要引入你的脚本文件，比如：

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

• 响应编码处理：如果响应是二进制或特定编码，getContent的第二个参数encoding可以指定编码格式（比如'base64'）来获取对应格式的内容。

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