豆
豆包视频&图片下载助手
自动提取豆包(Doubao)网站中的视频与图片链接，支持视频/图片预览、一键复制、批量下载，带可拖拽悬浮按钮和红点提醒
#豆包
#视频下载
#图片下载
#AI工具
数据统计
总安装量
2
近 24 小时
+2
用户评分
-
描述
版本1
评分0
权限说明
从豆包网站捕获AI生成视频/图片的原始链接，提供预览、复制和批量下载功能
豆包视频&图片下载助手
一键获取豆包(Doubao)生成的视频与图片原文件，告别水印烦恼，省时省力。
为什么要用这个脚本？
水印问题
使用豆包生成 AI 视频或 AI 图片时，豆包网页端会对生成的媒体资源加上水印。如果你需要将这些素材用于内容创作、演示汇报、学习研究等场景，水印会影响美观和使用体验。 消除水印的传统做法非常耗时：
| 去水印方式 | 操作步骤 | 耗时 | 效果 |
|---|---|---|---|
| 截图 + 裁剪 | 逐帧截图 → 裁剪水印区域 → 可能丢失画面内容 | 每个素材 3-5 分钟 | 画面不完整，分辨率降低 |
| 专业去水印软件 | 导入素材 → 选区水印 → AI 填充 → 导出 | 每个素材 5-10 分钟 | 效果因工具而异，部分需付费 |
| 在线去水印网站 | 上传 → 处理 → 下载 | 每个素材 2-5 分钟 | 隐私风险，文件大小受限 |
| 手动修图（PS 等） | 打开 → 修复画笔 → 内容识别填充 → 保存 | 每个素材 10+ 分钟 | 学习成本高，操作复杂 |
而使用本脚本，你只需要：正常使用豆包聊天 → 点击右下角按钮 → 点击"下载"，全程不到 5 秒。
核心优势
本脚本的核心价值在于：直接从浏览器层面捕获豆包生成视频/图片的原始资源 URL。这些原始资源是未经豆包前端播放器二次处理（加水印覆盖层）的纯素材文件，下载后即为干净无水印的原始文件。 说白了就是——豆包在网页上展示视频和图片时，播放器和图片查看器会在上面叠加一层水印，但底层加载的原始媒体文件其实是干净无水的。本脚本做的事情就是帮你把这个原始文件的下载链接找出来，让你直接下载原始文件，跳过水印层。
| 对比维度 | 不用脚本 | 用本脚本 |
|---|---|---|
| 获取视频文件 | 打开 F12 开发者工具 → Network 面板 → 筛选 media 类型 → 找到 .mp4 请求 → 右键 Open in new tab → 另存为 | 正常聊天 → 视频自动出现在面板 → 点"下载" |
| 获取图片文件 | 右键另存为（有水印）或 F12 → 排查 Network → 找到图片 CDN 请求 → 逐个下载 | 正常聊天 → 图片自动出现在面板 → 一键批量下载 |
| 批量下载 | 逐一重复以上步骤 | 点"下载全部"，自动逐个保存 |
| 去水印 | 需要额外工具处理（见上表） | 下载的原始文件本身无水印 |
一次安装，长期受益
安装本脚本后，每次使用豆包生成视频或图片时，资源链接会自动被捕获到侧边面板中。你不需要每次都去翻 Network 面板，也不需要担心去水印的问题——就像豆包自带了一个"下载"按钮一样自然。
功能一览
视频功能
| 功能 | 说明 |
|---|---|
| 自动捕获 | 识别页面中的 xgplayer 播放器和 video-canvas-panel-player 容器，提取视频原始 URL |
| 多格式支持 | 支持 video[src]、currentSrc、<source> 子元素、data-url 等多种属性 |
| 详细信息 | 显示文件名、码率（kbps / Mbps）、捕获时间 |
| 缩略图预览 | Canvas 截取视频首帧 → 图片加载兜底 → SVG 占位符，三层方案确保始终有预览图 |
| 全屏预览 | 点击视频卡片即可全屏播放，支持进度条拖拽、音量调节 |
图片功能
| 功能 | 说明 |
|---|---|
| DOM 扫描 | 扫描 <img>、data-src、data-original、<source srcset>、CSS background-image |
| 网络拦截 | PerformanceObserver 实时监听浏览器网络请求，捕获通过字节跳动 CDN 传输的图片资源 |
| 实时监听 | MutationObserver 监听 DOM 变化，新生成的图片即时捕获 |
| 详细信息 | 显示文件名、文件大小（KB / MB）、捕获时间 |
通用功能
| 功能 | 说明 |
|---|---|
| Tab 切换 | 视频 / 图片 两个独立标签页，分别管理和统计 |
| 智能去重 | 基于 域名 + 路径 去重，忽略动态变化的签名参数，避免同一资源重复出现 |
| 全屏预览 | 点击卡片打开沉浸式预览 Modal，视频自动播放带原生控件，图片自适应视口 |
| 批量操作 | 一键复制所有链接到剪贴板、一键批量下载（逐个下载，间隔 800ms 避免浏览器拦截） |
| 删除管理 | 单个资源可删除，带平滑滑出动画，删除后自动更新计数和红点提醒 |
| 拖拽按钮 | 右下角悬浮按钮可自由拖拽到任意位置，位置自动保存至 localStorage，下次打开自动恢复 |
| 红点提醒 | 检测到新资源时按钮右上角显示红色呼吸圆点动画，一眼可知有新内容 |
| 键盘快捷键 | Ctrl+Shift+D 快速打开/关闭面板，ESC 关闭面板或关闭预览弹窗 |
| 位置记忆 | 拖拽后的按钮位置自动保存，刷新页面或下次访问时恢复原位 |
安装与使用
第一步：安装脚本管理器
本脚本需要运行在用户脚本管理器（UserScript Manager）中，推荐以下两款：
- Tampermonkey（篡改猴） — 最流行的用户脚本管理器，支持 Chrome / Edge / Firefox / Safari
- ScriptCat（脚本猫） — 国产开源替代，同样兼容 Tampermonkey 脚本
在浏览器扩展商店搜索 "Tampermonkey" 或 "篡改猴" 安装即可。
第二步：安装本脚本
- 打开 Tampermonkey / ScriptCat 的管理面板
- 点击"新建脚本"或"添加新脚本"
- 将本仓库中的
doubao-video-downloader.user.js文件内容完整复制粘贴到编辑器中 - 保存（
Ctrl+S） - 确保脚本状态为"已启用"
第三步：开始使用
- 访问 https://www.doubao.com/ 并正常使用豆包聊天
- 当豆包生成视频或图片后，页面右下角会出现一个豆包头像圆形按钮
- 按钮右上角的红色呼吸圆点表示检测到了新的视频或图片资源
- 点击按钮，从右侧滑出侧边面板
面板操作指南
┌─────────────────────────────────────┐
│ 🏠 豆包视频&图片下载助手 × │ ← 标题栏，点击 × 关闭
├─────────────────────────────────────┤
│ [ ▶ 视频 3 ] [ 🖼 图片 5 ] │ ← Tab 切换，数字表示捕获数量
├─────────────────────────────────────┤
│ [重新扫描] [复制全部] [📥下载全部] │ ← 工具栏（操作当前 Tab 的资源）
├─────────────────────────────────────┤
│ ┌──────────────────────────────┐ │
│ │ [缩略图] MP4 14:30:25 │ │ ← 视频/图片卡片
│ │ filename.mp4 [×] │ │ 点击缩略图=全屏预览
│ │ [📋复制] [📥下载] │ │ 点击 ×=删除此资源
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ ...更多卡片... │ │
│ └──────────────────────────────┘ │
├─────────────────────────────────────┤
│ 免责声明：仅供学习参考... │ ← 底部固定免责声明
└─────────────────────────────────────┘
常见问题
Q: 为什么看不到任何视频或图片？
A: 请先正常使用豆包聊天，等待 AI 生成视频或图片后，脚本会自动捕获。你也可以手动点击面板中的"重新扫描"按钮。如果仍然没有，请打开浏览器控制台（F12），查看是否有 [豆包下载助手] 开头的日志输出。
Q: 下载的文件有水印吗？
A: 没有。脚本捕获的是豆包服务器返回的原始媒体文件（.mp4 / .png 等），这些文件在网页上被播放器叠加了水印层展示给你看，但文件本身是干净无水的。你下载的就是这个原始文件。
Q: 下载的视频/图片能用于商业用途吗？
A: 请遵守豆包的用户协议和相关法律法规。本脚本仅提供技术便利，不赋予你对生成内容的额外使用权利。
Q: 悬浮按钮挡住了页面内容怎么办？
A: 按钮支持拖拽，用鼠标按住拖动到任意位置即可。位置会自动保存，下次访问时恢复。
Q: 批量下载时浏览器弹出"阻止多个下载"提示怎么办？
A: 这是浏览器的安全策略。在提示中点击"允许"即可。不同浏览器的处理方式略有不同：
- Chrome / Edge：首次批量下载会提示，点击"允许此网站下载多个文件"
- Firefox：默认允许，无需额外操作
Q: 换了浏览器/电脑，之前拖拽的按钮位置还在吗？
A: 按钮位置保存在浏览器的 localStorage 中，仅限当前浏览器。更换浏览器或清除浏览器数据后位置会重置。
Q: 脚本扫描不到某些图片？
A: 部分图片可能通过 WebSocket 或非标准方式加载。尝试以下方法：
- 点击面板中的"重新扫描"按钮
- 在页面中滚动到图片所在位置触发懒加载
- 切换到图片 Tab 查看是否已被捕获
Q: 本脚本安全吗？会不会窃取我的数据？
A: 本脚本完全开源，代码仅在本页面运行，不会向任何外部服务器发送数据。所有操作（捕获链接、保存位置）均在浏览器本地完成。你可以自行审查全部源代码（约 1300 行）。
技术实现
架构总览
脚本采用纯前端架构，无任何后端依赖，主要通过以下四层机制协同工作来捕获豆包页面中的媒体资源：
媒体捕获层
├── DOM 扫描 → 遍历页面已有元素，提取 src/data-url 等属性
├── MutationObserver → 监听 DOM 变化，实时捕获动态插入的新元素
├── PerformanceObserver → 监听浏览器网络请求，捕获不在 DOM 中的图片资源
└── 定时轮询 → 每 2 秒兜底扫描，确保不遗漏任何资源
数据管理层
├── videoLinks → Map<key, info> 视频资源存储
├── imageLinks → Map<key, info> 图片资源存储
├── processedVideoSrcs → Set<key> 视频去重集合
└── processedImageSrcs → Set<key> 图片去重集合
UI 交互层
├── 悬浮按钮 → 可拖拽、红点提醒
├── 侧边面板 → Tab 切换、卡片列表、工具栏
└── 预览模态框 → 全屏预览视频/图片
为什么截图/右键保存会有水印，而脚本下载没有？
豆包前端的视频播放器（xgplayer）和图片查看器在展示媒体内容时，会通过以下方式添加水印：
- 视频水印：播放器在
<video>元素上层叠加一个 Canvas 或 div 覆盖层，实时绘制半透明水印文字/图案 - 图片水印：图片查看器组件在
<img>上方叠加水印图层，或者通过 CSS 伪元素添加水印标记 这些水印是前端渲染层的效果，并非写入原始媒体文件本身。当脚本直接获取<video>标签的src属性或图片的原始 URL 时，得到的是服务器的原始响应文件——水印叠加只发生在浏览器端的展示层，原始文件是干净的。 这也是为什么通过浏览器"右键另存为"图片会带有水印——因为另存为保存的是经过前端渲染后的合成画面，而非原始文件。
图片捕获的特殊处理
豆包页面中的 AI 生成图片有一个特殊之处：图片的 URL 通常不在 DOM 结构中（即 <img> 标签可能不存在或 src 为空），而是通过 JavaScript 动态加载后由组件渲染。针对这种情况，脚本使用了 PerformanceObserver API：
浏览器发起图片请求
↓
PerformanceObserver 拦截 resource 类型条目
↓
过滤：检查 URL 是否匹配图片扩展名 (.png/.jpg/.webp 等)
或是否来自字节跳动图片 CDN (byteimg.com / imagex 等)
↓
通过 isImageUrl() 验证 → 去重 → 存入 imageLinks → 渲染卡片
视频缩略图生成（三层降级方案）
1. 创建隐藏 <video> 元素，加载视频 URL
↓ loadeddata 事件 → seek 到 0.1s
↓ seeked 事件 → Canvas.drawImage() → toDataURL('image/jpeg')
✅ 成功：获得模糊但可用的缩略图
2. 2.5 秒后仍未成功（CORS 限制或网络问题）
↓ 创建 <img> 元素直接加载视频 URL
✅ 成功：部分浏览器支持将视频首帧作为图片显示
3. 全部失败
↓ 显示 SVG 播放图标占位符
✅ 至少保证 UI 完整，不影响下载功能
关键技术点
| 技术 | 应用场景 |
|---|---|
| DOM API / querySelectorAll | 遍历页面已有视频和图片元素，支持多种选择器匹配 |
| MutationObserver | 监听 <img>、<video> 的 src 属性变化和子节点增删，实时捕获动态加载资源 |
| PerformanceObserver | 监听 resource 类型条目，拦截浏览器网络请求中的图片资源（解决图片 URL 不在 DOM 中的问题） |
| CSS Variables | 统一管理主题色（--primary、--danger、--bg 等），便于维护和调整 |
| CSS Animations | 卡片入场动画、删除退出动画、红点呼吸动画、预览模态渐入动画 |
| localStorage | 持久化保存悬浮按钮拖拽后的位置 |
| Canvas API | 将视频首帧绘制为 canvas 后导出 JPEG，用作视频缩略图 |
| Clipboard API | 异步写入剪贴板，支持一键复制链接 |
| Event Delegation | 卡片点击事件代理，智能区分预览区域和操作按钮区域 |
| Touch Events | touchstart / touchmove / touchend 支持移动端触屏拖拽 |
| URL API | new URL() 解析和标准化资源链接，实现基于 origin + pathname 的智能去重 |
更新日志
| 版本 | 日期 | 更新内容 |
|---|---|---|
| v5.0.0 | 2026-07-26 | 新增图片抓取（PerformanceObserver + DOM 扫描）、Tab 切换、全屏预览、可拖拽悬浮按钮、免责声明 |
| v4.0.0 | 2026-07-26 | 白色主题 UI 重设计、新增删除功能、视频卡片优化、面板加宽至 480px |
| v3.0.0 | 2026-07-26 | 深色头部 + 蓝色主题设计、豆包 Logo 图标、卡片悬浮效果 |
| v2.0.0 | 2026-07-26 | 钢蓝简洁配色重构，去掉紫色渐变，统一 8px 圆角 |
| v1.0.0 | 初始版本 | 视频自动捕获和下载基础功能 |
免责声明
⚠️ 本脚本仅供学习和参考使用。
- 请遵守豆包（Doubao）平台的用户协议和相关法律法规
- 下载的媒体内容请勿用于违法或侵犯他人权益的用途
- 因使用本脚本产生的任何后果由使用者自行承担
- 本脚本不修改、不破解、不绕过豆包的任何安全机制，仅提供浏览器层面的便捷操作