Thorolus Thorolus - 22 days ago 4x
HTML Question

Get resources that website is using from code?

which is the best way to get a list of resources the website is using? So for example I have a page with the following code:

<!DOCTYPE html>
<title>Example page</title>
<script src="js/myscriptjs"></script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/mystyle.css">

How I can detect the files "js/myscriptjs", "js/jquery.min.js" and "css/mystyle.css"? Is the only way to search for file extensions like ".css", ".js" or ".php"?

Greetings, Flo.


Use document.querySelectorAll to select all elements that refer to a resource. Then get the file names from them. An ES6 version could be:

Array.from(document.querySelectorAll("script[src], link[rel=stylesheet][href]"))
  .map(element => element.src || element.href);

Alternatively, you could use a for loop to iterate over the results.

You can also remove [rel=stylesheet] if you’re also interested in fav-icons and other resources.