javascriptimagesteam

Download images of my own steam screenshots page


i want to download all images of my steam screenshot page https://steamcommunity.com/id/Moerderhoschi/screenshots/?view=grid and i have the following approach.

in my webbrowser i went to my screenshot page and then hit F12 and enter the following code in the console

document.querySelectorAll('a').forEach(link =>
{
    if (link.href.includes("steamcommunity.com/sharedfiles/filedetails/?id="))
    {
        fetch(link.href)
        .then(response => {return response.text();})
        .then(html =>
        {
            let parser = new DOMParser();
            let doc = parser.parseFromString(html, 'text/html');
            doc.querySelectorAll('a').forEach(link =>
            {
                if (link.href.includes("images.steamusercontent.com/ugc/"))
                {
                    //window.open(link.href, "_self");
                    link.download = "image.jpg";
                    link.click();
                }
            });
        })
        
        .catch(error =>
        {
            console.error('error cal site:', error);
        });
    }
});


but it wont download the screenshots, i can open the screenshot site with window.open(link.href, "_self"); but then i have to manual download it but i want it automated for every screenshot i parsed on the site.

example screenshot it would open with window.open(link.href, "_self"); https://images.steamusercontent.com/ugc/32194756041691484/DED70A2DFD08E6E10564A15949C7BEF5A685E41E/


Solution

  • I found a solution with extracting the links of the pictures with JS

    document.querySelectorAll('a').forEach(link => {
        if (link.href.includes("steamcommunity.com/sharedfiles/filedetails/?id=")) {
            fetch(link.href).then(response => {
                return response.text();
            }).then(html => {
                let parser = new DOMParser();
                let doc = parser.parseFromString(html, 'text/html');
                doc.querySelectorAll('a').forEach(link => {
                    if (link.href.includes("images.steamusercontent.com/ugc/")) {
                        console.log(link.href.slice(0, link.href.indexOf('?')));
                    };
                });
            }).catch(error => {
                console.error('error cal site:', error);
            });
        }
    });
    

    then saving those links via right click save log and using the log in a powershell script to download the screenshots with wget.

    gc "links.log" | ForEach-Object {  
            $a=$_.SubString($_.IndexOf("https://images.steamusercontent.com/ugc/")) ; 
            $i=$a.indexOf("/",40) ; $i=$a.indexOf("/",$i+1) ; 
            $a=$a.subString(0, $i+1) ; 
            $b=wget -UseBasicPArsing $a ; 
            $c=$b.headers["Content-Disposition"] ; 
            $d = $c -replace '.*filename="(.*)";','$1' ; 
            wget $a -o screenshots\$d 
        }
    

    You can get a more detailed solution on my github page if you interested: mdhSteamScreenshotsDownloader