Download all of the files from Inspect Element's sources

I would like to download all of the .jpg images that I can see in Safari’s Inspect Element’s "sources" tab on one particular webpage.

I’ve been running this in the console:

(function () {
  function downloadFile(file) {
    const element = document.createElement('a');
    element.setAttribute('href', file);
    element.setAttribute('target', '_blank');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }

  (new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.name.contains('.jpg')) {
        downloadFile(entry.name);
      }
    });
  })).observe({ type: "resource", buffered: true });
}());

I’m trying to use the Resource Timing API to get the list of sources, then I check "is this one one of the jpgs I want?" (false positives are fine), then it downloads it.

The problem is the downloading step: I can’t get the files to download. Replace the downloadFile(entry.name) line with console.log(entry.name) and I can see I’m pulling all the right URLs, but downloadFile(entry.name) does nothing as it is in the script at the moment, and on a previous attempt with an additional element.setAttribute('download', 'download') line Safari told me once for each of the jpegs: "The download atribute on anchor was ignored because its href URL has a different security origin."

Is there a way I can download all the images on this webpage?

You need to sign in to view this answers

Related Post