如何在 Chrome 扩展中捕获 HTTP 响应标头？-js教程-PHP中文网

如何在 Chrome 扩展中捕获 HTTP 响应标头？

Susan Sarandon

发布： 2024-11-08 06:09:01

原创

1145 人浏览过

How to Capture HTTP Response Headers in Chrome Extensions?

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