5 分钟开发浏览器脚本防止儿子沉迷动画片

最近让大模型帮忙开发了一个浏览器脚本（油猴脚本），实现控制 B 站动画片播放进度的目的。

缘起

最近儿子晚上洗澡后会闹着要看动画片才愿意上床睡觉。好说歹说，终于同意看一集就睡觉。

考虑到视力保护和观看体验，我没有选择手机，而是选择电脑播放 B 站的动画片。屏幕大，而且无需担心出现可能不适合儿童的片头广告，体验非常友好。

但动画片有长有短，太长的视频如果中途掐掉，会导致小孩愤怒和哭泣。所以只能每次拖动进度条到大概最后四分钟的位置。

但每次都要操作还是显得麻烦，而且小孩以后说不定发现我在骗他，那就不太好了。

既然是浏览器，何不借助大模型快速写个扩展脚本试试自动化操作？

借助 Claude.ai 写脚本，进度控制有严重问题

一开始我尝试用最近很火的 claude.ai ，写出来的油猴脚本能跳转到最后四分钟，但一播放就会反复回到最后四分钟位置，尝试两次修复，但给出的代码问题依旧。问句如下：

开发一个针对 bilibili 站点视频播放控制的油猴脚本，我希望在播放视频时能够自动跳转到最后四分钟的位置开始播放。

改用 kimi 重写，第一版核心功能非常完美

也许是外国人的大模型也许对 b 站的代码结构不太熟悉？那就试试到处在发推广的 kimi 吧。

我将差不多的问题发给 Kimi ，没想到包含核心功能的第一版代码顺利运行。

// ==UserScript==
// @name         Bilibili Auto Skip to Last Four Minutes
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically skip to the last four minutes of a Bilibili video
// @author       Your Name
// @match        *://*.bilibili.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待视频元素加载
    window.addEventListener('load', function() {
        // 获取视频播放器
        var player = document.querySelector('video');
        if (player) {
            // 检查视频时长
            player.addEventListener('loadedmetadata', function() {
                var duration = player.duration;
                // 计算跳转时间点，确保不超过视频总时长
                var skipTime = Math.max(duration - 4 * 60, 0);
                // 跳转到指定时间点
                player.currentTime = skipTime;
            });
        }
    });
})();

小幅优化兼顾小孩和大人需求

事情到此算是解决了。不过有个小问题，脚本默认针对所有视频，如果是我自己要看 B 站的长视频，就得将进度条拖回起始位置，略显麻烦。

为此，需要给脚本增加一个判断，只针对动画片自动跳转进度。我尝试让 kimi 自己判断，它没法准确判断当前视频是否为动画片，只是提供了正确的思路，比如根据视频标签等进行判断，实际给的代码无效。

如果视频标签标注了视频属于动画片，那么通过标签来判断就比较准确。稍微看了几个视频详情页的 HTML 源代码，里面确实有视频的标签信息，动画片的话一般会带上“动画片”这个标签。

继续问 Kimi：

判断是否为动画片的规则如下，

比如读取视频详情页的源代码，https://www.bilibili.com/video/BV1nA411x7gT/?spm_id_from=333.788.recommend_more_video.3&vd_source=8b616b33732cab00e369c8f78a43bb13   找到 `[{"tag_id":26517,"tag_name":"动画短片","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":42837,"tag_name":"益智","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":285829,"tag_name":"早教","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null},{"tag_id":17205837,"tag_name":"11 月打卡挑战 W2","music_id":"","tag_type":"old_channel","jump_url":"","showDetail":false,"showReport":false,"timeOut":null}]`

这段代码，看看 tag_name 有没有 “动画”，如果有，判定为动画片

返回的脚本为：

// ==UserScript==
// @name         Bilibili Auto Skip to Last Four Minutes for Animation
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically skip to the last four minutes of a Bilibili animation video
// @author       Kimi + 廖智海
// @match        *://*.bilibili.com/video/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待页面加载
    window.addEventListener('load', function() {
        // 模拟发送请求获取视频标签信息
        fetch('/api/view?id=' + BV_ID).then(response => response.json()).then(data => {
            // 检查是否存在 "动画" 标签
            const isAnimation = data.tags.some(tag => tag.tag_name.includes('动画'));
            if (isAnimation) {
                // 获取视频播放器
                var player = document.querySelector('video');
                if (player) {
                    // 检查视频时长
                    player.addEventListener('loadedmetadata', function() {
                        var duration = player.duration;
                        // 计算跳转时间点，确保不超过视频总时长
                        var skipTime = Math.max(duration - 4 * 60, 0);
                        // 跳转到指定时间点
                        player.currentTime = skipTime;
                    });
                }
            }
        }).catch(error => {
            console.error('Error fetching video tags:', error);
        });
    });

    // 获取 BV 号
    function BV_ID() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('bvid');
    }
})();

过了几天，发现脚本针对有些视频不生效。重新看了下源代码，不同视频可以依据不同的条件来判断是否为动画片。问句里加了一句：

增加一个判断方法，如果 html 源代码里面有 <div class="firstchannel-tag" data-v-000c5325=""><a href="//www.bilibili.com/v/douga/" class="tag-link">动画</a></div>，div 包含一个链接文字为‘动画’或者‘动画片’的页面，则认定为动画片。

得到的代码把之前的判定方法替换了。于是又稍作说明：

我指的是这个判定方法和之前那个 tag 名称的判定方法并存。

更新代码如下：

// ==UserScript==
// @name         Bilibili Auto Skip to Last Four Minutes for Anime Videos
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically skip to the last four minutes of a Bilibili video if it is tagged as an anime or contains a specific tag link
// @author       Your Name
// @match        *://*.bilibili.com/video/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待页面加载
    window.addEventListener('load', function() {
        // 检查 script 标签内容中是否包含"动画"标签
        var scriptTags = document.getElementsByTagName('script');
        var isAnimeByTag = false;
        for (var i = 0; i < scriptTags.length; i++) {
            var scriptContent = scriptTags[i].textContent;
            if (scriptContent.includes('"tag_name":"动画短片"') || scriptContent.includes('"tag_name":"动画"')) {
                isAnimeByTag = true;
                break;
            }
        }

        // 检查页面中是否存在特定的 div 元素
        var isAnimeByLink = document.querySelector('div.firstchannel-tag a.tag-link[href*="douga/"]').textContent === '动画' || document.querySelector('div.firstchannel-tag a.tag-link[href*="douga/"]').textContent === '动画片';

        // 如果任一条件满足，则跳转到视频的最后四分钟
        if (isAnimeByTag || isAnimeByLink) {
            var player = document.querySelector('video');
            if (player) {
                player.addEventListener('loadedmetadata', function() {
                    var duration = player.duration;
                    var skipTime = Math.max(duration - 4 * 60, 0);
                    player.currentTime = skipTime;
                });
            }
        }
    });
})();

小孩更大以后，能够识破父亲的诡计，这一招应该会失灵，不过那是以后的事情，以后再说，先解决已知问题即可，无需过度优化。

结语

有了生成式 AI ，不会前端技术，只需描述清楚自己的需求，稍微知道一点原理，就能快速获得能够运行的简单脚本，给工作和生活带来便利。

如果你有类似需求或体验，欢迎交流探讨。

5 分钟开发浏览器脚本 防止儿子沉迷动画片

缘起

借助 Claude.ai 写脚本，进度控制有严重问题

改用 kimi 重写，第一版核心功能非常完美

小幅优化 兼顾小孩和大人需求

结语

5 分钟开发浏览器脚本防止儿子沉迷动画片

小幅优化兼顾小孩和大人需求