小天管理的内容 - 页 244

[分享创造] 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 ，不会前端技术，只需描述清楚自己的需求，稍微知道一点原理，就能快速获得能够运行的简单脚本，给工作和生活带来便利。如果你有类似需求或体验，欢迎交流探讨。

2024年9月11日

登录

个人资料

版块

下载

商城

小天管理 发表的所有内容

小天管理发表的所有内容