如何在 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中文网其他相关文章！