Steam个人截图页面批量自动下载脚本失效问题求助

问题分析 #

你的脚本无法自动触发截图下载，核心原因有这几点：

1. 跨域安全限制：Steam截图详情页（归属steamcommunity.com域名）和图片存储服务器（归属images.steamusercontent.com域名）属于不同域，浏览器的同源策略会阻止直接通过脚本触发跨域资源的download点击行为。
2. 未挂载DOM元素的操作无效：你直接操作的是通过DOMParser解析出来的详情页中的a元素，这些元素并没有挂载到当前页面的DOM树上，调用link.click()时浏览器不会识别这个下载触发操作。
3. 重复文件名+批量请求拦截：所有图片都使用image.jpg作为文件名，不仅会导致下载的文件互相覆盖，浏览器也会因为短时间内重复触发相同文件名的下载请求而直接拦截。

修复后的自动化下载脚本 #

我调整了你的脚本，解决了上述问题，同时优化了批量下载的合理性：

// 图片计数，用于生成不重复的文件名
let imageIndex = 1;

// 遍历截图列表页的所有详情页链接
document.querySelectorAll('a').forEach(link => {
  if (link.href.includes("steamcommunity.com/sharedfiles/filedetails/?id=")) {
    fetch(link.href)
      .then(response => response.text())
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        
        // 提取详情页里的原图链接
        doc.querySelectorAll('a').forEach(imgLink => {
          if (imgLink.href.includes("images.steamusercontent.com/ugc/")) {
            // 先通过fetch获取图片Blob，绕开跨域限制
            fetch(imgLink.href)
              .then(res => res.blob())
              .then(blob => {
                // 创建临时的下载链接并挂载到当前页面DOM
                const downloadLink = document.createElement('a');
                // 将Blob转为可下载的本地URL
                const blobUrl = URL.createObjectURL(blob);
                downloadLink.href = blobUrl;
                
                // 生成唯一文件名，避免覆盖
                downloadLink.download = `steam_screenshot_${imageIndex}.jpg`;
                document.body.appendChild(downloadLink);
                
                // 触发下载
                downloadLink.click();
                
                // 清理资源，避免内存泄漏
                setTimeout(() => {
                  document.body.removeChild(downloadLink);
                  URL.revokeObjectURL(blobUrl);
                  imageIndex++;
                }, 200); // 加小延迟，避免浏览器拦截批量请求
              })
              .catch(err => console.error('下载单张图片失败:', err));
          }
        });
      })
      .catch(error => console.error('加载截图详情页失败:', error));
  }
});

使用注意事项 #

• 允许批量下载权限：首次运行脚本时，浏览器可能会弹出“是否允许该网站下载多个文件”的提示，一定要点击允许，否则所有下载都会被拦截。
• 调整延迟时间：如果你的截图数量很多，可以把setTimeout里的200毫秒适当调高（比如500毫秒），降低被浏览器安全策略拦截的概率。
• 自定义文件名：如果想要更有辨识度的文件名，可以从原图链接里提取唯一的UGC标识，比如把文件名代码改成：

  const ugcId = imgLink.href.split('/ugc/')[1].split('/')[0];
  downloadLink.download = `steam_ugc_${ugcId}.jpg`;
  

  这样每个图片的文件名会包含唯一的UGC ID，更易区分不同截图。

备注：内容来源于stack exchange，提问作者Moerderhoschi