这个学期过半研修网又弹出了继续教育的学时提醒。我打开课程列表三门必修课每门二十多节视频课合计超过十个小时的学习时长。说实话视频内容本身有价值但一节课配一次弹窗、一集结束要点一次“下一节”、学完一个章节还要回目录手动翻到下一章这套重复操作的次数多到让人怀疑平台故意在考验人的耐心。于是我把这个“XCC版”学习脚本整理出来它做的事情很简单打开课程页之后自动检测视频播放状态播完自动切下一节全程把进度和日志显示在页面角落。这篇内容适合两类人看。一类是和我一样被继续教育学时追着跑、想省下机械点击时间的学习者你可以直接用现成思路部署到自己的浏览器里另一类是刚接触浏览器自动化脚本、想了解油猴脚本怎么写的人我会把播放器检测、按钮点击、iframe处理这些关键点都拆开讲。先说清楚这不是什么破解工具不碰登录接口、不伪造学时它只是在浏览器里替你做了一个“看完自动点下一个”的乖学生动作。1. 研修网学习脚本是怎么来的——一个拖延症末期的自我救赎1.1 研修平台的“反人类”学习流程很多人没真正打开过研修网不知道这类平台的学习流程有多考验耐心。整个过程可以拆成这么几步打开研修网首页输入账号密码登录进入课程列表找到待学课程点进去在一个章节目录里找到当前该看的视频点播放等视频播完再点“下一节”然后重复。听起来不复杂但真正跑起来全是细节问题。课程视频动不动就是20到40分钟一集播放过程中只要鼠标离开页面太久某些浏览器标签页会自动休眠有的视频中途会弹出一个互动问题不点掉就一直卡在当前进度更烦的是章节目录不会自动刷新你学完第一章回到列表还得手动确认哪一章是“进行中”眼睛盯久了真的会花。我把这些痛点总结成三个字重复、等待、确认。重复的是“下一节”这个动作等待的是视频缓冲和播放结束的判定确认的是当前进度到底走到哪了。这三个痛点叠加在一起一个学期的研修任务能让人折腾两天。我写这个脚本的初衷就是把“重复”交给代码把“等待”做成可视化提醒把“确认”交给本地记录。1.2 脚本的边界只做重复点击不做内容破解先说清楚这个脚本的定位。市面上确实有人把这类学习辅助工具做成全自动挂机直接用接口请求伪造学习记录或者用Headless浏览器在服务器上跑。那不是我这个脚本的方向我也明确不建议那么做。“XCC版”的设计原则是模拟用户行为整个运行过程都发生在真实浏览器里播放器是在真实播放视频的学时记录是平台自己生成的脚本做的只是在合适的时机帮你点一下按钮。这种做法的好处有两个一是实现简单不依赖任何后端服务脚本文件复制到浏览器就能跑二是风险可控它没有违反平台的核心考核机制只是在操作层面替代手动点击。想通这一点之后技术路线就很清晰了前端脚本直接跑在浏览器页面里通过DOM操作完成点击、状态读取和信息展示。至于具体怎么实现接下来展开讲。2. 技术选型为什么是油猴脚本而不是Python爬虫2.1 三种方案的横向对比决定写脚本之前我其实做过一轮选型。研修网页面是标准的网页端操作场景候选方案无非这么几条路油猴脚本、Python加Selenium或Playwright、桌面端模拟点击工具。列个表格看得更清楚。方案上手成本环境依赖跨平台维护难度适合场景油猴脚本Tampermonkey低浏览器好中页面操作自动化点击、填表、爬取页面数据Python Playwright中高Python环境加浏览器驱动一般高批量流程、复杂交互、后端定时任务按键精灵类工具低桌面客户端差低桌面软件自动化坐标点击为主Python方案我第一个排除掉了。它的优点是可以在服务器上跑不需要真人守着浏览器但代价是要装Python开发环境、下载浏览器驱动、处理登录态保存、应对验证码整套下来工程量直接翻倍。而且研修网这类平台经常调整页面结构Python脚本一旦偶发报错排查还得依赖终端日志不如浏览器里的实时反馈直观。按键精灵看起来简单实际用起来就会发现坐标点击太脆弱。页面分辨率一变、窗口一缩坐标全偏。鼠标一晃动模拟器就误判。更麻烦的是这类工具动不动被杀毒软件报毒分享给别人也不方便。2.2 为什么最终落在油猴脚本上油猴脚本的天然优势是运行在浏览器页面上下文里对DOM的访问没有任何障碍。研修网的所有交互都在网页里完成脚本注入页面后可以像操作自己的网页一样操作它不需要任何中间层。“XCC版”这个名字里的XCC是版本命名说明这个脚本不是从零开始闭门造车而是在常见学习辅助脚本的框架基础上适配出来的。初版参考了通用自动播放脚本的做法但针对研修网的页面结构做了大量精简和重写加上了进度悬浮窗、状态日志、本地学习记录这些实用模块。脚本的整体模块规划是这样的配置区集中管理轮询间隔、自动切换开关、存储键名等参数改配置不用翻代码工具函数区封装日志输出、本地存储、DOM查找等通用方法核心逻辑区播放器检测、播放状态判断、按钮点击、答题弹窗识别UI展示区页面角落的悬浮窗显示当前课程、章节、播放状态和最近日志2.3 脚本的目录结构设计给读者一个直观的模块划分后续维护起来会轻松很多。核心函数表先列出来后面逐一解释每个函数背后的设计思路。getPlayer()从当前页面或iframe中定位video播放器节点checkPlaying()读取播放器状态判断是播放中、暂停还是已结束clickNextSection()查找并点击“下一节”按钮detectQuizPopup()检测答题弹窗是否出现logMessage()双通道日志同时写入控制台和页面悬浮窗saveProgress()把已完成章节写入localStoragerenderPanel()刷新悬浮窗UI3. 核心功能逐个拆解——从监听器到模拟点击3.1 播放状态检测MutationObserver与轮询的取舍研修网页面上视频播放器的本质是一个HTML5的video标签偶尔是iframe嵌套的播放器。要判断视频放完了没有无非两种思路一种是监听DOM结构变化一种是用定时器轮询读取状态。MutationObserver是浏览器提供的DOM监听接口可以观察到节点新增、删除、属性变化。用它来监听播放器状态的好处是实时、精准但坏处是写法复杂而且研修网页面本身就有大量动态节点变化监听器一不小心就会疯狂触发还需要做防抖处理。对于我这种只想“等视频放完就点下一节”的场景杀鸡用牛刀。轮询方案就简单得多设一个定时器每3秒读一次video元素的paused和ended属性。3秒的延迟对自动切换来说完全无感知代码也好调试。核心逻辑如下const CHECK_INTERVAL 3000; function findPlayer() { // 优先看当前页面的video标签 const directVideo document.querySelector(video); if (directVideo) return directVideo; // 部分课程会把播放器嵌在iframe里 const iframe document.querySelector(iframe); if (iframe iframe.contentDocument) { return iframe.contentDocument.querySelector(video); } return null; } function checkStatus() { const player findPlayer(); if (!player) { logMessage(warn, 未找到播放器继续重试); return; } if (player.paused) { logMessage(info, 播放器暂停尝试继续播放); player.play().catch(() {}); } if (player.ended) { logMessage(info, 当前视频已播放完毕准备切换下一节); clickNextSection(); } } setInterval(checkStatus, CHECK_INTERVAL);这段代码是整个脚本的心脏。findPlayer函数我设计成先查当前文档再查iframe顺序不能反因为当前文档查到video的命中率最高。检查paused属性是为了应对播放器偶发自动暂停的情况比如页面切后台回来之后播放器可能暂停脚本会尝试恢复播放。检查ended属性则是触发切换的前提。3.2 自动“下一节”与iframe嵌套处理路径clickNextSection是整个脚本里变量最多的部分因为不同版本的研修网页面“下一节”按钮的实现方式完全不一样。有的版本是一个a标签有的版本是button还有的版本根本没有独立按钮得从章节列表里自己定位当前章节的下一个兄弟节点。通用写法是先按多种选择器尝试找到按钮就点找不到就退回列表方案function clickNextSection() { const selectors [ .next-btn, .next-section, .btn-next, a.next, [class*next] ]; for (const sel of selectors) { const btn document.querySelector(sel); if (btn !btn.disabled) { btn.click(); logMessage(success, 已点击下一节按钮); return; } } // 找不到按钮退回从章节列表里解析顺序 logMessage(warn, 未识别到下一节按钮尝试从列表定位); // 这里可以根据页面实际结构编写列表跳转逻辑 }这里有个细节值得提一下点击之前一定要检查disabled属性。有些按钮在视频未播完时是灰色不可点状态直接click不会生效但脚本不知道会误以为切换成功。加了disabled判断之后如果按钮不可点日志会准确提示“当前处在不可切换状态”而不是静默失败。iframe的处理是另一个容易踩坑的地方。如果播放器在iframe里且这个iframe和主页面同源可以通过contentDocument拿到内部的video并操作如果跨域浏览器的同源策略会直接拒绝访问任何脚本都无法绕过。遇到这种跨域情况我的策略是识别到播放器不可访问时在悬浮窗明确提示“当前课程的播放器跨域请手动确认切换”不让脚本假装自己还能干活。3.3 答题弹窗只做检测和提醒不做代答研修网课程视频放到一定进度时经常弹出互动题目。弹窗出现时视频会暂停必须做一道选择题才能继续。很多辅助脚本会连这一步也自动化直接读题目、匹配选项、自动点击提交。我在写“XCC版”的时候刻意没有给自己做全自动答题。原因有两个。第一是学习的价值在于内容本身自动代答等于把整门课的学习过程全面架空最后课时刷完了但脑袋空空真正考核时吃亏的还是自己。第二是题目答案的匹配压根做不到稳定平台题库一更新硬编码的答案映射马上就废维护成本无穷无尽。所以答题模块做成了提醒模式检测到弹窗时脚本把题目文本和选项列表提取出来打印到悬浮窗日志里同时把页面滚动到弹窗区域提醒你来处理。代码核心就是检测弹窗容器是否存在function detectQuizPopup() { const popup document.querySelector(.quiz-popup, .question-box, [class*quiz]); if (popup !popup.classList.contains(xcc-reminded)) { popup.classList.add(xcc-reminded); const question popup.innerText.trim().slice(0, 200); logMessage(warn, 检测到答题弹窗请手动作答 question); } }加一个自定义class标记的目的是为了避免同一个弹窗反复提示刷屏。你作答完成后弹窗消失下一次新弹窗出现时class标记不存在又会触发提醒。这个设计在实战里特别好用不会被日志淹没。3.4 进度记忆与悬浮窗设计看完一个章节之后脚本会在localStorage里记录完成状态。这样即使你关掉了浏览器下次打开课程页面悬浮窗也能直接展示“进度3/20”而不是从零开始猜测。存储格式我设计得尽量简单就是一个JSON对象键名固定function saveProgress(courseId, chapterId) { const key xcc_learn_progress; const data JSON.parse(localStorage.getItem(key) || {}); if (!data[courseId]) data[courseId] []; if (!data[courseId].includes(chapterId)) { data[courseId].push(chapterId); localStorage.setItem(key, JSON.stringify(data)); } }悬浮窗的实现也值得说说。一个固定定位在页面右下角的div带一点半透明背景实时显示三行信息当前课程名、当前章节号、播放状态。日志则单独放一个可折叠区域最多保留最近十条再早的丢弃避免DOM节点无限增长拖慢页面。function renderPanel() { const panel document.getElementById(xcc-panel); if (!panel) return; panel.innerHTML div classxcc-status状态${statusText}/div div classxcc-progress进度${currentIndex}/${totalCount}/div div classxcc-log${logLines.join(br)}/div ; }这个悬浮窗帮了大忙尤其是后台挂着的时候瞥一眼就知道脚本在正常跑还是卡住了不用每次切回浏览器废半天劲检查。4. 安装、配置与实测体感4.1 环境准备与油猴插件安装在正式使用脚本之前需要准备一个能运行用户脚本的浏览器环境。推荐用Chrome或者Edge先到应用商店安装Tampermonkey扩展也就是圈子里常说的油猴。安装好之后工具栏会出现油猴图标点击图标选择“添加新脚本”把脚本代码整体粘贴进去保存即可。需要注意的一个细节是Tampermonkey的脚本作用域默认匹配所有网址这会导致无关页面也执行脚本所以必须在脚本头部写清匹配规则。一般来说研修网的课程页面URL有固定路径特征把匹配规则精确到课程页路径下其他页面一律不执行避免脚本在首页和资料页乱点。这一步非常关键不匹配好规则脚本在其他页面触发了“下一节”逻辑可能把浏览器开的一堆无关页面全部搞乱。4.2 核心配置项说明脚本开头的配置区集中管理了所有可调参数默认值已经过我实测验证直接跑没问题但你可以根据自己的实际情况调整。配置项默认值说明CHECK_INTERVAL3000播放状态轮询的毫秒数改小响应更快但费资源AUTO_NEXTtrue是否自动点击下一节设false就只检测不切换AUTO_PLAYtrue暂停时是否自动尝试恢复播放SHOW_PANELtrue是否显示页面悬浮窗PANEL_POSITIONright-bottom悬浮窗位置支持四个角STORE_KEYxcc_learn_progresslocalStorage存储键名多人共用浏览器时可以改掉CHECK_INTERVAL不建议低于1000毫秒否则每秒钟访问一次DOM页面会有明显卡顿感而且频繁操作播放器还可能触发平台的风控逻辑。3000毫秒是在灵敏度和资源占用之间的平衡点实测下来完全够用。4.3 实测效果与真实预期管理我拿自己手头的一门课程做了完整测试课程共20节视频每节平均25分钟总时长将近8个小时。手动点的话需要全程守在电脑前每隔25分钟回来点一次“下一节”中途还要处理几次互动弹窗少说得占用大半天的时间。用“XCC版”跑同一门课实际操作量降到了三次第一次是开头登录并进入课程页第二次是中途回来答掉一个互动题第三次是课程结束时确认一下总进度。视频在播放期间脚本不会干预播放器真实地流式加载视频到了结尾自动执行切换动作。整个流程下来悬浮窗里的日志清晰记录了每一步操作我心里有数它到底干了什么。但我得给一个真实的预期管理这类脚本没法做到“挂着睡一觉起来全部学完”。登录失效、网络断线、平台临时调整页面结构、验证码弹窗这些都是脚本无法绕过的不确定因素。你不能向它承诺百分百无人值守但能承诺把你99%的重复点击从每天里删掉。每次跑完一门课回头看看悬浮窗里那十几条偶尔需要人工确认的日志就会明白哪些环节值得被自动化哪些环节还是得自己来。5. 平台升级也是最坑的升级——版本维护实录5.1 选择器失效的完整排查链路脚本写完之后最大的敌人不是需求变化而是平台改版。研修网这种平台每隔一段时间就会调整前端代码改版之后最常见的现象就是脚本完全失灵悬浮窗不更新自动切换不触发看似一切正常但实际一动不动。一次典型的失效排查大概长这样。打开课程的任意章节页按F12打开开发者工具切到Elements面板。用鼠标点一下页面上那个“下一节”按钮右侧会高亮出对应的DOM节点。仔细看这个节点的class和id对比脚本里用的那个选择器。如果class变了比如原来叫next-button现在改成了btn-next-step脚本里的document.querySelector(.next-button)就会返回null一切逻辑自然停摆。定位到问题之后把脚本里的选择器更新成新class名保存脚本刷新课程页面看到悬浮窗里的日志开始正常输出“已点击下一节按钮”故障就算解决了。整个过程熟练的话五分钟内搞定这也是为什么我坚持把选择器统一放到一个函数里而不是散落在代码各处改起来只需要动一处。5.2 选择器匹配的健壮性设计经历过一次改版之后我学乖了。现在脚本里所有选择器的写法都带有多路径回退。比如查找下一节按钮时会准备四五个可能的选择器从上到下依次尝试只要命中一个就不继续往下找。这就是我在前面clickNextSection里用选择器数组的原因不是什么花哨技巧就是被平台改版打磨出来的防御式写法。尽量使用HTML结构特征而不是class名称作为锚点class名是前端最常改的属性而页面层级结构除非整站重构否则相对稳定一些。5.3 登录态、多标签互顶与网络波动维护过程中遇到的问题除了选择器失效还有三类比较常见。登录态过期是最高频的。脚本运行时间长了cookie过期页面自动跳转到登录页此时脚本找不到播放器也找不到按钮悬浮窗只会持续输出“未找到播放器继续重试”。这种情况下脚本无法自动重新登录因为我刻意不把账号密码写进脚本里任何自动化工具只要开始存储账号密码风险等级就完全不一样了。用户在悬浮窗看到持续警告时手动登录一次就好登录后刷新课程页脚本会继续工作。多标签页同时打开课程也会出问题。很多平台限制了同一账号的在线会话数一个标签页登录后另一个标签页会被顶掉。表现在脚本上就是明明看着页面正常但视频永远加载不出来。我的规避策略是在脚本里加上单实例保护检测到当前页面不是唯一打开的同域名课程页时在悬浮窗提示关闭其他标签页而不是闷头干活。网络波动的问题更隐蔽。视频播放到99%时突然断网播放器不会触发ended事件脚本会一直在等待状态。所以我在轮询逻辑里加了超时保护如果连续10次检查约30秒都检测到播放器存在但进度没有前进就输出一条日志提醒用户检查网络。用进度值变化来判断比单纯看paused和ended更可靠因为很多播放器在缓冲时并不处于paused状态。6. 最后说点真心话脚本边界与个人体会这个脚本从第一次跑通到现在中间迭代了很多版本每次改版都踩在平台更新的痛点上。回头看最有价值的不是那几行点击逻辑而是整个迭代过程里积累的浏览器自动化经验。我自己现在的使用习惯是把重点课程当成正常网课看专心盯着内容、记笔记遇到那种明显是形式主义的重复性课程才让脚本挂机跑进度。脚本的定位始终是“重复操作替代器”不应该是“学习替代器”。如果你拿着这个脚本想改造成全自动答题我的建议是慎重。不是技术上行不通而是当一门课从头到尾都不用你动脑的时候你其实在用最宝贵的时间换一个毫无意义的完成状态。偶尔偷懒无可厚非完全放弃思考就本末倒置了。最后分享一个我实际用下来的小技巧每次跑完一门课把脚本悬浮窗里的学习日志截图保存下来连同自己对这门课的笔记一起归档。等到研修考核需要提交学习总结时翻一翻这些记录写总结的速度比从零开始回忆快得多。脚本帮你省下的时间最好还是花在能让你自己真正成长的地方。