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

[hillerliao]

最近让大模型帮忙开发了一个浏览器脚本（油猴脚本），实现控制 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 ，不会前端技术，只需描述清楚自己的需求，稍微知道一点原理，就能快速获得能够运行的简单脚本，给工作和生活带来便利。

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

[shinession]

OP 小时候也是被父母这么对待的, 孩子太可怜了

[kelvansun]

@shinession 哈哈，同感，想想人活着真是可怜，小时候被父母管，大了被另一半管，老了被下一代管。

[10RR]

4 分钟？？老实讲，被这样阉割，我觉得非常不可理喻，如果是我，在知道真相之后，一定会把电视砸烂。

说真的，用这样的欺骗来对待小孩子，真的可能造成深远和巨大的负面影响。

[kelvansun]

@10RR 本质上与 GFW 的存在是同一个道理，都是为你好。

[kulous]

小孩不能拿动画片哄着吧！

[Leon777]

这辈子有了

[victorkk]

这根本就不应该是 IT 技术问题，而是教育问题。
1. 睡觉前不能接触屏幕，如果一定要看点什么，可以看书。
2. 答应他白天时给他看长一点的视频。
3. 主动挑一些动画电影给他看，慢慢让他懂得欣赏长的动画电影，不知道怎么挑就干脆按各类评分评分从上往下。
4. 最后就是在孩子哭闹时，如果你觉得对的事情，温柔且坚定的坚持它。前提是你要 a 论证你坚持的事情是对的，这个真的很难，就像你现在觉得阉割动画片是对的，其实是值得商榷的一样。教育孩子，其实自己也在和孩子一起长大。

[andytao]

如果是我，在知道真相之后，一定会把电视砸烂。

[zomco]

如果是我，会用 AI 将动画片超时部分转译成英文

[dai269619118]

你自己都知道看视频要看完整的 小孩子看动画片就只能看阉割的版本
领导恶心下属 你是恶心自己的小孩

[Chad0000]

若干年后：

儿媳：你快就算了，前戏都没有
儿子：我看视频都这样的啊

[249239432]

老子一巴掌就解决的事情，你还要写个脚本？

[HongXinss]

多做无用功

[awebird]

质疑"绿坝"，理解"绿霸"，成为“绿爸”.. 😂

[andforce]

// @author Kimi + 廖智海

OP 名字应景：荒谬的智慧，海了去了～

[U2Fsd]

孩子这辈子有个好爹，幸福了🙊

[timethinker]

魔怔人

[syntaxj]

没正确教育能力,只能拿自己仅有一点自以为是的手段去实现掌控感的心理安慰罢了.还要发 v 站找点认同感和成就感 ,把你能的,你要不直接 new 个 child 得了

[dododada]

@victorkk 小孩子不懂的，只要有的看能和其他小朋友讨论就无所谓；另外 4 要温柔坚定的，坚定就行了，温柔扔掉吧，讲好了不听一巴掌就完事儿了。
小树苗长歪了不剪枝，难道还要试试用哪种肥料才不会长歪么

[calmlyman]

看了楼上的评论挺寒心的，楼主明明挺用心的，也很关爱孩子，也为了孩子健康，还发挥了自己特长。其他人却在泼冷水，殊不知，小时候我要是有这么聪明的爹，现在应该更幸福的。

[zdw189803631]

有点逆天

[DXpro]

分裂人的孩子 🤣

[vsitebon]

其实比起这个，我还是觉得海外的这个用 NFC 变现允许且限制小孩看电影的方案显得更有趣一点： https://simplyexplained.com/blog/how-i-built-an-nfc-movie-library-for-my-kids/ 。而时长是直接约定好，或者直接限制在 NFC 卡片上

[sdwill]

堵不如疏。我现在都是对崽说：你想要可以，但是必须答应几个条件（比如只有 xx 分钟，时间到了就停）或者做个什么事（比如收拾玩具），要不就没有。你可以自行选择。如果是大哭大闹，那是绝对没有的，甚至还会惹我生气（生气就是一都比，哈哈哈）。

经过几次后，慢慢的就养成默契了。想看动画片或者想玩会 switch 就会好好说，时间到了，就乖乖关了机器。偶尔几次恋恋不舍超时间也无伤大雅。

[joyhub2140]

哈哈，我告诉你我怎么对付这情况，小孩子熬夜看动画是吧，我周末专门陪小孩子看动画，我有手机边玩变监督，论熬夜爷们没输过谁，不准睡觉，让他看通宵，只准做这一件事，看动画，最后小孩子看腻了，想睡觉了，行，我说明晚继续，他就怕了，再也不敢熬夜看了。

玩 switch 也一样，我暑假用同样招数给他玩 switch ，最后他玩吐了。

现在对动画片和 switch 都没兴趣了，偶尔带同学过来一起玩 switch 。

[victorkk]

@calmlyman #20 呃...楼主用心是肯定的，这个话题先不谈。你居然感叹的是想要有个聪明的爹...这句话有点怪怪的。

[qwertty01]

好好好，不能看动画片，只能看抖音短视频了

[calmlyman]

@victorkk 有什么问题呢，我爹确实教育程度很低，60 年代的人哪有什么好的教育呀

[SkywalkerJi]

你自己看视频也看阉割版吗？

[wildmaker]

@victorkk 我们一定看过同一本教育的书

[JinBin]

30 年后，5 分钟开发呼吸机脚本，保持心跳但父亲防止苏醒

[iOCZS]

写得很好，下辈子别写了

[tyrantZhao]

孩子太可怜了。

[SvenWong]

那些 diss 的 OP 的不知道有几个是有孩子的，我只能说理解并同情你，但不是很认同你的做法，你可以尝试，改变睡前习惯，比如看看绘本不要看电子产品，或者选择小猪佩奇、拉布拉多警长这种短小的动画片，你也没说一定要控制在 4 分钟有什么原因，这些短小的一集在 3-8 分钟，最长也不会超过 10 分钟，这样就不会突然打断。

[victorkk]

@wildmaker #30 咳，做个好父母说起来容易做起来难，时常感觉自己做的还不好，有时控制不住真的会崩溃发火，太难了。

[Messmer]

孩子这辈子有了

[xing7673]

v 站没小孩的用户比例是真的大
op 这已经是比较好的了
小学前的小孩基本上懂不了啥

[fgwmlhdkkkw]

一秒钟拔管，防止父亲沉迷地球 online 。哈哈哈

[yuzuhi]

你小孩投胎到你家真是倒了大霉

[qwertyzzz]

@andytao 你也就现在嘴上说说 小时候你试试？

[Natsuno]

你们都会错意了，看了下主页，OP 发这个主要是为了体现他作为一个产品如何折腾的，下一步就是关注公众号教你如何《培养产品思维，利用 AI 实现技术》了

[07aPzknB16ui9Cp3]

不如直接乱棍打死，小孩北欧，楼主省心

[Rehtt]

不如找一部单集时间短的动画，推荐《布鲁伊》单集时长 6~7 分钟，b 站上有资源，而且内容也好评如潮，作为小孩英语启蒙也不错

[assiadamo]

不如看各种劣质国产如 XX 的故事，让小孩对动画产生阴影，就不再看了

[viviwon]

@kelvansun #4 主要是丧失了选择的权利，国外乱七八糟胡言乱语的真是不少

[Vtwoguest]

医生：您的父亲病情似乎很严重 需要立即输液
儿子：可以 但是我要求只输四分钟

[rekulas]

哈哈,同款问题,同款爹和儿子,同样是 b 站 我现在是手动选择 6 分钟左右视频给他看

[piero66]

堵不如疏

[rouxi]

做个人 ，虽然说要限制。但是可以好好沟通

[ibcker]

坏爸爸

[kelvansun]

@viviwon 对于大部分人来说是感觉不到 GFW 的存在，对于想看看外面的世界的人来说靠技术档也是档不住的。

[JoryJoestar]

夸张，我还以用 AI 自动搜 4-5 分钟故事呢

[Sawyerhou]

等你孩子长大了，知道你这么干，可能会记你一辈子，谨慎处理。

[viviwon]

@kelvansun #51 感觉国家也只是想不让这件事变得太容易，这样就已经让很多人出不去了。很多大学图书馆甚至寝室都是可以直接上外网的

[wzdsfl]

希望以后不会成为 OP 这样的家长

[ccaa5j]

可怜的孩子，有这样的父亲真的很不幸，希望你老了，你儿子也这样对你

[kelvansun]

@viviwon 毕竟大部分人是听风就是雨的。 教育网不过 GFW 吗？

[viviwon]

@kelvansun #57 应该是部分。之前在图书馆突然发现能直接打开谷歌，试了下油管居然也可以

[hillerliao]

@rekulas 你的解决方案更好。

[hillerliao]

感谢大家的提醒，是要找到一个更好的不会欺骗孩子的解决方案。

[hillerliao]

@vsitebon 谢谢分享，学习一下。

[hillerliao]

@10RR 谢谢提醒，反思中。。。

[hillerliao]

@10RR 反思中。。。

[hillerliao]

https://search.bilibili.com/all?vt=11527116&keyword=123&from_source=webtop_search&spm_id_from=333.1007&search_source=5&tids=1&duration=1

试了一下 B 站的站内搜索，市场的筛选项只有 10 分钟以下，没有 5 分钟以下的。

[10RR]

@hillerliao
嗯，确实很难，但是希望可以逐步找到更好的办法吧。
我觉得基础应该建立在诚实、信任、沟通、约定上，而不是欺骗。