首页 >web前端 >js教程 >如何在 Chrome 扩展程序中捕获 HTTP 响应正文?

如何在 Chrome 扩展程序中捕获 HTTP 响应正文?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-25 03:42:02326浏览

How do I capture HTTP response bodies within a Chrome extension?

如何在 Chrome 扩展程序中捕获 HTTP 响应正文

简介:

在 Chrome 扩展程序中,获取有关 HTTP 请求的信息对于许多任务至关重要,例如分析网络流量或修改响应。虽然访问请求正文很简单,但检索响应正文却带来了更大的挑战。

获取 HTTP 响应正文:

最初,直接从 Chrome 扩展程序访问响应正文几乎是不可能的不可能的。然而,现在的解决方案在于利用 Chrome DevTools 协议中的 Network.getResponseBody API。

使用 Network.getResponseBody API:

要使用 Network.getResponseBody API 捕获响应正文,请按照以下步骤操作:

  1. 启用调试:使用 chrome.debugger.attach() 将 Chrome 调试器附加到当前选项卡,并启用 Network.enable() 命令。
  2. 监听响应事件:订阅 Network.responseReceived 事件,该事件在收到响应时触发。
  3. 获取响应正文:收到事件后,发送带有响应的 requestId 的 Network.getResponseBody 命令以检索其正文。

代码示例:

<code class="javascript">chrome.tabs.query(
  { currentWindow: true, active: true },
  function (tabArray) {
    let currentTab = tabArray[0];
    chrome.debugger.attach(
      { tabId: currentTab.id },
      "1.0",
      onAttach.bind(null, currentTab.id)
    );
  }
);

function onAttach(tabId) {
  chrome.debugger.sendCommand({ tabId: tabId }, "Network.enable");
  chrome.debugger.onEvent.addListener(allEventHandler);
}

function allEventHandler(debuggeeId, message, params) {
  if (currentTab.id != debuggeeId.tabId) {
    return;
  }
  if (message == "Network.responseReceived") {
    chrome.debugger.sendCommand(
      { tabId: debuggeeId.tabId },
      "Network.getResponseBody",
      { requestId: params.requestId },
      function (response) {
        // Access the response body in 'response.body'
        // Close the debugger (optional)
        chrome.debugger.detach(debuggeeId);
      }
    );
  }
}</code>

注意:

调试器功能(包括此 API)仅在后台脚本中可用。您不能在内容脚本中使用此技术,它在页面上下文中运行。

以上是如何在 Chrome 扩展程序中捕获 HTTP 响应正文?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn