如何在 Chrome 擴充功能中擷取來自特定網站的請求和回應的 HTTP 標頭？

在Chrome 擴充功能中讀取HTTP 回應

在Chrome 擴充程式中取得從網站收到的回應的標頭並不簡單。 Chrome 擴充 API 不提供類似請求的直接功能。但是，存在替代解決方案。

透過實作將腳本注入網站 DOM 的技術，您可以擷取網站發出的 HTTP 請求和回應。腳本注入有多種方法，但適合此任務的一種方法是 ManifestV2/V3 的聲明性內容腳本與injection.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 擴充功能從網站選項卡捕捉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 擴充功能中擷取來自特定網站的請求和回應的 HTTP 標頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！