Possible to list external resources loaded on a webpage with JavaScript?

Question

I'd like to have an interval that keeps track of what items are being loaded on the current page. For example, let's say I have a page that loads a css file, a few scripts, pictures, a flash video player, and then the flash video player loads a video file. The elements loaded may or may not be from the same domain as the page. Some of them may be loaded through ajax or flash and not have a tag on the page. I want to keep track of each and make an array that stores information about them.

I'd like to have a script that does something similar to this pseudocode:

var all_external_resources = array();

setInterval(function() {
  var external_items = list_external_resources();
  for (var i in external_items) {
    if (all_external_resources.indexOf(external_items[i]) < 0)
      all_external_resources.push(external_items[i]);
  }
}, 100);

Would this be possible?

Answer 1

You can possibly use Resource Timing to retrieve resource names:

var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
    console.log(resource.name);
});

It's an extension of Navigation Timing (Can I use...) and is supported in many browsers.