Can I list external resources uploaded to a web page using JavaScript?

Question

I would like to have an interval that keeps track of which items are loading on the current page. For example, let's say I have a page that loads a css file, several scripts, images, a flash video player, and then a flash video player loads a video file. Items uploaded may or may not be from the same domain as the page. Some of them can be loaded via ajax or flash and do not have a tag on the page. I want to track each and create an array that stores information about them.

I would 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); 

Is it possible?

Answer 1

You can use Resource Time to get resource names:

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

This extension is Navigation Time ( May I use ... ) and is supported in many browsers.