Chrome 확장 프로그램에서 HTTP 헤더 응답 캡처

배경

Chrome 확장 프로그램은 다음 기능을 제공합니다. 요청 헤더를 보내기 전에 수정합니다. 그러나 응답 헤더에 대한 액세스는 확장 API에서 직접 지원되지 않습니다.

해결책: DOM 스크립트 삽입

HTTP 응답을 캡처하는 한 가지 접근 방식은 웹사이트의 DOM을 사용하여 네트워크 활동을 모니터링합니다. 이 기술은 다음 코드를 사용합니다:

// Background script: inject.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

// Content script: injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;

    ['open', 'setRequestHeader', 'send'].forEach(function(method) {
        var originalMethod = XHR[method];

        XHR[method] = function() {
            // Intercept events and capture request and response headers
            ...
        };
    });

})(XMLHttpRequest);

매니페스트 구성

스크립트를 삽입하려면 확장 프로그램의 매니페스트.json을 다음과 같이 업데이트하세요.

"content_scripts": [{
    "matches": ["*://website.com/*"],
    "run_at": "document_start",
    "js": ["contentscript.js", "inject.js"]
}],
"web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["*://website.com/*"]
}]

결과

이 솔루션을 사용하면 확장 프로그램이 요청 및 응답 헤더를 모두 캡처하고 기록할 수 있으므로 확장 프로그램이 응답에서 원하는 헤더를 검색할 수 있습니다.