欢迎光临散文网 会员登陆 & 注册

[自制插件]在B站刷学习视频时如何知道剩余分集视频总时长?

2023-04-13 16:34 作者:丶whimmy  | 我要投稿

去年在专栏投稿了一篇文章在B站刷学习视频时如何知道剩余分集视频总时长?

没想到一直保持日浏览15~30,慢慢浏览量到3k了(然鹅投币惊人

上一条专栏阅读量

虽然上一条专栏里操作也很简单,但也有不方便的地方,要用的时候都得把代码拿出来贴一遍,费时费力...

那么...不如开发一个插件版本?正好尝试下浏览器插件开发...然后,它就来了!

此插件基于HTML+JavaScript+BootStrap开发,只需要输入相应的视频序号即可获得区间内视频总时长。也可以通过range控件方便调整区间

目前仅开发了在B站的使用...毕竟大家一般都是在B站学习吧。

本插件安装方法已在评论区置顶。下面讲讲这个插件开发过程,算是作为笔记。大家自行食用

整个代码框架包含了以下文件

整个插件很小,简单来说就是先把上一篇文章提到的calTime注入到网页(这和上篇文章中提出的将代码复制到控制台是一样的)

在我们输入视频序号并点击计算后,视频序号会由扩展程序popup.js封装并以通信的方式发给content.js,后者收到了请求,调用calTime计算并将计算结果传回来.

主体功能的原理到这里就结束了。然后为了方便使用,再添加了一些代码增加了友好性,并引入BootStrap美化. 

options.html和.js就更没啥好说的,就是随便写了个设置页,实在没啥好设置的,就留下了本项目的Github地址,方便以后更新(可能吧?)

manifest.json中的部分字段

比较重要的代码部分就是关于content.js和popup.js通信的内容

content.js监听信息并回复

这个项目代码没啥难度,主要难点就是:要把扩展程序自己的部分和网页部分分开,毕竟popup.js中的DOM操作肯定都是对于扩展程序自己的popup.html,那么如何与网页的DOM互动呢,答案那就是代码注入+通讯. (做完这个小玩意儿,发现Ajax又忘了好多...)

具体的代码大家可以去我的Github看:Whimmey/BiliBiliTimer: 【Chrome/Edge插件】基于JavaScript+BootStrap实现哔哩哔哩分集视频的区间内总时长计算 (github.com)


从v1.0.0发布后,这段时间又发现了两个需求,分别是:【可视化展示当前进度】【快捷计算预计分集到当前分集的时长】

第一个需求采用progress控件实现,基于Bootstrap提供的带有动效的进度条十分美观.

第二个需求,需要在框架中加入background.js代码,基于右键菜单的接口和本地存储完成。因此新的插件需要 "contextMenus", "storage"权限。这次更新顺便优化了下扩展设置页面。具体实现过程可以参考发布在Github的代码。

至此,累积了诸多改进的v2.0.0也已发布于Github,MS Store的版本预计7月几号会过审发布。以尚硅谷的视频为例,新功能演示和外观如下:

欢迎提出修改意见以及bug反馈,评论区欢迎大家交流,不知道这篇专栏的点赞和投币能不能和阅读量匹配起来...

[自制插件]在B站刷学习视频时如何知道剩余分集视频总时长?的评论 (共 条)

分享到微博请遵守国家法律