Chromium右键媒体下载扩展开发问题求助

核心问题分析 #

你的代码存在两个关键错误：

• Background脚本无法操作网页DOM：Background页面的document属于扩展自身的后台页面，不是用户打开的网页DOM，所以监听contextmenu事件完全无效，自然无法阻止默认菜单或获取网页中的媒体元素。
• a标签下载无法满足需求：用<a>模拟点击的方式无法实现静默下载到默认目录，也没法检查目标目录是否已存在同名文件，必须使用浏览器提供的downloads API。

修正后的完整实现 #

1. Manifest配置（适配Chromium/Firefox，Manifest V2）

{
  "manifest_version": 2,
  "name": "Media Saver",
  "version": "1.0",
  "description": "Saves media files with the correct extension.",
  "permissions": [
    "downloads",
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

• 新增downloads权限：用于调用下载API实现静默下载和文件检查。
• 添加content_scripts：将脚本注入到所有网页，实现DOM监听。

2. Content脚本（content.js）

// 监听网页的右键事件
document.addEventListener("contextmenu", async (event) => {
  const target = event.target;
  // 检查目标元素是否为video/audio/image
  const validMedia = ["VIDEO", "AUDIO", "IMG"].includes(target.tagName);
  if (!validMedia) return;

  // 阻止默认上下文菜单弹出
  event.preventDefault();

  // 获取媒体URL和原文件名
  const mediaUrl = target.currentSrc || target.src;
  const filename = mediaUrl.split("/").pop();

  // 发送消息给Background脚本处理下载
  chrome.runtime.sendMessage({
    action: "downloadMedia",
    url: mediaUrl,
    filename: filename
  });
});

• 直接在网页DOM中监听右键事件，判断元素类型，阻止默认行为后将任务交给Background脚本。

3. Background脚本（background.js）

// 监听Content脚本发来的下载请求
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action !== "downloadMedia") return;

  const { url, filename } = message;

  try {
    // 检查默认下载目录是否已存在同名文件
    const existingFiles = await chrome.downloads.search({
      filename: filename,
      exists: true
    });

    if (existingFiles.length > 0) {
      console.log(`文件 ${filename} 已存在，跳过下载`);
      return;
    }

    // 执行静默下载（自动保存到默认目录，不弹窗）
    await chrome.downloads.download({
      url: url,
      filename: filename,
      saveAs: false, // 静默下载，不提示选择路径
      conflictAction: "skip" // 文件存在时跳过，也可设为"uniquify"自动重命名
    });
  } catch (error) {
    console.error("下载失败:", error);
  }
});

• 使用chrome.downloads.search检查文件是否存在。
• 通过chrome.downloads.download实现静默下载，saveAs: false确保不弹出选择路径窗口，conflictAction: "skip"实现已存在则不重复下载。

适配Manifest V3（Chromium最新标准） #

如果需要适配Manifest V3，只需修改manifest.json：

{
  "manifest_version": 3,
  "name": "Media Saver",
  "version": "1.0",
  "description": "Saves media files with the correct extension.",
  "permissions": ["downloads"],
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

• 将permissions中的<all_urls>移到host_permissions。
• Background脚本改为service_worker。

注意事项 #

• Firefox中需将chrome替换为browser（或使用WebExtensions Polyfill实现跨浏览器兼容）。
• 首次安装扩展后，浏览器可能需要授权下载权限，需确保用户允许。

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