背景
很多同学在B站大学上刷网课的时候，遇到那种视频总时间特别长、视频数目特别多的合集，都会很头疼。从B站视频的界面，我们看不到整个合集的总剩余时长，有的时候感觉学了等于没学，也没办法跟踪自己的实际进度。
于是我突然有了一个想法，借助Trae开发一个浏览器插件，我们可以通过点击按钮，就能获取视频合集的剩余总时长。
整个开发过程中，我没有写一行代码。我做的所有事就是描述需求，给AI截图反映控制台的报错信息，给AI截图看功能出现的问题，插件代码100%由TRAE完成
工具
- TRAE
开发
之前有一次我是这样获取剩余时长的，查看网页源代码（Bilibili视频播放列表好像是动态渲染，F12进入控制台似乎看不全），当前正在播放的视频会有一个
class="simple-base-item video-pod__item active normal"类，而其余的是class="simple-base-item video-pod__item normal"类，然后我把所有的html标签丢给AI计算，但那AI算的也实在够慢的...
1. 提示词
你是一个专业的前端开发程序员，你现在接到了一个开发需求，请你完成这个开发任务。
要求： 接到需求后，请先给我一份产品需求文档和技术分析文档，然后再进行项目的开发
需求： 用户在B站观看多合集形式的视频时，尤其是时间长、数目多的课程类视频时，无法快速、直观地了解从当前正在观看的视频开始，整个合集还剩余多少总时长。现有界面仅展示单集时长，对于需要规划学习进度的用户而言极为不便。
请你开发一款基于Chrome的谷歌浏览器插件，用户仅通过点击按钮就能获取当前剩余合集时长，帮助用户高效管理时间
这里用的是TRAE国际版，感觉TRAE国际版的这个TO-DO List真的做的特别棒，以前在使用国内版的时候没有这个功能，很多时候TRAE一次性完成了多步的工作，这样项目中遇到问题的时候检查特别特别麻烦。
2. TRAE开始开发
技术栈：HTML,CSS,JavaScript
TRAE生成的技术实现方案：
TheRestTimeOfVideo/
├── background.js // 后台脚本
├── content.js // 内容脚本，用于分析B站页面
├── images/ // 图标文件夹
│ ├── icon16.svg // 16x16图标
│ ├── icon48.svg // 48x48图标
│ └── icon128.svg // 128x128图标
├── manifest.json // 扩展配置文件
├── popup.css // 弹出窗口样式
├── popup.html // 弹出窗口HTML
└── popup.js // 弹出窗口交互逻辑
4.1 扩展架构
-manifest.json : 扩展配置文件
-popup.html/js/css : 点击扩展图标时显示的弹出界面
-content.js : 注入到B站页面的脚本，用于获取视频信息
-background.js : 后台脚本，处理扩展生命周期和消息通信
4.2 核心算法
1.通过DOM操作获取B站合集视频列表
2.识别当前正在播放的视频（通过active类或其他标识）
3.提取每个视频的时长信息（格式通常为"MM:SS"）
4.计算当前视频之后所有视频的总时长
5.转换为更易读的格式（如"X小时Y分钟"）
4.3 技术难点
B站页面结构可能会变化，需要设计稳健的DOM选择器
视频时长格式可能有多种（如"MM:SS"或"HH:MM:SS"）
页面加载时机的把握，确保在DOM完全加载后执行脚本
3. 遇到的一些问题
刚开始的时候经常会发生无法计算的问题
不过只需要打开控制台，把报错信息丢给AI就好
- 无论怎样都只计算两个视频的总时长
列表里面明明还有几百条视频，你告诉我只剩两个了？这里估计是AI在写函数的时候写死了，或者是和动态渲染有关系吧，我也没有仔细研究，反正结果丢给AI就好
最终效果展示
大功告成！
