Is there a browser API to get a list of page resources?

Question

I'm working on a remote JavaScript debugger and page inspector. I'm trying to find a way to programmatically get a list of all page assets (stylesheets, scripts, images, fonts, etc.) that a page loads, and pass them along to the remote inspector. I'd like to be able to edit the assets on the inspector side and pass them back to the client as well. Finally, I'd like to force asset reloads after the page has loaded (e.g. reload a stylesheet).

Are there any browser APIs or JavaScript techniques to do this?

I can think of two ways:

1. Use window.performance to get a list of assets. Doesn't contain the resource content, however, and relies on parsing the URL for determining the type of resource that it is. I'm not sure that it includes things like CSS images as well.
2. Scrape/parse the page for <style>, <script>, <img> tags and look through the CSS for additional resources. Very labor intensive and error prone, and I still don't know that it contains the resource content.

Any suggestions on how to do this?

Answer 1

window.performance.getEntries() is something good to start with. If you have the list, maybe you can pass them on by manually retrieving the content (you have the URL + session already). Good luck!