Captura de respuestas de encabezado HTTP en una extensión de Chrome

Antecedentes

Las extensiones de Chrome proporcionan la funcionalidad para modificar los encabezados de las solicitudes antes de enviarlas. Sin embargo, las API de extensión no admiten directamente el acceso a los encabezados de respuesta.

Solución: inyección de script DOM

Un enfoque para capturar respuestas HTTP es inyectar un script en el DOM del sitio web para monitorear la actividad de la red. Esta técnica utiliza el siguiente código:

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

Configuración de manifiesto

Para inyectar el script, actualice el archivo manifest.json de la extensión de la siguiente manera:

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

Resultado

Esta solución permite que la extensión capture y registre encabezados de solicitud y respuesta, lo que permite que la extensión recupere los encabezados deseados de la respuesta.