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. 응답이 수신되면 이벤트 매개변수에서 requestId를 지정하는 Network.getResponseBody 명령을 보냅니다.
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를 사용하여 디버깅 세션을 닫을 수 있습니다.