Capture des réponses d'en-tête HTTP dans une extension Chrome

Arrière-plan

Les extensions Chrome fournissent la fonctionnalité pour modifier les en-têtes des requêtes avant de les envoyer. Cependant, l'accès aux en-têtes de réponse n'est pas directement pris en charge par les API d'extension.

Solution : injection de script DOM

Une approche pour capturer les réponses HTTP consiste à injecter un script dans le DOM du site Web pour surveiller l'activité du réseau. Cette technique utilise le code suivant :

// Background script: 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);

// Content script: injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;

    ['open', 'setRequestHeader', 'send'].forEach(function(method) {
        var originalMethod = XHR[method];

        XHR[method] = function() {
            // Intercept events and capture request and response headers
            ...
        };
    });

})(XMLHttpRequest);

Configuration du manifeste

Pour injecter le script, mettez à jour le manifest.json de l'extension comme suit :

"content_scripts": [{
    "matches": ["*://website.com/*"],
    "run_at": "document_start",
    "js": ["contentscript.js", "inject.js"]
}],
"web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["*://website.com/*"]
}]

Résultat

Cette solution permet à l'extension de capturer et d'enregistrer les en-têtes de demande et de réponse, permettant à l'extension de récupérer les en-têtes souhaités de la réponse.