【油猴】Tampermonkey脚本实战：打造智能视频连播助手

1. 油猴脚本与智能连播的完美结合每次刷教学视频时最烦什么肯定是播完一个视频就得手动点下一个啊作为重度在线学习者我经常遇到这样的场景在慕课网看完Python基础第1课正沉浸在代码世界里视频突然结束被迫返回列表找第2课——这种打断简直让人抓狂。Tampermonkey油猴这个浏览器插件就是来解决这类痛点的。它允许我们通过编写JavaScript脚本直接修改网页行为。比如自动检测当前视频播放状态结束时立即触发下一个视频的播放按钮点击。我实测过用脚本实现连播后追完整个Spring Boot课程系列能节省30%的操作时间。传统解决方案要么依赖网站自带连播功能很多教育平台都没有要么需要安装特定插件可能涉及隐私风险。而油猴脚本的优势在于轻量化只需几KB的JS代码定制自由完全按照目标网站结构编写跨平台Chrome/Firefox/Edge等主流浏览器通用2. 开发环境快速搭建2.1 基础工具准备首先确保你的浏览器已经安装Tampermonkey扩展。以Chrome为例打开Chrome应用商店搜索Tampermonkey点击添加到Chrome安装完成后浏览器右上角会出现油猴图标。点击它选择创建新脚本你会看到一个预设模板// UserScript // name New Userscript // namespace http://tampermonkey.net/ // version 0.1 // description try to take over the world! // author You // match https://example.com/* // grant none // /UserScript (function() { use strict; // Your code here... })();2.2 关键配置解析模板中的元数据块(// UserScript)需要重点配置match指定脚本生效的网址模式支持通配符// 匹配慕课网所有视频页 match https://www.imooc.com/video/*grant声明需要的特殊API权限// 如需使用GM_notification发送通知 grant GM_notification建议新手先用grant none模式避免权限问题干扰初期调试。3. 核心实现逻辑拆解3.1 DOM元素监听策略智能连播的关键是准确捕获视频结束事件。不同网站的视频播放器实现差异很大但基本思路相通查找视频元素// 通用video标签查找 const video document.querySelector(video); // 针对特定网站的选择器 const bilibiliPlayer document.querySelector(.bilibili-player video);监听结束事件video.addEventListener(ended, () { console.log(视频播放结束准备跳转); goToNextVideo(); });实测中发现某些教育平台如中国大学MOOC使用自定义播放器需要特殊处理// 针对自定义播放器的hack方案 const fakeEndEvent new Event(ended); setInterval(() { if (player.currentTime player.duration - 0.5) { player.dispatchEvent(fakeEndEvent); } }, 1000);3.2 播放状态检测的容错设计直接监听ended事件可能不够可靠我推荐采用双重检测机制定时检查播放进度兜底方案setInterval(() { const progress video.currentTime / video.duration; if (progress 0.95 !isManualPaused) { handleVideoEnd(); } }, 3000);记录用户主动暂停状态let isManualPaused false; video.addEventListener(pause, () { isManualPaused true; setTimeout(() isManualPaused false, 5000); });这种方案在我测试的6个主流平台中成功率从70%提升到98%。4. 自动跳转功能实现4.1 下一页按钮定位技巧找到下一集按钮是自动连播的关键。不同网站的DOM结构千差万别分享几个实战技巧class名称特征// 腾讯课堂的下一课按钮 const nextBtn document.querySelector(.next-chapter-btn); // 网易云课堂的CSS选择器 const nextBtn document.querySelector(.ux-next-btn);文本内容匹配// 通过按钮文字查找 const buttons [...document.querySelectorAll(a)]; const nextBtn buttons.find(btn btn.textContent.includes(下一节) || btn.textContent.includes(Next) );相邻元素定位// 通过当前选中章节找相邻元素 const currentItem document.querySelector(.chapter-item.active); const nextItem currentItem.nextElementSibling;4.2 智能点击触发方案直接调用click()方法可能不生效推荐以下几种方式原生事件触发function simulateClick(element) { const event new MouseEvent(click, { bubbles: true, cancelable: true, view: window }); element.dispatchEvent(event); }焦点转移法nextBtn.focus(); nextBtn.click();延迟点击策略针对动态加载场景setTimeout(() { const retryBtn document.querySelector(.retry-load); if (retryBtn) retryBtn.click(); }, 1500);5. 完整代码示例与优化5.1 基础实现版本以B站为例的完整脚本代码// UserScript // name B站智能连播助手 // namespace http://tampermonkey.net/ // version 1.2 // description 自动播放下一个推荐视频 // match https://www.bilibili.com/video/* // grant none // /UserScript (function() { use strict; const VIDEO_SELECTOR .bilibili-player-video video; const NEXT_BTN_SELECTOR .next-btn; let isAutoPlaying false; function init() { const video document.querySelector(VIDEO_SELECTOR); if (!video) { setTimeout(init, 1000); return; } video.addEventListener(ended, handleVideoEnd); // 进度检查兜底 setInterval(() { if (video.readyState 0 video.currentTime / video.duration 0.95) { handleVideoEnd(); } }, 3000); } function handleVideoEnd() { if (isAutoPlaying) return; isAutoPlaying true; const nextBtn document.querySelector(NEXT_BTN_SELECTOR); if (nextBtn) { nextBtn.click(); } else { console.log(未找到下一集按钮); } setTimeout(() isAutoPlaying false, 5000); } // 页面加载完成后初始化 if (document.readyState complete) { init(); } else { window.addEventListener(load, init); } })();5.2 性能优化建议事件监听器管理// 避免重复添加监听器 let isListenerAdded false; function addSmartListener() { if (isListenerAdded) return; video.addEventListener(ended, handler); isListenerAdded true; }内存泄漏预防// 页面跳转前清理 window.addEventListener(beforeunload, () { video.removeEventListener(ended, handler); clearInterval(checkInterval); });节流优化let lastCheckTime 0; function throttledCheck() { const now Date.now(); if (now - lastCheckTime 2000) return; lastCheckTime now; // 检查逻辑... }6. 多平台适配方案6.1 常见视频平台选择器库建立一个平台特征库可以大大提高脚本复用性const PLATFORMS { bilibili: { video: .bilibili-player-video video, nextBtn: .next-btn }, tencent: { video: .txp_video_container video, nextBtn: .chapter-next }, youku: { video: .ykplayer-video, nextBtn: .x-nextpage } }; function detectPlatform() { if (window.location.host.includes(bilibili)) return bilibili; if (window.location.host.includes(qq.com)) return tencent; return null; }6.2 动态加载处理现代网站大量使用动态加载需要特殊处理// 使用MutationObserver监听DOM变化 const observer new MutationObserver(mutations { mutations.forEach(mutation { if (mutation.addedNodes.length) { checkVideoElements(); } }); }); observer.observe(document.body, { childList: true, subtree: true });7. 异常处理与日志系统7.1 健壮性增强技巧元素查找重试机制function waitForElement(selector, timeout 5000) { return new Promise((resolve, reject) { const start Date.now(); const check () { const el document.querySelector(selector); if (el) return resolve(el); if (Date.now() - start timeout) { return reject(new Error(元素查找超时)); } setTimeout(check, 200); }; check(); }); }错误边界处理try { const nextBtn await waitForElement(NEXT_BTN_SELECTOR); simulateClick(nextBtn); } catch (err) { console.error(自动连播失败:, err); fallbackToManual(); }7.2 用户反馈通道添加可视化反馈元素function createStatusBar() { const bar document.createElement(div); bar.style.position fixed; bar.style.bottom 20px; bar.style.right 20px; bar.style.padding 10px; bar.style.background rgba(0,0,0,0.7); bar.style.color white; bar.style.zIndex 9999; bar.id auto-play-status; document.body.appendChild(bar); return bar; } function updateStatus(message) { let statusBar document.getElementById(auto-play-status); if (!statusBar) statusBar createStatusBar(); statusBar.textContent [智能连播] ${message}; }8. 进阶功能拓展8.1 播放列表记忆功能利用GM_setValue保存观看进度// grant GM_setValue // grant GM_getValue function saveProgress(videoId) { const history GM_getValue(playHistory, {}); history[videoId] new Date().toISOString(); GM_setValue(playHistory, history); } function getLastWatched() { const history GM_getValue(playHistory, {}); // 返回最近观看的三个视频 return Object.entries(history) .sort((a, b) b[1].localeCompare(a[1])) .slice(0, 3); }8.2 播放速度同步跨页面保持播放速度设置video.addEventListener(ratechange, () { GM_setValue(preferredSpeed, video.playbackRate); }); function applySpeed() { const speed GM_getValue(preferredSpeed, 1.0); video.playbackRate speed; }9. 实际应用中的坑与解决方案9.1 跨域限制问题当需要获取其他页面数据时会遇到跨域限制解决方案// grant GM_xmlhttpRequest GM_xmlhttpRequest({ method: GET, url: https://api.example.com/playlist, onload: function(response) { const data JSON.parse(response.responseText); processPlaylist(data); } });9.2 广告拦截冲突某些广告拦截插件会影响脚本运行解决方法// 重试机制 function safeQuerySelector(selector, attempts 3) { return new Promise((resolve, reject) { let tries 0; const check () { tries; const el document.querySelector(selector); if (el) return resolve(el); if (tries attempts) return reject(); setTimeout(check, 500 * tries); }; check(); }); }10. 脚本发布与维护10.1 版本更新策略在元数据中配置自动更新// updateURL https://example.com/myscript.meta.js // downloadURL https://example.com/myscript.user.js10.2 用户配置界面添加图形化设置面板function createConfigPanel() { const panel document.createElement(div); // 构建配置UI... document.body.appendChild(panel); // 读取GM_config存储的配置 if (typeof GM_config ! undefined) { GM_config.init({ id: AutoPlayConfig, fields: { delay: { label: 跳转延迟(ms), type: number, default: 1000 } } }); } }在脚本开发过程中我最大的体会是没有放之四海皆准的选择器。每个网站的DOM结构都可能随时变化所以好的脚本应该具备完善的错误恢复机制灵活的可配置性清晰的用户反馈最让我自豪的是为某在线教育平台开发的连播脚本经过三个月的迭代现在能智能处理23种异常场景包括网络中断、登录超时、课程权限变更等情况。当看到用户留言说这个脚本拯救了我的学习效率时那种成就感是无可替代的。