编写一个油猴脚本 -- 记录B站视频集数观看进度

前言

对于普通的多p视频，B站没有提供集数观看进度的功能，所以网课资源虽多，但是一不小心就会忘记看到的集数。可以通过编写脚本来记录集数，还可以设置一键跳转上次观看集数等。插件已在greasyfork发布，点击即可跳转安装 -> 【看网课必备】 哔哩哔哩（bilibili|B站）小功能汇总

监听集数切换

通过F12打开控制台查看切换集数的时候返回的数据，发现切换集数的时候都会返回这个数据accept_description。那么我们可以使用拦截器监听返回数据是否存在这个参数，存在则触发更新集数观看进度。

XMLHttpRequest.prototype.send = new Proxy(XMLHttpRequest.prototype.send, {
    "apply": (target, thisArg, args) => {
        thisArg.addEventListener(
            "load", event => {
                try {
                	// 没返回responseText，直接跳过
                    if (!/^{.*}$/.test(event.target.responseText)) {
                        return;
                    }
                    const result = JSON.parse(event.target.responseText);
                    // 没返回accept_description，直接跳过
                    if (!result.data.accept_description || !result.data.accept_description.length) {
                        return;
                    }
                    // console.log("this:", result)
                    // 返回accept_description，更新观看集数
                    listener();
                } catch (err) {

                }
            })
        return target.apply(thisArg, args);
    }
})

记录观看集数

通过上面的监听函数，我们进入listener()函数，在里面记录我们观看视频的集数，集数标题和B站视频专属的BVid。

function listener(e) {
	// 获取已缓存的视频集数记录
    var schedule_chart = GM_getValue('schedule_chart') || []
    // 通过分析可以知道`document.getElementsByClassName('on')`这个元素块里面存有视频集数、名称和视频id等数据
    var info = []
    var node = document.getElementsByClassName('on')
    for (var i = 0, len = node.length; i < len; i++) {
        if (/video\/(.v[0-9|a-z|A-Z]*)\??/i.test(node[i].innerHTML)) {
        	// 通过正则把视频集数、名称和id提取出来
            var regx = /video\/(.V[0-9a-zA-Z]*)\?p=(\d+).*title="(.*?)">/i
            info = regx.exec(node[i].innerHTML)
            break;
        }
    }
    var dic = {
        bv_id: info[1],
        part: `P${info[2]}`,
        title: info[3]
    }
    // 检查视频是否已有记录，已有则更新，没有则添加
    if (schedule_chart.length) {
        for (i = 0, len = schedule_chart.length; i < len; i++) {
            // console.log(schedule_chart, schedule_chart[i])
            if (schedule_chart[i].bv_id == info[1]) {
                schedule_chart[i] = dic
                break;
            } else if (i == (len - 1)) {
                schedule_chart.push(dic)
            }
        }
    } else {
        schedule_chart.push(dic)
        alert('首个视频观看集数进度已经记录啦，点开油猴可以查看菜单~')
    }
    // 重新设置视频观看记录的缓存
    GM_setValue('schedule_chart', schedule_chart)
 }

显示视频观看集数

缓存到了视频观看集数，就要在需要的时候显示出来告诉我们观看进度啦。

function _getChapDic() {
	// 我们只匹配URL中是video/.v也就是上传视频区的有av或bv号的链接
    if (!/video\/(.v[0-9|a-z|A-Z]*)\??/i.exec(document.location.href)) {
        return 0;
    }
    var cur_dic = {}
    var schedule_chart = GM_getValue('schedule_chart') || []
    var bv_id = /video\/(.v[0-9|a-z|A-Z]*)\??/i.exec(document.location.href)[1]
    // bv_id part title
    // 遍历观看记录，返回视频观看记录dic，可以用alert显示，或者设置快捷键直接跳转。
    for (var i = 0, len = schedule_chart.length; i < len; i++) {
        if (!schedule_chart[i].bv_id) {
            continue;
        }
        var regx = new RegExp(schedule_chart[i].bv_id, "i");
        // console.log(regx, regx.test(bv_id))
        if (regx.test(bv_id)) {
            cur_dic = schedule_chart[i]
            break;
        }
    }
    return cur_dic
}

以上就是B站集数观看记录的步骤啦，具体的细节可以到 【看网课必备】 哔哩哔哩（bilibili|B站）小功能汇总 或者 github 查看完整源码嗷~

ps：一年前写的代码，很多地方不是很好哈哈哈