Chrome 확장 프로그램 내에서 특정 웹사이트의 요청 및 응답의 HTTP 헤더를 어떻게 캡처할 수 있나요?

Chrome 확장 프로그램에서 HTTP 응답 읽기

Chrome 확장 프로그램의 웹사이트에서 수신된 응답 헤더를 얻는 것은 간단하지 않습니다. Chrome 확장 API는 요청과 같은 직접적인 기능을 제공하지 않습니다. 그러나 대체 솔루션이 있습니다.

웹사이트의 DOM에 스크립트를 삽입하는 기술을 구현하면 해당 웹사이트에서 수행된 HTTP 요청과 응답을 모두 캡처할 수 있습니다. 스크립트 주입에는 다양한 방법이 있지만 이 작업에 적합한 한 가지 접근 방식은 주입.js와 쌍을 이루는 ManifestV2/V3의 선언적 콘텐츠 스크립트입니다.

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

injected.js:

이 스크립트는 페이지에 삽입하고 요청과 응답을 가로챕니다. Chrome 확장 프로그램을 사용하여 웹사이트 탭에서 AJAX 요청을 캡처한 방법에 설명된 방법에서 영감을 받았습니다.

(function(xhr) {
    var XHR = XMLHttpRequest.prototype;
    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;

    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();

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

    XHR.setRequestHeader = function(header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };

    XHR.send = function(postData) {
        this.addEventListener('load', function() {
            var endTime = (new Date()).toISOString();
            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if (myUrl) {
                if (postData) {
                    if (typeof postData === 'string') {
                        try {
                            this._requestHeaders = postData; 
                        } catch(err) {
                            console.log('Request Header JSON decode failed, transfer_encoding field could be base64');
                            console.log(err);
                        }
                    } else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') {
                            // do something if you need
                    }
                }
                var responseHeaders = this.getAllResponseHeaders();
                if (this.responseType != 'blob' && this.responseText) {
                    try {
                        var arr = this.responseText;
                        console.log(this._url);
                        console.log(JSON.parse(this._requestHeaders));
                        console.log(responseHeaders);
                        console.log(JSON.parse(arr));                        
                    } catch(err) {
                        console.log("Error in responseType try catch");
                        console.log(err);
                    }
                }
            }
        });

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

manifest.json:

{
  "manifest_version": 3,
  "name": "Extension Name",
  "description": "Some Desc.",
  "version": "1.1",
  "content_scripts": [
    {
      "matches": ["*://website.com/*"],
      "run_at": "document_start",
      "js": ["contentscript.js", "inject.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["injected.js"],
      "matches": ["*://website.com/*"]
    }
  ]
}

이 기술을 사용하면 Chrome 확장 프로그램 내의 요청과 응답 모두에 대한 HTTP 헤더에 액세스할 수 있습니다.

위 내용은 Chrome 확장 프로그램 내에서 특정 웹사이트의 요청 및 응답의 HTTP 헤더를 어떻게 캡처할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!