Chrome 拡張機能内の特定の Web サイトからのリクエストとレスポンスの HTTP ヘッダーをキャプチャするにはどうすればよいですか?

Chrome 拡張機能で HTTP レスポンスを読み取る

Chrome 拡張機能で Web サイトから受信したレスポンスのヘッダーを取得するのは簡単ではありません。 Chrome 拡張 API は、リクエストに対するような直接的な機能を提供しません。ただし、代替ソリューションが存在します。

Web サイトの DOM にスクリプトを挿入する手法を実装すると、その Web サイトによって行われた HTTP リクエストと応答の両方をキャプチャできます。スクリプトインジェクションにはさまざまな方法が存在しますが、このタスクに適したアプローチの 1 つは、ManifestV2/V3 の宣言型コンテンツ スクリプトと組み合わせたものです。注入.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:

このスクリプトはページにアクセスし、リクエストとレスポンスをインターセプトします。これは、Chrome 拡張機能を使用して Web サイトのタブから AJAX リクエストをキャプチャする方法で説明されているメソッドからインスピレーションを得ています。

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

この手法を使用すると、Chrome 内でリクエストとレスポンスの両方の HTTP ヘッダーにアクセスできます。拡張子。

以上がChrome 拡張機能内の特定の Web サイトからのリクエストとレスポンスの HTTP ヘッダーをキャプチャするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。