【实战】从零编写智慧树自动播放脚本：一个后端工程师的油猴脚本入门指南-拓冰建站

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 Fork

Greasy 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() { // 显示配置弹窗 });