1. 为什么需要智慧树自动播放脚本作为一个常年和服务器打交道的后端工程师我最近遇到了一个挺有意思的需求——帮女朋友解决智慧树网课自动播放的问题。她们单位要求刷完指定课程但手动操作实在太费时间。我第一反应是用Python写自动化脚本但折腾半天发现网页反爬机制太复杂。后来突然想到为什么不试试油猴脚本呢油猴脚本Tampermonkey这个浏览器插件本质上就是个能在特定网页自动执行JavaScript代码的工具。它最大的优势就是能直接操作网页DOM元素完全模拟人类操作。我查了下智慧树的网页结构发现视频播放器就是个标准的HTML5 video标签这简直就是为油猴脚本量身定做的场景。你可能要问市面上不是已经有现成的自动播放脚本了吗没错我一开始也试了好几个但要么版本太旧不兼容新版智慧树要么功能不全无法自动下一节。作为一个程序员最不能忍的就是差不多能用的状态于是决定自己动手写一个。2. 油猴脚本开发环境搭建2.1 安装油猴插件首先得有个油猴插件。Chrome浏览器可以直接在应用商店搜索Tampermonkey安装。如果应用商店打不开也可以去官网下载crx文件手动安装打开Chrome的扩展程序页面chrome://extensions开启右上角的开发者模式把下载的crx文件拖进来安装安装完成后浏览器右上角会出现油猴的图标点击它选择添加新脚本就会打开脚本编辑器。2.2 基础脚本结构每个油猴脚本都以特定的元信息开头这些注释告诉油猴脚本在什么网站上运行、叫什么名字等信息。下面是我们脚本的基础框架// UserScript // name 智慧树自动播放 // namespace http://your-namespace.com // version 1.0 // description 自动播放智慧树视频并跳转到下一节 // author 你的名字 // match *://*.zhihuishu.com/* // grant none // /UserScript (function() { use strict; // 你的代码写在这里 })();关键配置说明match指定脚本生效的网址这里设置为所有zhihuishu.com的子域名grant声明脚本需要的特殊权限我们暂时不需要所以设为none代码包裹在立即执行函数中是为了避免污染全局命名空间3. 实现自动播放核心功能3.1 视频元素控制智慧树的视频播放器就是个普通的video标签我们可以用DOM API直接控制它。核心思路是找到页面中的所有video元素设置播放速度和音量监听播放状态如果暂停了就自动恢复播放setInterval(function() { var videos document.getElementsByTagName(video); for (var i 0; i videos.length; i) { var video videos[i]; // 设置音量10%避免打扰他人 video.volume 0.1; // 1.5倍速播放兼顾效率和可理解性 video.playbackRate 1.5; // 如果视频暂停了自动恢复播放 if (video.paused !video.ended) { video.play(); } } }, 2000); // 每2秒检查一次这里用setInterval定时检查视频状态而不是用事件监听是因为智慧树的页面有时会动态加载视频单纯的事件监听可能失效。3.2 自动跳转下一节视频播完后我们需要自动点击下一节按钮。通过分析DOM结构发现课程列表的每个章节都有个表示完成状态的元素if (video.ended) { var chapters document.querySelectorAll(.chapter-tree-74 .left); var nextChapter null; for (var j 0; j chapters.length; j) { var chapter chapters[j]; var parent chapter.parentNode; var status parent.querySelector(.right); // 找到第一个未完成的章节 if (!status || status.innerText ! 已完成) { nextChapter chapter; break; } } if (nextChapter) { nextChapter.click(); // 模拟点击 } }这段代码会遍历所有章节找到第一个未完成的没有已完成标记的章节并点击它。我在实际测试中发现有时候点击事件不会立即生效所以加了点容错处理。4. 调试与优化技巧4.1 使用console.log调试油猴脚本的调试和普通前端代码一样可以用console.log输出信息。在Chrome中按F12打开开发者工具在Console面板就能看到输出console.log(当前视频状态, video.paused ? 暂停 : 播放中); console.log(找到未完成章节, nextChapter.innerText);调试时建议先注释掉自动点击的代码只打印日志确认逻辑正确后再启用。4.2 处理动态加载的内容智慧树的页面经常使用AJAX动态加载内容这会导致我们的脚本找不到元素。解决办法是监听DOM变化new MutationObserver(function() { // 重新初始化视频监听 }).observe(document.body, { childList: true, subtree: true });不过在我们的场景中setInterval已经能覆盖大部分情况所以暂时不需要这么复杂。4.3 性能优化每2秒遍历所有视频元素可能会有点性能开销可以做一些优化只在有视频的页面运行脚本记住已经处理过的视频避免重复操作适当调整检查间隔比如视频播放中改为5秒一次5. 发布与分享脚本5.1 打包脚本完成开发后可以直接在油猴的脚本编辑器中点击保存。脚本会自动生效在匹配的网站上。如果想分享给别人可以导出脚本文件在油猴插件图标上右键选择管理面板找到你的脚本点击导出按钮保存为.user.js文件5.2 发布到Greasy ForkGreasy Fork是最大的油猴脚本分享平台。发布流程很简单注册账号并登录点击发布新脚本粘贴你的脚本代码填写详细的描述和使用说明提交审核发布时建议注明兼容的智慧树版本以及已知的问题和限制。比如我们的脚本就无法处理视频中间的弹窗测验这点需要明确告知用户。5.3 维护与更新当智慧树更新页面结构时脚本可能会失效。这时候需要检查元素选择器是否还能找到对应元素更新match规则适配新的网址在Greasy Fork上发布新版本可以在脚本开头加个版本号方便用户知道是否需要更新。6. 安全与道德考量虽然自动播放脚本能节省时间但有几点需要注意尊重平台规则有些课程可能禁止倍速播放使用前请确认合理使用建议只用于辅助学习而不是完全替代隐私保护脚本不要收集或上传任何用户数据明确免责声明在脚本描述中说明使用风险作为开发者我们可以在脚本中加入一些保护措施比如// 检查是否是倍速播放允许的课程 if (!isAllowedSpeedUp()) { video.playbackRate 1.0; // 恢复原速 }7. 扩展思路这个基础脚本还可以进一步扩展自动答题功能识别测验弹窗并自动选择答案学习进度统计记录已学时间和剩余章节跨平台支持适配超星、慕课等其他网课平台用户配置界面让用户可以自定义播放速度等参数比如添加配置界面可以这样实现// 创建悬浮配置按钮 var configBtn document.createElement(button); configBtn.textContent 配置; configBtn.style.position fixed; configBtn.style.right 20px; configBtn.style.bottom 20px; document.body.appendChild(configBtn); configBtn.addEventListener(click, function() { // 显示配置弹窗 });8. 后端工程师的前端之旅作为一个主要写Java/Python的后端开发这次开发油猴脚本的经历让我对前端有了新的认识DOM操作比想象中强大以前觉得前端就是写页面现在发现能做的事很多浏览器生态很丰富油猴这种插件扩展了浏览器的可能性前端调试工具很成熟Chrome DevTools比大多数后端调试工具都好用虽然我的JavaScript代码可能不够优雅但能解决问题才是最重要的。这也提醒我作为开发者应该保持技术好奇心不要把自己局限在某个技术栈里。如果你也是后端开发想尝试前端油猴脚本是个不错的起点。它不需要复杂的构建工具直接写JavaScript就能看到效果非常适合练手。