Chrome扩展通过Fetch下载视频后多数无法正常打开的问题求助

问题根源分析 #

你遇到的大部分视频无法播放的问题，大概率是这几个原因导致的：

• 过早释放Blob URL，浏览器还没完成文件写入就销毁了数据源
• 没校验请求响应的有效性，错误响应生成了无效Blob
• 强制指定MIME类型与实际视频格式不匹配
• 大视频用Blob读取时数据不完整

修复后的代码方案 #

下面是结合以上问题点优化后的代码：

async function downloadVideo(url, fileName) {
  try {
    const response = await fetch(url);
    
    // 先检查请求是否成功，避免错误响应生成无效文件
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    // 从响应头获取真实的视频MIME类型，不要硬编码
    const contentType = response.headers.get('Content-Type') || 'video/mp4';
    
    // 用流式读取处理大视频，避免Blob加载不完整
    const reader = response.body.getReader();
    const chunks = [];
    let readResult;

    while (!(readResult = await reader.read()).done) {
      chunks.push(readResult.value);
    }

    const blob = new Blob(chunks, { type: contentType });
    const blobUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = blobUrl;
    link.download = fileName;
    link.type = contentType;

    // 触发下载
    link.click();

    // 延迟5秒再释放Blob URL，确保浏览器完成下载
    setTimeout(() => {
      URL.revokeObjectURL(blobUrl);
      link.remove();
    }, 5000);

  } catch (error) {
    console.error('视频下载失败:', error);
    // 这里可以加个弹窗提示用户下载失败
  }
}

更可靠的替代方案：使用Chrome Downloads API #

如果还是存在问题，建议直接用Chrome官方的下载API，它专门处理文件下载，稳定性更高：

// 先在manifest.json中添加权限："permissions": ["downloads"]
function downloadVideoWithChromeAPI(url, fileName) {
  chrome.downloads.download({
    url: url,
    filename: fileName,
    conflictAction: 'uniquify' // 文件名重复时自动加后缀
  }, (downloadId) => {
    if (chrome.runtime.lastError) {
      console.error('下载失败:', chrome.runtime.lastError);
    }
  });
}

额外注意事项 #

• 确保你的扩展在manifest.json中配置了目标网站的host_permissions，比如"host_permissions": ["*://*.example.com/*"]，避免CORS拦截请求
• 部分网站会对视频请求做签名校验，直接fetch可能拿到的是无效数据，这种情况需要分析网站的视频加载逻辑，模拟真实请求头

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