如何修改Chrome扩展代码实现图片一键下载（兼容Medium等网站）

针对你遇到的Medium等网站点击图片跳转而非下载的问题，核心原因是这类网站的事件监听优先级更高、存在动态加载图片，或者你的事件绑定逻辑没覆盖场景，以下是具体修改方案：

关键修改点 #

• 改用事件捕获阶段绑定：绕过网站在冒泡阶段的事件拦截，确保你的事件先触发
• 监听动态加载的图片：用MutationObserver处理页面后续新增的图片
• 强化事件阻止逻辑：添加stopImmediatePropagation()防止同元素其他监听器执行
• 兼容懒加载图片：优先读取真实图片地址（如data-src等属性）

修改后的完整代码 #

脚本注入部分 #

// 注意：确保tabId变量已正确获取
if (chrome.scripting) {
  chrome.scripting.executeScript({
    target: { tabId: tabId },
    func: enableImageDownload
  }, (results) => {
    chrome.runtime.lastError 
      ? console.error('脚本注入失败: ' + chrome.runtime.lastError.message)
      : console.log('脚本注入成功');
  });
} else {
  console.error('chrome.scripting API不可用');
}

图片下载处理函数 #

function enableImageDownload() {
  console.log('enableImageDownload 已执行');

  // 绑定点击事件到单个图片的逻辑
  function bindDownloadHandler(img) {
    // 避免重复绑定
    if (img.dataset.downloadBound) return;
    img.dataset.downloadBound = 'true';

    img.style.border = "2px solid red";
    img.style.cursor = "pointer";

    // 用捕获阶段绑定事件，第三个参数设为true
    img.addEventListener("click", function handleClick(event) {
      console.log("图片被点击");
      
      // 强化事件阻止
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();

      // 移除监听器并恢复样式
      img.removeEventListener("click", handleClick, true); // 注意这里要传第三个参数true
      img.style.border = "";
      img.style.cursor = "";
      delete img.dataset.downloadBound;

      // 获取真实图片地址：优先读取懒加载属性，再用src
      const imgSrc = img.dataset.src || img.dataset.original || img.src;
      if (!imgSrc) {
        console.error('无法获取图片地址');
        return;
      }

      // 触发下载
      const a = document.createElement("a");
      a.href = imgSrc;
      a.download = imgSrc.split('/').pop().split('?')[0];
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      console.log("下载已触发");
    }, true); // 捕获阶段触发
  }

  // 绑定现有图片
  document.querySelectorAll('img').forEach(bindDownloadHandler);

  // 监听DOM变化，处理动态新增的图片
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'IMG') {
          bindDownloadHandler(node);
        }
        // 处理包含img的父元素
        else if (node.querySelectorAll) {
          node.querySelectorAll('img').forEach(bindDownloadHandler);
        }
      });
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

额外说明 #

• 有些网站可能会对download属性做限制（比如跨域图片），这种情况下浏览器可能无法强制触发下载，会直接跳转，这是浏览器的安全限制，无法通过前端脚本完全解决，但可以尝试用扩展的后台请求图片再返回给用户下载（需要额外的权限和逻辑）。
• 测试时可以打开开发者工具的控制台，查看日志信息，确认事件是否被正确触发。

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