如何用JS从Chrome缓存提取已观看YouTube视频片段实现离线保存

首先明确核心逻辑：Chrome播放YouTube视频时，视频数据会以MediaSource Extensions（MSE）的形式加载到内存中，要提取这些数据，只能从MSE的缓存或内存对象入手，目前确实有一些不成熟的方案，适合作为浏览器扩展的基础原型：

1. 拦截MSE的SourceBuffer数据（最可行的原型方案） #

YouTube通过MSE的SourceBuffer对象逐片加载视频数据，我们可以通过猴子补丁改写SourceBuffer.appendBuffer方法，在视频播放时实时捕获传入的二进制分片数据，后续拼接成完整视频文件。

示例代码思路：

// 保存SourceBuffer的原始appendBuffer方法
const originalAppend = SourceBuffer.prototype.appendBuffer;
const videoDataChunks = [];

// 重写appendBuffer，捕获每一片视频数据
SourceBuffer.prototype.appendBuffer = function(buffer) {
  // 将传入的ArrayBuffer转成Uint8Array保存
  videoDataChunks.push(new Uint8Array(buffer));
  // 调用原始方法，保证视频正常播放
  originalAppend.call(this, buffer);
};

// 拼接数据并下载的函数
function saveCapturedVideo() {
  // 计算总数据长度，创建合并后的Uint8Array
  const totalLength = videoDataChunks.reduce((sum, chunk) => sum + chunk.length, 0);
  const combinedBuffer = new Uint8Array(totalLength);
  
  let offset = 0;
  for (const chunk of videoDataChunks) {
    combinedBuffer.set(chunk, offset);
    offset += chunk.length;
  }
  
  // 转成Blob并触发下载
  const videoBlob = new Blob([combinedBuffer], { type: 'video/mp4' });
  const downloadUrl = URL.createObjectURL(videoBlob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'captured_youtube_video.mp4';
  link.click();
  URL.revokeObjectURL(downloadUrl);
}

注意点：

• 脚本必须在视频开始加载前注入到页面，否则会错过早期分片。
• 如果视频是DRM加密的（大部分付费或版权严格的内容），捕获的分片数据无法直接播放，因为缺少解密密钥。
• YouTube的分片格式可能随时调整，比如从MP4分片切换到其他格式，需要适配。

2. 通过Chrome DevTools Protocol（CDP）读取内存快照（仅限调试/受限场景） #

如果你的扩展拥有debugger权限，可以通过CDP获取Chrome的内存快照，从中定位到视频的ArrayBuffer对象。但这种方法非常复杂：

• 需要通过CDP的Memory域生成内存快照，然后解析快照中的堆数据，筛选出视频相关的二进制对象。
• 浏览器的内存回收机制可能会释放未被引用的视频数据，不一定能完整获取整个视频。
• 这种方案仅适合调试研究，不适合面向普通用户的扩展。

关键限制与风险 #

• 稳定性差：YouTube的视频传输逻辑（DASH/HLS配置、分片加密规则）经常更新，依赖现有MSE拦截的方案可能随时失效。
• 内存限制：浏览器会自动释放闲置的内存数据，如果视频播放完成后过了一段时间再提取，可能已经丢失部分分片。
• 版权合规：提取YouTube视频可能违反其服务条款，开发扩展前务必确认相关法律风险。

内容的提问来源于stack exchange，提问作者عبدو عيد