How to Retrieve HTTP Response Body in Chrome Extensions

Retrieving HTTP response body within a Chrome extension background script presents a challenge. While the extension can access the request body using chrome.webRequest.onBeforeRequest, getting the response body is typically not possible.

To overcome this limitation, a creative approach involves leveraging the chrome.debugger API. This API allows extensions to debug and interact with the browser's network activity. Here's a detailed implementation:

1. Establish a connection to the current tab using chrome.tabs.query and chrome.debugger.attach.
2. Enable network debugging by sending the Network.enable command to the tab.
3. Register an event listener for Network.responseReceived events.
4. When a response is received, send the Network.getResponseBody command specifying the requestId from the event parameters.
5. The response body will be returned by the command, allowing you to process it as needed.

// Attach to the current tab and enable network debugging.
chrome.tabs.query({ currentWindow: true, active: true }, tabs => {
  chrome.debugger.attach({ tabId: tabs[0].id }, '1.0', debuggeeId => {
    chrome.debugger.sendCommand({ tabId: debuggeeId.tabId }, 'Network.enable');
  });
});

// Listen for response received events.
chrome.debugger.onEvent.addListener((debuggeeId, message, params) => {
  if (debuggeeId.tabId !== currentTab.id) return;
  if (message === 'Network.responseReceived') {
    // Get the response body by sending a command.
    chrome.debugger.sendCommand({ tabId: debuggeeId.tabId }, 'Network.getResponseBody', { requestId: params.requestId }, response => {
      // The response body is now available.
      // ... Process the response body ...
    });
  }
});

This method allows you to retrieve the HTTP response body without the need for additional browser pages or third-party services. Note that you can close the debugging session using chrome.debugger.detach when you're finished.