Heim > Web-Frontend > js-Tutorial > Wie erfasst man HTTP-Antwortheader in Chrome-Erweiterungen?

Wie erfasst man HTTP-Antwortheader in Chrome-Erweiterungen?

Susan Sarandon
Freigeben: 2024-11-08 06:09:01
Original
1145 Leute haben es durchsucht

How to Capture HTTP Response Headers in Chrome Extensions?

So lesen Sie HTTP-Antwortheader in Chrome-Erweiterungen

Originalbeitrag:

Diese Frage zielt darauf ab, eine Chrome-Erweiterung zu erweitern Das manipuliert Anforderungsheader, um die Überprüfung von Antwortheadern zu ermöglichen. Der Benutzer konnte keine relevanten APIs in den Chrome-Erweiterungs-APIs finden.

Lösung:

Für die Erfassung von HTTP-Antworten muss ein Skript in das DOM eingefügt werden. Der folgende Code demonstriert diesen Ansatz:

// 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);
Nach dem Login kopieren

Dieses Skript fügt inject.js ein, das den Code zum Erfassen von Anfragen und Antworten enthält:

// 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);
Nach dem Login kopieren

Aktualisieren Sie abschließend Ihre manifest.json auf Fügen Sie die erforderlichen Skripte und Ressourcen hinzu:

// 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"]
}
Nach dem Login kopieren

Mit diesem Ansatz können Sie jetzt Anforderungsheader ändern und Antwortheader innerhalb derselben Chrome-Erweiterung erfassen.

Das obige ist der detaillierte Inhalt vonWie erfasst man HTTP-Antwortheader in Chrome-Erweiterungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage