11

ブラウザーが要求したリソースのリスト (この Chrome インスペクターのネットワーク パネルにあるもの) にアクセスする方法はありますか?

ネットワーク リソース

これらのフェッチされたリソースを繰り返し処理して、アクセスされたドメインを次のように表示できるようにしたいと考えています。

for (var i = 0; i < window.navigator.resources.length; i++) {
  var resource = window.navigator.resources[i];
  console.log(resource); //=> e.g. `{domain: "www.google-analytics.com", name: "ga.js"}`
}

または、次のようなハンドラを作成するイベントがある可能性があります。

window.navigator.onrequest = function(resource) {
  console.log(resource); //=> e.g. `{domain: "www.google-analytics.com", name: "ga.js"}`
}

クロスブラウザーで動作する必要はなく、クライアント側の JavaScript を使用することさえ可能です。何らかの方法でこの情報にアクセスできるだけでうまくいきます (おそらく、phantomjs を使用するか、シェル/ノード スクリプトからネットワーク トラフィックを監視する方法があります)。何か案は？

4

2 に答える 2

11

これは可能ですが、Chrome 拡張機能を使用する必要があります。

Chrome 拡張機能には、多くのサンドボックス スタイルのセキュリティがあります。Chrome 拡張機能と Web ページの間の通信は、複数のステップからなるプロセスです。最後に完全に機能する例を示して、私が提供できる最も簡潔な説明を次に示します。

  1. Chrome 拡張機能はchrome.* APIに完全にアクセスできますが、Chrome 拡張機能は Web ページ JS と直接通信することも、Web ページ JS が Chrome 拡張機能と直接通信することもできません。

  2. Chrome 拡張機能と Web ページの間のギャップを埋めるには、コンテンツ スクリプトを使用する必要があります。コンテンツ スクリプトは、基本的windowに、対象の Web ページの範囲で挿入される JavaScript です。コンテンツ スクリプトは、関数を呼び出したり、Web ページ JS によって作成された変数にアクセスしたりすることはできませんが、同じ DOM へのアクセスを共有するため、イベントも共有します。

  3. 変数に直接アクセスして関数を呼び出すことは許可されていないため、Web ページとコンテンツ スクリプトが通信できる唯一の方法は、カスタム イベントを発生させることです。

たとえば、Chrome 拡張機能からページにメッセージを渡したい場合は、次のようにします。

content_script.js

document.getElementById("theButton").addEventListener("click", function() {
    window.postMessage({ type: "TO_PAGE", text: "Hello from the extension!" }, "*");
}, false);

web_page.js

window.addEventListener("message", function(event) {
    // We only accept messages from ourselves
    if (event.source != window)
      return;

    if (event.data.type && (event.data.type == "TO_PAGE")) {
      alert("Received from the content script: " + event.data.text);
    }
}, false);

4. コンテンツ スクリプトから Web ページにメッセージを送信できるようになったので、必要なネットワーク情報をすべて収集する Chrome 拡張機能が必要になります。いくつかの異なるモジュールを使用してこれを実現できますが、最も単純なオプションはwebRequestモジュールです (以下のbackground.js を参照)。

`5. メッセージ パッシングを使用して、Web リクエストの情報をコンテンツ スクリプトにリレーし、次に Web ページ JavaScript にリレーします。

視覚的には、次のように考えることができます。

Chrome 拡張機能とコンテンツ スクリプト

完全な作業例:

最初の 3 つのファイルは Google Chrome 拡張機能を構成し、最後のファイルは HTML ファイルで、http://どこかの Web スペースにアップロードする必要があります。

icon.png

任意の 16x16 PNG ファイルを使用してください。

マニフェスト.json

{
  "name": "webRequest Logging",
  "description": "Displays the network log on the web page",
  "version": "0.1",
  "permissions": [
    "tabs",
    "debugger",
    "webRequest",
    "http://*/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "webRequest Logging"
  },
   "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content_script.js"]
    }
  ],
  "manifest_version": 2
}

background.js

var aNetworkLog = [];

chrome.webRequest.onCompleted.addListener(function(oCompleted) {
            var sCompleted = JSON.stringify(oCompleted);
            aNetworkLog.push(sCompleted);
        }
        ,{urls: ["http://*/*"]}
 );

chrome.extension.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
        if (message.action == "getNetworkLog") {
            port.postMessage(aNetworkLog);
        }
    });
});

content_script.js

var port = chrome.extension.connect({name:'test'});

document.getElementById("theButton").addEventListener("click", function() {

    port.postMessage({action:"getNetworkLog"});

}, false);

port.onMessage.addListener(function(msg) {
  document.getElementById('outputDiv').innerHTML = JSON.stringify(msg);
});

そして、Webページに次を使用します（好きな名前を付けます）：

<!doctype html>
<html>
<head>
    <title>webRequest Log</title>
</head>
<body>
    <input type="button" value="Retrieve webRequest Log" id="theButton">
    <div id="outputDiv"></div>
</head>
</html>
于 2013-01-21T01:23:28.100 に答える