Comment capturer les en-têtes de réponse HTTP dans les extensions Chrome ?-js tutoriel-php.cn

Comment capturer les en-têtes de réponse HTTP dans les extensions Chrome ?

Susan Sarandon

Libérer： 2024-11-08 06:09:01

original

1145 Les gens l'ont consulté

How to Capture HTTP Response Headers in Chrome Extensions?

Comment lire les en-têtes de réponse HTTP dans les extensions Chrome

Message original :

Cette question vise à étendre une extension Chrome qui manipule les en-têtes de requête pour permettre l'inspection des en-têtes de réponse. L'utilisateur n'a pas pu localiser les API pertinentes dans les API de l'extension Chrome.

Solution :

La capture des réponses HTTP nécessite l'injection d'un script dans le DOM. Le code suivant illustre cette approche :

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

Copier après la connexion

Ce script injecte injected.js, qui contient le code pour capturer les requêtes et les réponses :

// 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' &amp;&amp; this.responseText) {
                    console.log(JSON.parse(this.responseText));
                }
            }
        });

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

})(XMLHttpRequest);

Copier après la connexion

Enfin, mettez à jour votre manifest.json pour inclure les scripts et les ressources nécessaires :

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

Copier après la connexion

Avec cette approche, vous pouvez désormais modifier les en-têtes de requête et capturer les en-têtes de réponse dans le même Chrome extension.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!