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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 106 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

65 条回复 • 2024-09-14 22:27:49 +08:00

shinession

106 天前

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

kelvansun

106 天前

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

10RR

106 天前 via iPhone

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

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

kelvansun

106 天前

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

kulous

106 天前 via Android

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

Leon777

106 天前 via iPhone

这辈子有了

victorkk

106 天前

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

andytao

106 天前

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

zomco

106 天前

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

dai269619118

106 天前

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

Chad0000

106 天前 via iPhone

若干年后：

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

249239432

106 天前

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

HongXinss

105 天前

多做无用功

awebird

105 天前

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

andforce

105 天前

// @author Kimi + 廖智海

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

U2Fsd

105 天前

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

timethinker

105 天前

魔怔人

syntaxj

105 天前

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

dododada

105 天前

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

calmlyman

105 天前

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

zdw189803631

105 天前

有点逆天

DXpro

105 天前

分裂人的孩子 🤣

vsitebon

105 天前

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

sdwill

105 天前

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

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

joyhub2140

105 天前

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

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

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

victorkk

105 天前

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

qwertty01

105 天前

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

calmlyman

105 天前

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

SkywalkerJi

105 天前 via Android

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

wildmaker

105 天前 via iPhone

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

JinBin

105 天前 via Android

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

iOCZS

105 天前

写得很好，下辈子别写了

tyrantZhao

105 天前

孩子太可怜了。

SvenWong

105 天前

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

victorkk

105 天前

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