Chrome 拡張機能で HTTP 応答ヘッダーをキャプチャする方法

Chrome 拡張機能で HTTP 応答ヘッダーを読み取る方法

元の投稿:

この質問は Chrome 拡張機能を拡張することを目的としていますリクエスト ヘッダーを操作して、応答ヘッダーの検査を可能にします。ユーザーは Chrome 拡張 API で関連する API を見つけることができませんでした。

解決策:

HTTP 応答をキャプチャするには、DOM にスクリプトを挿入する必要があります。次のコードは、このアプローチを示しています。

// 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 を挿入します。

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

最後に、manifest.json を次のように更新します。必要なスクリプトとリソースを含めます:

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

このアプローチにより、リクエスト ヘッダーを変更し、レスポンスをキャプチャできるようになりました。同じ Chrome 拡張機能内のヘッダー。

以上がChrome 拡張機能で HTTP 応答ヘッダーをキャプチャする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。