如何在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量)。 有任何想法吗?

       

网上收集的解决方案 "如何在JavaScript中logging提取的networking资源?"

您可以这样做,但您需要使用Chrome扩展程序。

Chrome扩展程序有很多沙箱式的安全性。 Chrome扩展程序和网页之间的通信是一个多步骤的过程。 以下是我可以在最后提供一个完整的工作示例的最简洁的解释:

  1. Chrome扩展程序可以完全访问chrome。* API ,但Chrome扩展程序无法直接与网页JS进行通信,也无法直接与Chrome扩展程序进行通信。

  2. 为了缩小Chrome扩展程序和网页之间的差距,您需要使用内容脚本 。 内容脚本本质上是在目标网页的window范围注入的JavaScript。 内容脚本不能调用函数,也不能访问由网页JS创build的variables, 但它们共享对同一个DOM的访问权限 ,因此也可以访问事件。

  3. 因为直接访问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页面上。

在视觉上,你可以这样想:

Chrome扩展程序和内容脚本

完整的工作示例:

前三个文件包含您的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>