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

有没有办法访问浏览器请求的资源列表(在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或从shell / node脚本看网络流量).有任何想法吗？

解决方法

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

Chrome扩展程序具有很多沙盒风格的安全性. Chrome扩展程序和网页之间的沟通是一个多步骤的过程.这是最简明的解释,我可以提供一个完整的工作示例最后：

> Chrome扩展程序可以完全访问chrome.* API,但是Chrome扩展程序无法直接与JS页面进行通信,JS网页也不能直接与Chrome扩展程序进行通信.
为弥合Chrome扩展程序和网页之间的差距,您需要使用content script.内容脚本实质上是注入到目标网页的窗口范围内的JavaScript.内容脚本无法调用函数,也不能访问由Web页面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);

`4.现在您可以从内容脚本发送消息到网页,现在您需要Chrome扩展程序收集所需的所有网络信息.您可以通过几个不同的模块完成此任务,但最简单的选项是webRequest模块(请参阅下面的background.js).

`5.使用message passing将Web请求上的信息中继到内容脚本,然后再转到网页JavaScript.

在视觉上,你可以这么想：

充分的工作实例：

前三个文件是您的Google Chrome扩展程序,最后一个文件是您应该上传到http：// web空间的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>

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

解决方法

相关文章