Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menangkap Pengepala Respons HTTP dalam Sambungan Chrome?

Bagaimana untuk Menangkap Pengepala Respons HTTP dalam Sambungan Chrome?

Susan Sarandon
Lepaskan: 2024-11-08 06:09:01
asal
1143 orang telah melayarinya

How to Capture HTTP Response Headers in Chrome Extensions?

Cara Membaca Pengepala Respons HTTP dalam Sambungan Chrome

Siaran Asal:

Soalan ini bertujuan untuk melanjutkan sambungan Chrome yang memanipulasi pengepala permintaan untuk membolehkan pemeriksaan pengepala respons. Pengguna tidak dapat mencari API yang berkaitan dalam API Sambungan Chrome.

Penyelesaian:

Merakam respons HTTP memerlukan suntikan skrip ke dalam DOM. Kod berikut menunjukkan pendekatan ini:

// 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);
Salin selepas log masuk

Skrip ini menyuntik injected.js, yang mengandungi kod untuk menangkap permintaan dan respons:

// 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);
Salin selepas log masuk

Akhir sekali, kemas kini manifest.json anda kepada sertakan skrip dan sumber yang diperlukan:

// 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"]
}
Salin selepas log masuk

Dengan pendekatan ini, anda kini boleh mengubah suai pengepala permintaan dan menangkap pengepala respons dalam sambungan Chrome yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Menangkap Pengepala Respons HTTP dalam Sambungan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan