如何用JavaScript记录获取的网络资源？

是否有方法访问浏览器请求的资源列表（在此Chrome inspector的网络面板中找到的资源）

我希望能够遍历这些获取的资源，以显示已访问的域，例如：

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"}`
}

---

它不需要跨浏览器工作，甚至不需要使用客户端JavaScript。只要能够以任何方式访问这些信息就行了（也许有某种方法可以使用phantomjs或通过shell/节点脚本查看网络流量）。有什么想法吗？

您可以这样做，但您需要使用Chrome扩展

Chrome扩展有很多沙盒式的安全性。Chrome扩展和网页之间的通信是一个多步骤的过程。下面是我能提供的最简洁的解释，最后是一个完整的工作示例：

Chrome扩展可以完全访问Chrome.*API，但Chrome扩展不能直接与网页JS通信，网页JS也不能直接与Chrome扩展通信

要缩小Chrome扩展和网页之间的差距，您需要使用。内容脚本本质上是在目标网页的

窗口

范围内注入的JavaScript。内容脚本既不能调用函数，也不能访问由网页JS创建的变量，，但它们确实共享对同一DOM的访问，因此也共享对事件的访问

由于不允许直接访问变量和调用函数，因此网页和内容脚本通信的唯一方式是触发自定义事件

例如，如果我想将一条消息从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);

`四,。现在，您可以从内容脚本向网页发送消息，现在您需要Chrome扩展来收集所有需要的网络信息。您可以通过几个不同的模块来实现这一点，但最简单的选项是模块（请参见下面的background.js）

`五,。用于将web请求上的信息中继到内容脚本，然后再中继到网页JavaScript

在视觉上，你可以这样想：

完整的工作示例：

前三个文件包括您的Google Chrome扩展名，最后一个文件是您应该上传到

http://

web空间某处的HTML文件

icon.png

使用任何16x16 PNG文件

manifest.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);
        }
    });
});

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);
});

content\u script.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);
        }
    });
});

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);
});

并将以下内容用于网页（命名为任意名称）：

网络请求日志

向@Elliot B大喊一声

我基本上使用了他所做的，但我希望在内容脚本中触发事件，而不是在后台触发侦听器。无论出于何种原因，我无法从后台脚本连接到端口，所以我想到了这一点

PS：您需要扩展文件夹中的jquery.js来完成这项工作

manifest.json

{
  "manifest_version": 2,

  "name": "MNC",
  "version": "0.0.1",
  "description": "Monitor Network Comms",
  "permissions":["webRequest","*://*/"],
  "content_scripts": [{
  "matches": ["<all_urls>"],
  "run_at": "document_start",
  "js": ["content.js",
        "jquery.js"]
  }],
  "background": {
    "scripts": ["background.js"]
  }
}

content.js

div = $('<div id="outputDiv" style="float:left;max-width:fit-content;position:fixed;display:none;"></div>').appendTo(document.body);
var port = chrome.extension.connect({name:'networkLogging'});
port.onMessage.addListener(function (message) {
  if (message.networkLog) {
    div[0].innerHTML = message.networkLog;
  }
});
observer = new WebKitMutationObserver(function(mutation,observer){
  JSON.parse(mutation[0]['target'].innerHTML).forEach(function(item){
    JSON.parse(item);
  })
});
observer.observe(div[0],{childList:true});

div=$（''）.appendTo（document.body）；
var port=chrome.extension.connect（{name:'networkLogging'}）；
port.onMessage.addListener（函数（消息）{
if（message.networkLog）{
div[0]。innerHTML=message.networkLog；
}
});
观察者=新的WebKitMutationObserver（函数（变异，观察者）{
parse（mutation[0]['target'].innerHTML）.forEach（函数（项）{
JSON.parse（item）；
})
});
observer.observe（div[0]，{childList:true}）；

---

这绝对不是最有效的做事方式，但对我来说很有效。我想我会在这里添加它，以防有人需要它。

大多数人使用

调试器API

，这是一些新东西+1:）

div = $('<div id="outputDiv" style="float:left;max-width:fit-content;position:fixed;display:none;"></div>').appendTo(document.body);
var port = chrome.extension.connect({name:'networkLogging'});
port.onMessage.addListener(function (message) {
  if (message.networkLog) {
    div[0].innerHTML = message.networkLog;
  }
});
observer = new WebKitMutationObserver(function(mutation,observer){
  JSON.parse(mutation[0]['target'].innerHTML).forEach(function(item){
    JSON.parse(item);
  })
});
observer.observe(div[0],{childList:true});