首页 >web前端 >js教程 >如何在 Chrome 扩展中捕获 HTTP 标头响应?

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

Patricia Arquette
Patricia Arquette原创
2024-11-06 18:40:02317浏览

How to Capture HTTP Header Responses in a Chrome Extension?

在 Chrome 扩展程序中捕获 HTTP 标头响应

后台

Chrome 扩展程序提供此功能在发送请求头之前修改请求头。但是,扩展 API 不直接支持访问响应标头。

解决方案:DOM 脚本注入

捕获 HTTP 响应的一种方法是将脚本注入到网站的 DOM 来监控网络活动。此技术使用以下代码:

// Background script: 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);

// Content script: injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;

    ['open', 'setRequestHeader', 'send'].forEach(function(method) {
        var originalMethod = XHR[method];

        XHR[method] = function() {
            // Intercept events and capture request and response headers
            ...
        };
    });

})(XMLHttpRequest);

清单配置

要注入脚本,请按如下方式更新扩展的manifest.json:

"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 标头响应?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn