Maison > Article > interface Web > Comment puis-je capturer les en-têtes HTTP des requêtes et des réponses d'un site Web spécifique dans une extension Chrome ?
Lire les réponses HTTP dans les extensions Chrome
Obtenir l'en-tête d'une réponse reçue d'un site Web dans une extension Chrome n'est pas simple. Les API d'extension Chrome ne fournissent pas de fonctionnalités directes comme celles pour les requêtes. Cependant, une solution alternative existe.
En implémentant une technique qui injecte un script dans le DOM d'un site Web, vous pouvez capturer à la fois les requêtes HTTP et les réponses émises par ce site Web. Il existe diverses méthodes pour l'injection de script, mais une approche adaptée à cette tâche est le script de contenu déclaratif de ManifestV2/V3 associé à 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 :
Ce script injecte dans la page et intercepte les demandes et les réponses. Il s'inspire d'une méthode décrite dans Comment nous avons capturé les requêtes AJAX à partir d'un onglet de site Web avec une extension Chrome.
(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/*"] } ] }
Avec cette technique, vous pouvez accéder aux en-têtes HTTP pour les requêtes et les réponses au sein de votre extension Chrome.
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!