去年在專欄投稿了一篇文章在B站刷學(xué)習(xí)視頻時如何知道剩余分集視頻總時長？

沒想到一直保持日瀏覽15~30，慢慢瀏覽量到3k了（然鵝投幣驚人小）

雖然上一條專欄里操作也很簡單，但也有不方便的地方，要用的時候都得把代碼拿出來貼一遍，費時費力...

那么...不如開發(fā)一個插件版本？正好嘗試下瀏覽器插件開發(fā)...然后，它就來了！

此插件基于HTML+JavaScript+BootStrap開發(fā)，只需要輸入相應(yīng)的視頻序號即可獲得區(qū)間內(nèi)視頻總時長。也可以通過range控件方便調(diào)整區(qū)間

目前僅開發(fā)了在B站的使用...畢竟大家一般都是在B站學(xué)習(xí)吧。

本插件安裝方法已在評論區(qū)置頂。下面講講這個插件開發(fā)過程，算是作為筆記。大家自行食用

整個代碼框架包含了以下文件

整個插件很小，簡單來說就是先把上一篇文章提到的calTime注入到網(wǎng)頁中（這和上篇文章中提出的將代碼復(fù)制到控制臺是一樣的）

在我們輸入視頻序號并點擊計算后，視頻序號會由擴(kuò)展程序popup.js封裝并以通信的方式發(fā)給content.js，后者收到了請求，調(diào)用calTime計算并將計算結(jié)果傳回來.

主體功能的原理到這里就結(jié)束了。然后為了方便使用，再添加了一些代碼增加了友好性，并引入BootStrap美化.?

options.html和.js就更沒啥好說的，就是隨便寫了個設(shè)置頁，實在沒啥好設(shè)置的，就留下了本項目的Github地址，方便以后更新(可能吧？)

manifest.json中的部分字段

比較重要的代碼部分就是關(guān)于content.js和popup.js通信的內(nèi)容

content.js監(jiān)聽信息并回復(fù)

這個項目代碼沒啥難度，主要難點就是：要把擴(kuò)展程序自己的部分和網(wǎng)頁部分分開，畢竟popup.js中的DOM操作肯定都是對于擴(kuò)展程序自己的popup.html，那么如何與網(wǎng)頁的DOM互動呢，答案那就是代碼注入+通訊. (做完這個小玩意兒，發(fā)現(xiàn)Ajax又忘了好多...)

具體的代碼大家可以去我的Github看：Whimmey/BiliBiliTimer: 【Chrome/Edge插件】基于JavaScript+BootStrap實現(xiàn)嗶哩嗶哩分集視頻的區(qū)間內(nèi)總時長計算 (github.com)

從v1.0.0發(fā)布后，這段時間又發(fā)現(xiàn)了兩個需求，分別是：【可視化展示當(dāng)前進(jìn)度】和【快捷計算預(yù)計分集到當(dāng)前分集的時長】

第一個需求采用progress控件實現(xiàn)，基于Bootstrap提供的帶有動效的進(jìn)度條十分美觀.

第二個需求，需要在框架中加入background.js代碼，基于右鍵菜單的接口和本地存儲完成。因此新的插件需要 "contextMenus",?"storage"權(quán)限。這次更新順便優(yōu)化了下擴(kuò)展設(shè)置頁面。具體實現(xiàn)過程可以參考發(fā)布在Github的代碼。

至此，累積了諸多改進(jìn)的v2.0.0也已發(fā)布于Github，MS Store的版本預(yù)計7月幾號會過審發(fā)布。以尚硅谷的視頻為例，新功能演示和外觀如下：

歡迎提出修改意見以及bug反饋，評論區(qū)歡迎大家交流，不知道這篇專欄的點贊和投幣能不能和閱讀量匹配起來...