ホームページ > ウェブフロントエンド > jsチュートリアル > Chrome 拡張機能で HTTP ヘッダー応答をキャプチャする方法

Chrome 拡張機能で HTTP ヘッダー応答をキャプチャする方法

Patricia Arquette
リリース: 2024-11-06 18:40:02
オリジナル
347 人が閲覧しました

How to Capture HTTP Header Responses in a Chrome Extension?

Chrome 拡張機能での HTTP ヘッダー応答のキャプチャ

バックグラウンド

Chrome 拡張機能は次の機能を提供しますリクエストヘッダーを送信する前に変更します。ただし、応答ヘッダーへのアクセスは、拡張 API では直接サポートされていません。

解決策: DOM スクリプト インジェクション

HTTP 応答をキャプチャする 1 つの方法は、スクリプトをWeb サイトの 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);
ログイン後にコピー

マニフェスト構成

スクリプトを挿入するには、拡張機能の manage.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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート