如何在 Chrome 擴充功能中擷取 HTTP 回應內文

在 Chrome 擴充功能後台腳本中擷取 HTTP 回應內文是一項挑戰。雖然擴充功能可以使用 chrome.webRequest.onBeforeRequest 存取請求正文，但通常無法取得回應正文。

為了克服此限制，一種創造性的方法涉及利用 chrome.debugger API。此 API 允許擴充功能調試瀏覽器的網路活動並與之互動。以下是詳細實作：

1. 使用 chrome.tabs.query 和 chrome.debugger.attach 建立與目前標籤的連線。
2. 透過發送 Network.enable 指令啟用網路偵錯到選項卡。
3. 註冊 Network.responseReceived 事件的事件監聽器。
4. 收到回應後，發送 Network.getResponseBody 指令，並從事件參數指定 requestId。
5. 命令將返回回應正文，以便您根據需要進行處理。

// 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 ...
    });
  }
});

此方法可讓您擷取 HTTP 回應正文，而無需額外的瀏覽器頁面或第三方服務。請注意，完成後您可以使用 chrome.debugger.detach 關閉偵錯會話。