1. 从“刷课”这件事说起需求到底从哪来1.1 一个真实存在的场景每到学期中后段很多同学的课表里都会出现同一类课程——网络通识课。这类课程通常以视频播放为主线配合章节测验、讨论、见面课等环节最终折算成学分。智慧树就是国内高校使用频率较高的平台之一。问题在于这类课程的视频动辄几十个每个视频短则五六分钟长则二十多分钟全部看完需要投入大量时间。而很多同学同时还有专业课、实验、社团、实习时间根本不够用。于是就有了“刷课”这个需求。所谓刷课本质上就是让视频自动播放、自动切换下一集把重复性的点击操作交给程序去完成人只需要在关键节点比如弹题、测验出现时处理一下。这个需求不是偷懒而是把时间花在更有价值的事情上。我见过不少同学一边挂着网课一边写代码、做实验报告这本身就是一种时间管理。1.2 为什么选择浏览器插件这条路实现自动播放的方案有很多种。最粗暴的是用按键精灵之类的桌面自动化工具模拟鼠标点击。但这类工具的问题很明显它依赖屏幕坐标一旦页面布局变化或者分辨率不同点击就会错位而且它无法感知页面内部状态比如视频是否真的在播放、是否弹出了题目。另一种方案是直接调用平台接口但接口通常有加密和鉴权逆向成本高而且容易触发风控。浏览器插件Chrome Extension则是一个折中的选择。它运行在浏览器内部可以直接操作DOM读取页面元素的状态也能监听视频播放事件。换句话说插件能“看见”页面里发生了什么而不是盲目地模拟点击。再加上Chrome插件开发门槛不高一个content.js加上manifest.json就能跑起来非常适合个人开发者快速实现。注意这里讨论的是技术实现思路实际使用中请务必遵守所在学校的课程规定和平台服务条款。本文的重点在于拆解插件开发的技术细节而不是鼓励违规行为。1.3 本文适合谁看如果你是对Chrome插件开发感兴趣的前端新手想找一个真实项目练手这篇文章会带你从零拆解一个“智慧树自动播放插件”的完整实现。如果你是有一定经验的开发者想了解如何用content script操作视频元素、如何处理动态加载的页面这里也有不少踩坑经验可以借鉴。当然如果你只是想知道这类插件大概是怎么工作的读完也能有个清晰的认识。2. 插件整体设计与核心思路拆解2.1 核心功能拆解一个能用的智慧树自动播放插件至少需要完成以下几件事自动播放视频检测页面中的video元素触发play方法。自动切换下一集监听视频ended事件找到“下一节”按钮并点击。处理弹题视频播放过程中会弹出题目需要暂停自动操作等待用户作答。静音播放避免多个视频同时出声也方便用户挂机时做其他事。状态保持页面刷新后能继续之前的进度而不是从头开始。这些功能看起来简单但每一个都有细节。比如自动切换下一集按钮可能不是一直存在的需要等它出现弹题出现时如果继续自动播放可能会导致题目被跳过影响成绩。2.2 为什么用content script而不是backgroundChrome插件的架构里background脚本运行在独立的后台页面无法直接访问网页DOM而content script会被注入到目标页面中和页面共享DOM环境。对于操作视频、点击按钮这类任务content script是唯一的选择。background脚本在这里的作用主要是管理插件的生命周期、处理跨页面通信但核心逻辑必须放在content script里。manifest.json的配置也很关键。需要声明matches字段指定插件只在智慧树的域名下生效避免污染其他网站。同时要声明run_at为document_idle确保页面DOM加载完成后再执行脚本否则可能找不到video元素。{ manifest_version: 3, name: 智慧树自动播放助手, version: 1.0, content_scripts: [ { matches: [*://*.zhihuishu.com/*], js: [content.js], run_at: document_idle } ], permissions: [storage] }这里用的是Manifest V3因为Chrome已经逐步淘汰V2。V3对权限管理更严格storage权限用于保存用户设置比如是否静音、是否自动切换。2.3 方案选型的几个考量市面上有些插件采用“注入脚本到页面上下文”的方式也就是通过script标签把代码注入到页面的window对象里。这样做的好处是可以直接调用页面自身的JavaScript函数但缺点是容易和页面原有代码冲突而且Manifest V3对远程代码执行限制很严。相比之下content script运行在隔离环境中虽然不能直接访问页面的JS变量但通过DOM操作已经足够完成大部分任务。另一个考量是是否使用框架。有人喜欢用Vue或React来写插件界面但对于这种轻量级工具原生JS完全够用而且体积小、加载快。我个人的习惯是能用原生就用原生减少依赖降低出问题的概率。3. 核心细节解析与实操要点3.1 如何稳定地找到video元素智慧树的视频播放页面结构并不是一成不变的。有时候video元素直接暴露在DOM里有时候被包裹在多层div中甚至可能因为页面版本不同而使用不同的class名。最稳妥的方式是用document.querySelector(video)因为一个页面通常只有一个视频播放器。但如果页面里有多个video比如预览和主播放器就需要进一步筛选。我通常的做法是先获取所有video元素然后选择duration最大或者offsetWidth最大的那个因为主播放器的尺寸和时长通常更明显。代码大概是这样function getMainVideo() { const videos Array.from(document.querySelectorAll(video)); if (videos.length 0) return null; return videos.reduce((prev, curr) { return (curr.duration || 0) (prev.duration || 0) ? curr : prev; }); }拿到video元素后调用video.play()即可。但要注意浏览器的自动播放策略可能会阻止没有用户交互的播放。解决办法是设置video.muted true静音状态下浏览器通常允许自动播放。这也是为什么插件一般都会默认静音。3.2 监听视频结束并切换下一集视频播放结束后需要找到“下一节”按钮。这个按钮的文本通常是“下一节”或“下一集”但class名可能变化。用文本匹配比用class更稳定function findNextButton() { const buttons document.querySelectorAll(button, a, div[rolebutton]); for (const btn of buttons) { const text btn.textContent.trim(); if (text.includes(下一节) || text.includes(下一集)) { return btn; } } return null; }找到按钮后调用btn.click()即可。但这里有个坑按钮可能被禁用或者点击后页面没有立即跳转。我的做法是加一个延时比如点击后等3秒再检查视频是否更新如果没有更新就再点一次。同时要防止重复点击可以用一个标志位记录当前是否正在切换。3.3 弹题处理最容易被忽略的环节弹题是智慧树为了防止挂机而设计的机制。视频播放到某个时间点会突然弹出一道选择题必须作答后才能继续。如果插件不管不顾地继续播放题目可能会被跳过导致平时分丢失。处理弹题的核心是“检测到弹题就暂停自动操作”。检测方式可以是监听DOM变化看是否出现了包含“题目”或“答题”字样的弹窗。一旦检测到就停止自动播放并可以给用户一个提示比如修改页面标题或者播放一个提示音。const observer new MutationObserver((mutations) { for (const mutation of mutations) { for (const node of mutation.addedNodes) { if (node.nodeType 1 node.textContent.includes(题目)) { // 检测到弹题暂停自动播放 const video getMainVideo(); if (video) video.pause(); // 可以在这里通知用户 document.title 【需要答题】 document.title; } } } }); observer.observe(document.body, { childList: true, subtree: true });这个MutationObserver会监听整个body的子节点变化一旦有包含“题目”的新节点加入就触发暂停。实际使用中关键词可能需要调整因为不同课程的弹题文案可能不同。3.4 静音与音量控制静音是自动播放的前提。但有些用户可能希望听到声音所以插件应该提供一个开关。我通常会在页面上注入一个小按钮点击可以切换静音状态。这个按钮的样式要尽量低调不要遮挡原有界面。function toggleMute() { const video getMainVideo(); if (video) { video.muted !video.muted; } }如果页面有多个视频要对所有视频统一设置。另外有些视频的音量是通过页面自身的控件控制的直接设置video.muted可能不生效需要同时设置video.volume 0。4. 实操过程与核心环节实现4.1 开发环境准备写Chrome插件不需要复杂的构建工具。你只需要一个文本编辑器VS Code就行、一个Chrome浏览器以及一个用来测试的智慧树账号。新建一个文件夹里面放两个文件manifest.json和content.js。然后在Chrome地址栏输入chrome://extensions/打开开发者模式点击“加载已解压的扩展程序”选择你的文件夹插件就安装好了。每次修改代码后需要在扩展页面点击刷新按钮然后刷新智慧树页面改动才会生效。这个流程虽然有点繁琐但胜在简单直接不需要webpack、不需要npm。4.2 完整content.js代码结构下面是一个简化但可运行的版本包含了自动播放、自动切换、弹题检测三个核心功能(function() { use strict; let autoPlayEnabled true; let isSwitching false; function getMainVideo() { const videos Array.from(document.querySelectorAll(video)); if (videos.length 0) return null; return videos.reduce((prev, curr) { return (curr.duration || 0) (prev.duration || 0) ? curr : prev; }); } function findNextButton() { const candidates document.querySelectorAll(button, a, div[rolebutton], span); for (const el of candidates) { const text (el.textContent || ).trim(); if (text 下一节 || text 下一集 || text.includes(下一节)) { return el; } } return null; } function handleVideoEnded() { if (isSwitching) return; isSwitching true; const nextBtn findNextButton(); if (nextBtn) { nextBtn.click(); setTimeout(() { isSwitching false; }, 5000); } else { isSwitching false; } } function setupVideoListener() { const video getMainVideo(); if (!video) return; video.muted true; video.play().catch(() {}); video.addEventListener(ended, handleVideoEnded); } function checkAndPlay() { if (!autoPlayEnabled) return; const video getMainVideo(); if (video video.paused !video.ended) { video.muted true; video.play().catch(() {}); } } // 弹题检测 const observer new MutationObserver((mutations) { for (const mutation of mutations) { for (const node of mutation.addedNodes) { if (node.nodeType 1) { const text node.textContent || ; if (text.includes(题目) || text.includes(答题)) { autoPlayEnabled false; const video getMainVideo(); if (video) video.pause(); document.title 【需答题】 document.title; } } } } }); observer.observe(document.body, { childList: true, subtree: true }); // 定时检查处理动态加载 setInterval(() { setupVideoListener(); checkAndPlay(); }, 3000); // 页面加载完成后立即执行一次 window.addEventListener(load, () { setTimeout(setupVideoListener, 2000); }); })();这段代码的逻辑是每3秒检查一次视频状态如果视频暂停了就尝试播放视频结束后自动点击下一节检测到弹题就暂停并修改标题提醒用户。4.3 参数选择与调试技巧setInterval的间隔设为3秒是经过权衡的。太短比如500毫秒会频繁操作DOM可能影响页面性能太长比如10秒会导致视频结束后等待太久才切换。3秒是一个比较平衡的值。isSwitching标志位的作用是防止重复点击。因为视频结束后ended事件可能触发多次或者定时检查也会尝试切换如果没有这个标志可能会连续点击“下一节”导致跳过多集。调试时最常用的工具是Chrome DevTools的Console面板。你可以在content.js里加console.log然后在智慧树页面的Console里看到输出。如果插件没有生效先检查扩展是否启用、matches是否正确、页面是否在iframe中智慧树有些内容在iframe里content script默认不会注入到iframe需要在manifest里加all_frames: true。4.4 处理iframe嵌套智慧树的播放页面有时候会把视频放在iframe里。这种情况下content script需要注入到所有frame中。修改manifestcontent_scripts: [ { matches: [*://*.zhihuishu.com/*], js: [content.js], run_at: document_idle, all_frames: true } ]加了all_frames: true后每个iframe都会执行一份content.js。但要注意这样会导致多个实例同时运行可能会重复操作。解决办法是在代码里判断当前frame是否是顶层或者用window.top window来区分。5. 常见问题与排查技巧实录5.1 插件不生效的几种可能现象可能原因排查方法视频不自动播放浏览器自动播放策略限制检查是否设置了muted查看Console是否有NotAllowedError找不到下一节按钮按钮文本变化或页面结构不同在Console里用document.querySelectorAll遍历看实际文本弹题检测失效关键词不匹配查看弹题弹窗的实际HTML调整关键词页面刷新后失效content script未重新注入确认run_at设置检查是否有SPA路由跳转多个视频同时播放页面有多个video元素用getMainVideo筛选或对所有video统一静音5.2 自动播放被拦截怎么办Chrome的自动播放策略是如果用户没有和页面交互过带声音的视频不允许自动播放。解决办法就是静音。但有些页面会在播放后自动取消静音这时候需要监听volumechange事件一旦发现音量不为0就重新设为0。video.addEventListener(volumechange, () { if (!video.muted) { video.muted true; } });这个监听要小心不要造成死循环。设置muted会再次触发volumechange但因为已经是muted状态条件不成立不会无限循环。5.3 页面是单页应用路由切换后脚本失效智慧树的部分页面是SPA点击下一节后URL变了但页面没有整体刷新。这种情况下content script不会重新执行之前绑定的video监听器可能失效。解决办法是监听URL变化或者用MutationObserver持续监控DOM一旦发现新的video元素就重新绑定。我通常会在定时检查里加一段逻辑如果当前video和上次记录的video不是同一个就重新绑定ended事件。用一个变量保存上次的video引用即可。5.4 关于“该扩展程序未列在Chrome应用商店中”的提示自己开发的插件加载后Chrome会提示“该扩展程序未列在Chrome应用商店中并可能是在您不知情的情况下添加的”。这是正常的安全提示因为插件没有上架。点击“保留”即可。如果每次启动都提示可以在扩展管理页面找到该插件开启“允许访问文件网址”或者直接忽略。这个提示不影响功能。5.5 独家避坑经验不要用class名定位元素智慧树的class名可能带哈希每次发版都变。用文本匹配、标签名、层级关系更稳定。不要频繁操作DOM有些插件每秒检查好几次导致页面卡顿。3到5秒一次足够了。弹题检测要留后路如果检测到弹题但用户不在视频会一直暂停。可以加一个超时机制比如暂停5分钟后如果还没答题就继续播放虽然可能丢分但至少能看完。测试时用小号开发过程中难免有bug可能误点、误跳。用一个小号测试避免影响主账号的学习记录。注意Manifest版本Chrome 109之后对V2支持越来越差新项目直接上V3。V3的host_permissions和content_scripts配置和V2有区别别抄错。6. 从技术延伸到更广的思考6.1 这类插件的技术本质剥开“刷课”这个外壳这类插件的技术本质是“网页自动化”。它做的事情和Selenium、Puppeteer很像只不过运行在浏览器内部更轻量。掌握这套技能后你可以用它做很多事自动填写表单、自动抓取页面数据、自动签到、自动翻页。核心能力就是三样DOM查询、事件监听、定时任务。6.2 关于效率工具的边界我始终认为工具的价值在于把人从重复劳动中解放出来而不是替代思考。自动播放视频可以节省时间但课程里的知识如果完全不去了解那省下来的时间也只是被浪费掉。比较理想的做法是让插件处理播放和切换自己把精力放在真正需要理解的内容上比如章节测验、讨论题、见面课。这样既提高了效率又没有完全放弃学习。6.3 后续可以扩展的方向如果想把这个小工具做得更完善可以考虑几个方向。一是增加一个配置面板让用户自己设置是否静音、切换延迟、弹题提醒方式。二是增加统计功能记录已经看了多少视频、还剩多少。三是增加多平台支持比如超星、智慧职教等用同一套框架适配不同平台。四是增加异常处理比如网络断开时自动重试、视频加载失败时刷新页面。这些扩展都不难核心还是那套DOM操作和事件监听。真正花时间的是适配不同平台的页面结构以及处理各种边界情况。这也是为什么这类插件往往需要持续维护——平台一改版插件就可能失效。6.4 一个实际使用中的小技巧如果你同时有多个设备可以在主力机上挂插件刷课然后用手机或平板做其他事。但要注意智慧树可能会检测多设备登录所以最好只在一个设备上操作。另外有些课程有“学习时长”要求比如必须在线满多少小时这种情况下插件只能帮你播放时长还是要靠时间积累。最后分享一个我自己的习惯每次开始刷课前先手动看一遍课程目录把需要答题的章节标记出来然后设置一个提醒到那个时间点回来处理。这样既不会错过题目也不用一直盯着屏幕。工具是死的人是活的把工具和人的判断结合起来才是效率最高的方式。