whimmey / bilibilitimer Goto Github PK

本拓展用于在Bilibili视频播放页面计算分集/合集视频区间内总时长和分集视频标记.

🍟 欢迎大家在拓展选项页的反馈中提出建议和bug(v2.0.2+可用)

❗ 注意：v3.0.0+版本支持Bilibili视频播放页面-分集视频、合集视频(https://www.bilibili.com/video/*)

• Bilibili Video Timer
  • 安装
  • 使用
    • 右键菜单-关于视频选集标记功能
    • 右键菜单-关于右键计算到此时长
• 更新日志
  • ✨v3.0.0 | 2024/6/22
  • ✨v2.1.0 | 2023/11/9
  • v2.0.2 | 2023/8/9
  • v2.0.1 | 2023/8/4
  • ✨v2.0.0 | 2023/6/29
  • v1.1.0 | 2023/6/14
  • v1.0.0 | 2023/4/13
• 目录结构（v3.0.0前）

本项目已经上架微软商店. 点击右侧About中的microsoftedge链接可直接跳转到免费安装（由于审核速度问题，版本会比Git滞后）.

点击Release，下载本代码。在浏览器中进入扩展管理界面，选择加载解压缩的扩展，打开Bili-extension文件夹，即可安装.

也可以去release中下载最新版本的crx文件，进入扩展管理界面，将crx文件拖入即可安装.

在Bilibili视频播放页面，点击扩展图标，在弹出的页面中输入想要查看的视频区间，点击计算即可得到总时长.

第一个输入框的值默认为当前视频序号，第二个输入框的值默认为当前视频序号+1.

• range控件用于拖拽选择. 两个输入框的值不分先后.
• progress控件展示看过的视频总时长占全长的百分比.
• ❗ 右键菜单功能，在视频选集区域 鼠标右键-计算到此时长，随后点击扩展图标即自动填入目标视频序号. 默认开启此功能，默认获取到目标视频序号后会有通知，均可在扩展管理界面中关闭.
• ❗ 视频选集标记功能，在视频选集区域 鼠标右键-标记一下，即可在对应选集前方添加marker标记（即使刷新页面也不会消失( •̀ ω •́ )✧）. marker默认样式为：✨，若想修改marker可以点击刚刚添加好的marker，即可修改其内容. marker默认样式可以在扩展选项中修改. （如何进入扩展选项：右键本拓展工具图标，点击扩展选项即可）扩展选项中也存放了所有标记过的marker，进入页面后点击查看所有Marker即可对所有Marker进行修改或清除操作.

视频选集标记功能演示：

计算到此时长功能演示：

[背景视频：BV1gM411W7ex]

• 为什么不能实现整个自动化？
  右键功能是在background.js中实现，popup的生命周期是在用户点击图标后方才启动。可能是处于安全考虑，浏览器没有提供可以唤醒popup的接口(这是我查阅文档得出的结论)。因此依然需要用户手动点击扩展图标，使得popup弹出，才能自动填入目标视频序号. 随后右键的视频序号销毁.
• 如何关闭此功能？
  插件默认开启此功能，本插件的右键菜单选项也不会在除了Bilibili视频播放页面的其他页面出现. 若想关闭此功能，可在插件图标右键进入扩展选项关闭. 关闭后插件会自动重启刷新，请在网页中也进行刷新操作.

千呼万唤始出来！支持合集、分集视频时长计算的全新版本！(右键功能目前依然仅支持分集视频场景）

✅ 重新编写了基于B站API的版本，出了分集视频以外，还支持合集视频场景！另外修复了不少BUG，欢迎体验！

✅ 新增（重要）：右键菜单选项，点击视频选集区域右键-标记一下，即可在对应选集前方添加marker标记（即使刷新页面也不会消失( •̀ ω •́ )✧）. 欢迎想要留下学习记号的同学尝试！φ(゜▽゜*)♪
📌 marker默认样式为：✨，若想修改marker可以点击刚刚添加好的marker，即可修改其内容.
📌 marker默认样式可以在扩展选项中修改. （如何进入扩展选项：右键本拓展工具图标，点击扩展选项即可）
📌 扩展选项中也存放了所有标记过的marker，进入页面后点击查看所有Marker即可对所有Marker进行修改或清除操作.

✅ 新增：使用反馈，可在扩展选项页点击右侧反馈. 另外增加了个小细节，在BiliBili以外的网页 拓展图标会变灰不可用.

✅ 新增：集数进度显示. 微调了下popup的样式.

✅ 新增：右键菜单选项，点击视频选集区域右键-计算到此时长，随后点击扩展图标即可自动填入目标视频序号.

✅ 新增：ProgressBar进度条，用于展示当前视频播放进度.展示当前分集占全长的百分比

✅ 基于JavaScript+BootStrap实现. 由于体量较小，没有引入jQuery编写
✅ 支持手动输入视频区间，以及使用range控件拖拽选择

│  manifest.json // 配置详细描述文件，包括权限等
│  options.html // 扩展选项设置
│  options.js // 相应的js代码
│  popup.html // 扩展窗口
│  popup.js // 相应的js代码，绑定了扩展窗口各个组件的事件，以及和content.js通信的代码
│  AjaxDemo.html // 基于Ajax的Demo，可以实现各种类型的视频时长计算
│  updates.xml
├─build
│      Bili-extension.crx
├─css
│      bootstrap.min.css // bootstrap
├─dist
│      options.dev.js
│      popup.dev.js
├─icons
│      bili.png
│      favicon.ico
│      timeline.png // 扩展的图标
├─img
│      index.png
└─js
   │  background.js // background.js在扩展加载时会被加载，用于实现右键菜单功能
   │  bootstrap.min.js // bootstrap
   │  calTime.js // 计算时长信息
   └─content.js // content.js在网页打开加载阶段会被注入到页面中，因为需要获得视频分集的信息，另外还需要承担和扩展popup.js通信的功能，使得calTime.js的计算结果能被扩展接收到