Chrome图片下载书签工具失效求助：点击仅打开新标签页

嗨，我太懂你这种头疼的感觉了——Chrome现在对download属性的限制确实收紧了，尤其是跨域资源的场景，这就是你的书签工具只打开图片不触发下载的核心原因。咱们来一步步搞定这个问题：

问题核心拆解 #

Chrome目前对download属性有两个关键限制：

• 如果图片是跨域资源，浏览器会直接忽略download属性，默认在新标签页打开图片
• 书签工具的执行上下文和普通页面脚本有差异，直接设置href+download的老方法已经不生效了

可行的解决方案 #

方案1：通过Blob对象转换资源（推荐跨域场景） #

我们可以先把图片资源转换成Blob格式，再生成指向Blob的本地URL，这样就能绕过跨域限制强制触发下载。调整后的代码如下：

// 假设h是目标图片URL，c是你想要的保存文件名
const downloadImage = async (imageUrl, filename) => {
  try {
    // 拉取图片资源
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    // 创建Blob本地URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 创建并触发下载链接
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    
    // 清理临时资源
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('下载失败:', error);
    alert('图片下载失败，请检查资源是否可访问~');
  }
};

// 修改你的点击事件逻辑
r.addEventListener('click', function(ev) {
  ev.preventDefault(); // 阻止默认的跳转行为
  downloadImage(h, c);
}, false);
document.body.appendChild(r);

方案2：添加安全属性（适合同域场景） #

如果图片是同域资源，可能只是浏览器的安全策略拦截了下载，给链接添加rel="noopener noreferrer"属性试试：

r.addEventListener('click', function(ev) {
  ev.preventDefault();
  r.href = h;
  r.download = c;
  r.rel = 'noopener noreferrer';
  r.click();
}, false);
document.body.appendChild(r);

额外注意点 #

• 部分网站会设置防盗链，fetch可能会失败，这时候可以给fetch添加mode: 'no-cors'选项，但这种情况下Blob会是无法识别的二进制文件，只能按原格式下载
• 书签工具的代码尽量精简，避免和页面现有脚本产生冲突

内容的提问来源于stack exchange，提问作者a_lovelace