Wie kann ich HTTP-Header von Anfragen und Antworten einer bestimmten Website innerhalb einer Chrome-Erweiterung erfassen?

HTTP-Antworten in Chrome-Erweiterungen lesen

Das Abrufen des Headers einer von einer Website empfangenen Antwort in einer Chrome-Erweiterung ist nicht einfach. Chrome-Erweiterungs-APIs bieten keine solche direkte Funktionalität für Anfragen. Es gibt jedoch eine alternative Lösung.

Durch die Implementierung einer Technik, die ein Skript in das DOM einer Website einfügt, können Sie sowohl HTTP-Anfragen als auch Antworten dieser Website erfassen. Für die Skriptinjektion gibt es verschiedene Methoden, aber ein für diese Aufgabe geeigneter Ansatz ist das deklarative Inhaltsskript von ManifestV2/V3 gepaart mit „injection.js“.

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:

Dieses Skript wird in die Seite eingefügt und fängt Anfragen und Antworten ab. Es ist von einer Methode inspiriert, die in Wie wir AJAX-Anfragen von einem Website-Tab mit einer Chrome-Erweiterung erfasst haben beschrieben wird.

(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/*"]
    }
  ]
}

Mit dieser Technik können Sie innerhalb Ihrer Chrome-Erweiterung auf HTTP-Header sowohl für Anfragen als auch für Antworten zugreifen.

Das obige ist der detaillierte Inhalt vonWie kann ich HTTP-Header von Anfragen und Antworten einer bestimmten Website innerhalb einer Chrome-Erweiterung erfassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!