B站合集观看进度浏览器插件

一个用于展示B站合集观看进度的Chrome浏览器插件，统计合集总时长和从开始到当前观看的前一集的时长，以进度条和饼状图的格式进行展示。

功能特性

• 📊 实时进度统计：自动识别B站合集列表，计算观看进度
• 📈 可视化展示：进度条 + 饼状图双重展示
• ⏱️ 时长统计：
  • 合集总时长
  • 已观看时长（从开始到当前播放集的前一集）
  • 总集数与已观看集数
• 🎨 美观界面：采用B站配色，流畅动画效果

安装方法

1. 打开Chrome浏览器，进入 chrome://extensions/
2. 打开右上角的"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择本项目文件夹（包含manifest.json的目录）
5. 插件安装完成，图标将出现在浏览器工具栏

使用方法

1. 打开B站任意合集视频页面
2. 点击浏览器工具栏中的插件图标
3. 插件将自动获取合集数据并展示观看进度

文件说明

ViewProgress/
├── manifest.json      # 插件配置文件
├── popup.html         # 插件弹窗界面
├── popup.js           # 核心逻辑脚本
├── popup.css          # 样式文件
├── icons/             # 插件图标
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md          # 说明文档

技术实现

• Manifest V3：使用最新的Chrome扩展API
• DOM解析：通过注入脚本获取B站合集列表元素
• Canvas绘图：使用Canvas API绘制饼状图
• CSS动画：流畅的渐变和过渡效果

注意事项

• 插件仅在B站视频页面（*.bilibili.com）生效
• 需要页面完全加载后才能获取合集数据
• 观看进度计算逻辑：当前播放集之前的所有集数计为已观看

开发说明

如需修改或扩展功能，主要关注以下文件：

• popup.js：核心逻辑，包括数据获取和进度计算
• popup.css：界面样式定制
• popup.html：界面结构调整