如何在JavaScript中logging提取的networking资源？
有没有办法访问浏览器请求的资源列表（在Chrome检查器的networking面板中find的资源列表）？
我希望能够遍历这些获取的资源，以显示已被访问的域，如下所示：
for (var i = 0; i < window.navigator.resources.length; i++) { var resource = window.navigator.resources[i]; console.log(resource); //=> eg `{domain: "www.google-analytics.com", name: "ga.js"}` } 或者，也许有一些事件要写一个处理程序，比如：
window.navigator.onrequest = function(resource) { console.log(resource); //=> eg `{domain: "www.google-analytics.com", name: "ga.js"}` }
它不需要跨浏览器工作，甚至可以使用客户端JavaScript。 只要能够以任何方式访问这些信息就可以了（也许有一些方法可以使用phantomjs或者从shell / node脚本来观察networkingstream量）。 有任何想法吗？
您可以这样做，但您需要使用Chrome扩展程序。
Chrome扩展程序有很多沙箱式的安全性。 Chrome扩展程序和网页之间的通信是一个多步骤的过程。 以下是我可以在最后提供一个完整的工作示例的最简洁的解释：
-
Chrome扩展程序可以完全访问chrome。* API ，但Chrome扩展程序无法直接与网页JS进行通信，也无法直接与Chrome扩展程序进行通信。
-
为了缩小Chrome扩展程序和网页之间的差距，您需要使用内容脚本 。 内容脚本本质上是在目标网页的
window范围注入的JavaScript。 内容脚本不能调用函数，也不能访问由网页JS创build的variables， 但它们共享对同一个DOM的访问权限 ，因此也可以访问事件。 -
因为直接访问variables和调用函数是不允许的，所以网页和内容脚本可以通信的唯一方式是通过触发自定义事件 。
例如，如果我想从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。 现在您可以从内容脚本向网页发送消息，现在您需要Chrome扩展程序收集所需的所有networking信息。 你可以通过几个不同的模块来完成，但最简单的select是webRequest模块（ 请参阅下面的background.js ）。
`5。 使用消息传递将Web请求上的信息中继到内容脚本，然后再传递到JavaScript页面上。
在视觉上，你可以这样想：
完整的工作示例：
前三个文件包含您的Google Chrome浏览器扩展程序，最后一个文件是要上传到http:// web space某处的HTML文件。
的icon.png
使用任何16×16 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); } }); });
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); });
并使用以下的网页（任何你想要的名字）：
<!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>