Chrome 확장 프로그램에서 HTTP 응답 헤더를 캡처하는 방법은 무엇입니까?

Chrome 확장 프로그램에서 HTTP 응답 헤더를 읽는 방법

원본 게시물:

이 질문은 Chrome 확장 프로그램을 확장하려고 합니다. 응답 헤더를 검사할 수 있도록 요청 헤더를 조작하는 것입니다. 사용자가 Chrome 확장 API에서 관련 API를 찾을 수 없습니다.

해결책:

HTTP 응답을 캡처하려면 DOM에 스크립트를 삽입해야 합니다. 다음 코드는 이 접근 방식을 보여줍니다.

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

이 스크립트는 요청 및 응답을 캡처하는 코드가 포함된 주입된.js를 삽입합니다.

// injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;

    // Intercept open() to capture request details
    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();

        return open.apply(this, arguments);
    };

    // Intercept setRequestHeader() to track request headers
    XHR.setRequestHeader = function(header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };

    // Intercept send() to capture response details
    XHR.send = function(postData) {

        this.addEventListener('load', function() {
            var endTime = (new Date()).toISOString();

            // Retrieve request URL, headers, and response headers
            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if (myUrl) {
                // Print request headers, response headers, and response body (if available in string format)
                console.log(this._url);
                console.log(JSON.parse(this._requestHeaders));
                console.log(this.getAllResponseHeaders());
                if ( this.responseType != 'blob' && this.responseText) {
                    console.log(JSON.parse(this.responseText));
                }
            }
        });

        return send.apply(this, arguments);
    };

})(XMLHttpRequest);

마지막으로 매니페스트.json을 다음과 같이 업데이트합니다. 필요한 스크립트와 리소스를 포함합니다.

// manifest.json (MV3)
{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["*://website.com/*"],
      "run_at": "document_start",
      "js": ["contentscript.js", "inject.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["injected.js"],
      "matches": ["*://website.com/*"]
    }
  ]
}

// manifest.json (MV2)
{
  "web_accessible_resources": ["injected.js"]
}

이제 이 접근 방식을 사용하면 요청 헤더를 수정하고 동일한 Chrome 확장 프로그램입니다.

위 내용은 Chrome 확장 프로그램에서 HTTP 응답 헤더를 캡처하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!