1. 从浏览器到自动化为什么需要一个脚本管理器如果你经常在网上冲浪尤其是需要重复处理一些网页操作比如批量下载图片、自动填写表单、屏蔽烦人的广告或者想给某个网站增加一些自定义功能你可能会觉得每次都手动操作非常繁琐。这时浏览器自带的开发者工具虽然强大但每次都需要打开控制台、输入代码无法做到“一劳永逸”。而浏览器扩展商店里那些功能固定的插件又未必能完全贴合你的个性化需求。这就引出了我们今天要聊的核心工具用户脚本User Script。它本质上是一段JavaScript代码由用户编写或从社区获取专门用来修改或增强特定网页的功能。你可以把它理解为给浏览器安装的一个“外挂”或“模组”只在你指定的网站上生效。比如一个脚本可以让视频网站自动跳过片头广告或者让购物网站自动比价。但是浏览器本身并不能直接运行这些用户脚本。它们需要一个“翻译官”或“执行器”这就是脚本管理器。脚本管理器是一个浏览器扩展它的核心职责就是加载、管理并在合适的时机运行你的用户脚本。它充当了用户脚本与浏览器之间的桥梁提供了脚本的安装、启用/禁用、更新、配置等一站式管理功能。目前最主流、最通用的脚本管理器有两个Tampermonkey油猴和Violentmonkey暴力猴。它们几乎支持所有基于Chromium内核的浏览器如Chrome、Edge、新版Opera、Brave等以及Firefox。对于绝大多数用户来说在这两者中任选其一即可。它们的功能高度重叠都遵循相同的用户脚本标准Greasy Fork社区标准脚本基本可以通用。细微的差别在于Tampermonkey历史更久、用户基数更大部分高级功能如同步、备份可能需要付费Violentmonkey则完全开源免费界面更简洁。作为入门选择哪一个都不会错。所以安装一个脚本管理器就等于给你的浏览器打开了“自定义增强”的大门。接下来我们就从零开始完成环境搭建的第一步。2. 主流脚本管理器安装指南以Chrome和Edge为例安装脚本管理器非常简单整个过程就像安装一个普通的浏览器扩展。下面我将以最常用的Google Chrome和Microsoft Edge浏览器为例详细演示安装Tampermonkey油猴的步骤。其他浏览器如Firefox、Brave的流程也大同小异。2.1 在Google Chrome中安装TampermonkeyChrome拥有全球最大的扩展商店安装过程最为标准。打开Chrome网上应用店在Chrome浏览器中点击右上角的三个点更多工具选择“扩展程序”然后在打开的页面左上角点击“Chrome网上应用店”。或者你也可以直接在地址栏输入chrome://extensions/后点击左侧的“打开Chrome网上应用店”。搜索扩展在应用店顶部的搜索框中输入“Tampermonkey”或“油猴”进行搜索。选择并添加在搜索结果中找到由“Tampermonkey B.V.”发布的“Tampermonkey”扩展。认准这个开发者避免安装到山寨版本。点击蓝色的“添加至Chrome”按钮。确认添加此时会弹出一个对话框详细列出该扩展需要获取的权限例如“读取和更改您在所访问的网站上的一切数据”。这是脚本管理器工作的基础权限因为它需要在特定网页加载时注入并执行你的脚本。仔细阅读后点击“添加扩展程序”。安装完成稍等片刻浏览器右上角的扩展程序区域拼图图标旁就会出现Tampermonkey的图标一个黑色的猴子头。同时你可能会被引导至一个欢迎页面简单介绍其功能可以快速浏览后关闭。注意由于网络环境差异部分用户可能无法直接访问Chrome网上应用店。如果遇到此情况可以尝试使用Microsoft Edge浏览器其商店可访问或通过下文将介绍的“开发者模式”手动安装CRX文件。2.2 在Microsoft Edge中安装TampermonkeyEdge浏览器基于Chromium开发其扩展商店在国内访问通常更加顺畅。打开Microsoft Edge加载项商店在Edge浏览器中点击右上角的三个点设置及更多选择“扩展”。在打开的扩展管理页面点击左下角的“从Microsoft Edge加载项网站获取扩展”。搜索与添加在加载项商店的搜索框输入“Tampermonkey”。在结果中找到它点击“获取”按钮。确认权限同样会弹出权限确认对话框点击“添加扩展”即可。验证安装安装成功后Edge浏览器右上角也会出现Tampermonkey的图标。你可以点击这个图标如果弹出菜单显示“已启用”和脚本数量等信息说明安装成功。2.3 备用方案手动安装CRX文件开发者模式当你无法通过官方商店安装时例如某些特殊版本的浏览器手动安装是可靠的备用方案。这需要你先获取扩展的安装包通常是.crx或.xpi文件。获取安装文件从可靠的来源如Tampermonkey官网www.tampermonkey.net下载对应浏览器的扩展文件。请务必注意文件来源的安全性。开启开发者模式在浏览器的扩展管理页面chrome://extensions/或edge://extensions/找到右上角的“开发者模式”开关并将其打开。加载已解压的扩展程序开启开发者模式后页面顶部会出现“加载已解压的扩展程序”、“打包扩展程序”等新按钮。点击“加载已解压的扩展程序”。选择扩展目录在弹出的文件选择器中不要直接选择.crx文件。你需要先将.crx文件的后缀名改为.zip然后解压到一个单独的文件夹中。最后在“加载已解压的扩展程序”时选择这个解压后的文件夹。完成安装如果一切顺利扩展就会出现在你的扩展列表中。手动安装的扩展通常会有一个“已从其他来源安装”的提示。安装完成后建议你点击Tampermonkey图标进入“仪表盘”或“管理面板”简单熟悉一下界面。你会看到“已安装脚本”、“实用工具”、“设置”等选项卡。目前列表是空的因为我们还没有安装任何用户脚本。但这标志着你的浏览器已经具备了运行自动化脚本的能力。3. 创建你的第一个用户脚本从“Hello World”开始安装好脚本管理器后我们不再仅仅是一个“使用者”更可以成为“创造者”。通过编写自己的用户脚本可以实现任何你能想到的网页自动化或增强功能。让我们从最经典的“Hello World”开始创建一个能在特定网站弹出问候框的脚本。这个过程会让你理解用户脚本的基本结构和生命周期。3.1 打开脚本编辑器首先我们需要打开脚本管理器内置的编辑器。点击浏览器右上角的Tampermonkey图标在下拉菜单中选择“创建新脚本”。这时脚本管理器会打开一个新的标签页里面已经预置了一个最基本的用户脚本模板。这个模板包含了所有必需的元数据块和一些注释。你会看到类似下面的代码框架// UserScript // name New Userscript // namespace http://tampermonkey.net/ // version 0.1 // description try to take over the world! // author You // match https://www.example.com/* // grant none // /UserScript (function() { use strict; // Your code here... console.log(Hello world!); })();3.2 理解脚本的“元数据”区块脚本开头被// UserScript和// /UserScript包裹的部分称为“元数据块”。它对于脚本管理器至关重要决定了脚本何时、何地以及如何运行。我们来逐一解析关键字段name: 脚本的名称。将New Userscript改成更有意义的名称例如My First Hello Script。这个名称会显示在脚本管理器的已安装脚本列表中。namespace: 命名空间通常可以设置为你的个人网站或一个唯一的标识符用于区分不同作者的脚本。暂时可以保留默认值或改为一个虚构的域名如https://github.com/yourname。version: 脚本版本号。遵循“主版本.次版本.修订号”的格式如1.0.0。每次对脚本进行重要更新时应该递增这个版本号以便脚本管理器提示用户更新。description: 脚本描述。用一两句话简要说明这个脚本是干什么的。将try to take over the world!改为在百度首页显示一个问候弹窗。author: 作者信息写上你的名字或昵称。match:这是最重要的指令之一。它定义了脚本应该在哪些网址上运行。支持通配符*。https://www.example.com/*表示匹配以https://www.example.com/开头的所有页面。为了测试我们将其改为https://www.baidu.com/。这表示脚本只会在打开百度首页时运行。更常见的模式是https://www.baidu.com/*这表示匹配百度域名下的所有页面。grant: 用于声明脚本需要使用的特殊Tampermonkey API权限。如果脚本只使用标准的JavaScript和DOM API比如我们即将用的alert就设置为none。如果需要使用GM_setValue、GM_xmlhttpRequest等高级功能则需要在这里声明如grant GM_setValue。3.3 编写脚本主体功能元数据块下方是一个“立即执行函数表达式IIFE”(function() { ... })();。这是用户脚本的标准写法目的是将你的代码包裹在一个独立的作用域中避免污染网页原有的全局变量也防止网页代码影响你的脚本。在// Your code here...这一行下面我们编写真正的功能代码。让我们实现一个简单的功能在页面加载完成后弹出一个对话框。将console.log(Hello world!);替换为// 等待页面完全加载 window.addEventListener(load, function() { // 弹出问候框 alert(你好世界这是我的第一个油猴脚本。); // 同时在控制台输出信息可选按F12打开开发者工具查看 console.log(脚本已成功在百度首页执行); });代码解释window.addEventListener(load, function() { ... })这是一个事件监听器。它告诉浏览器“等整个窗口包括图片、样式表等所有资源都加载完毕之后再执行我里面的函数。” 这是一个非常重要的好习惯。如果你在页面元素还没加载出来时就尝试操作它们比如用document.querySelector找按钮很可能会因为找不到元素而失败。alert(...)这是最基础的浏览器弹窗函数用于显示一条消息和一个“确定”按钮。console.log(...)将信息输出到浏览器的开发者控制台主要用于调试。用户一般看不到但对你检查脚本是否运行非常有帮助。3.4 保存并运行你的脚本保存脚本在编辑器页面按下Ctrl SWindows/Linux或Cmd SMac或者点击编辑器上方的磁盘图标进行保存。Tampermonkey会自动保存并启用这个新脚本。验证脚本生效打开一个新的浏览器标签页。访问https://www.baidu.com。如果一切正常在百度首页加载完成后你应该会立刻看到一个弹出窗口上面写着“你好世界这是我的第一个油猴脚本。”点击“确定”关闭弹窗。按下F12键打开开发者工具切换到“Console”控制台标签页你应该能看到输出的日志“脚本已成功在百度首页执行”恭喜你已经成功创建并运行了第一个用户脚本。虽然它很简单但已经包含了用户脚本的所有核心要素元数据声明、作用域隔离、等待页面加载、执行DOM/浏览器操作。你可以尝试修改match规则到其他网站如https://www.google.com/*看看脚本是否会在那些网站触发。4. 脚本管理器的核心功能与日常操作详解成功运行“Hello World”脚本后你可能已经注意到浏览器右上角的Tampermonkey图标发生了变化通常会出现一个数字。点击这个图标或者进入Tampermonkey的仪表盘你会发现脚本管理器提供了丰富的能力来管理你的脚本库。理解这些功能是高效使用脚本管理器的关键。4.1 仪表盘与脚本管理界面点击Tampermonkey图标选择“管理面板”或“仪表盘”会打开一个专属页面。这里是你所有脚本的“控制中心”。已安装脚本列表以列表形式展示所有脚本包括名称、版本、是否启用、最后更新时间等。每个脚本右侧都有操作按钮编辑、删除、开关。脚本状态开关每个脚本旁边都有一个复选框。取消勾选即可禁用该脚本而无需删除它。这在调试脚本或临时关闭某个功能时非常有用。搜索与筛选如果你的脚本很多顶部通常有搜索框可以按名称快速查找。4.2 如何安装来自社区的现成脚本绝大多数用户并不需要从零开始写脚本互联网上有海量优秀的现成脚本。Greasy Forkhttps://greasyfork.org/zh-CN是目前最主流、最安全的中文用户脚本社区。在Greasy Fork上寻找脚本访问Greasy Fork你可以通过分类、搜索来找到你需要的脚本。例如搜索“视频广告跳过”、“百度网盘直链”等。安装脚本进入脚本详情页后你会看到一个绿色的“安装此脚本”按钮。点击它。脚本管理器接管点击后Tampermonkey或Violentmonkey会拦截这个操作并弹出一个安装确认窗口。这个窗口展示了该脚本的完整元数据名称、描述、匹配站点等和代码预览。审查与安装这是一个非常重要的安全步骤不要盲目点击安装。你应该查看匹配站点match确认这个脚本会在哪些网站上运行是否超出你的预期。查看请求的权限grant特别是GM_xmlhttpRequest允许脚本发送网络请求可能涉及隐私、GM_getValue/GM_setValue存储数据等。确保你信任该脚本的作者。快速浏览代码可选如果你懂一点JavaScript可以大致看看代码逻辑避免有明显恶意行为的代码。确认安装审查无误后点击“安装”按钮。脚本就会添加到你的管理面板中并在符合规则的网站上自动生效。注意安全永远是第一位的。尽量选择Greasy Fork上“已验证”的脚本作者邮箱已验证并关注脚本的更新频率和用户评价。避免从不明来源安装脚本。4.3 脚本的更新、备份与同步自动更新在Tampermonkey的“设置” - “通用”中可以配置更新检查频率如“每日”。当脚本作者发布新版本时管理器图标上会出现更新数量提示你可以在管理面板中一键更新所有脚本或单个脚本。手动检查更新在管理面板每个脚本右侧有“检查更新”按钮。备份与恢复Tampermonkey提供了脚本导出功能。在管理面板你可以勾选多个脚本然后使用“导出”功能将它们保存为一个.json文件。重装系统或浏览器后可以通过“导入”功能快速恢复。Violentmonkey也支持类似的备份操作。同步Tampermonkey高级功能Tampermonkey的付费版本支持通过Google Drive或Dropbox同步你的脚本和设置。这对于在多台设备上工作的人来说非常方便。4.4 调试与排错当脚本不工作时怎么办你的脚本没有按预期运行别担心这是学习和创作的常态。以下是系统性的排查步骤确认脚本已启用首先去管理面板检查目标脚本前面的复选框是否勾选。有时不小心点到了。确认匹配网址正确检查脚本的match或include元数据确保你当前访问的网址完全符合其规则。例如规则是https://www.baidu.com/但你访问的是https://baidu.com缺少www脚本就不会运行。可以使用通配符*来放宽匹配如*://*.baidu.com/*。检查浏览器控制台Console按F12打开开发者工具切换到“Console”标签页。这里会显示JavaScript的错误信息。如果你的脚本有语法错误或运行时错误例如试图操作一个不存在的元素错误信息会在这里清晰地打印出来并指明出错的文件和行号通常会标记为VMxxx之类的那就是你的用户脚本。使用console.log进行调试在你怀疑的代码逻辑前后插入console.log(执行到点A, variable)来输出变量状态和程序执行路径。这是最朴素有效的调试方法。检查脚本执行时机如果你的脚本需要操作DOM元素确保代码是在元素加载之后执行的。就像我们之前做的把代码放在window.addEventListener(load, ...)或DOMContentLoaded事件中。对于动态加载内容的网站单页应用SPA可能需要使用MutationObserver来监听DOM变化。检查网页结构是否变化很多脚本是通过document.querySelector(.some-class)来查找页面上的按钮或元素的。如果网站改版HTML结构变了你的选择器就可能失效。这时需要重新分析网页元素更新选择器。禁用冲突脚本或扩展有时多个脚本或浏览器扩展可能会修改同一个页面元素造成冲突。尝试禁用其他可能相关的脚本或扩展进行隔离测试。掌握这些管理、安装和调试技能你就能从容地驾驭海量的社区脚本也能为自己编写的脚本保驾护航。5. 从新建到实战编写一个简单的网页内容修改脚本了解了基础之后让我们来点更实用的。我们将编写一个稍微复杂一点的脚本它不再是简单的弹窗而是实际修改网页的内容。这个例子非常经典为所有网页中的“时间”文本例如“2小时前”、“3天前”添加一个显眼的背景色方便快速浏览。通过这个例子你会学到如何操作DOM、使用选择器以及处理边缘情况。5.1 规划脚本功能与目标目标自动识别网页中常见的相对时间表述如“X分钟前”、“X小时前”、“X天前”、“昨天”、“刚刚”等并为包含这些文字的HTML元素如span,div,time添加一个浅黄色的背景和高亮边框。原理遍历页面中的所有文本节点使用正则表达式匹配时间模式然后找到其所在的父元素并进行样式修改。注意为了避免性能问题和对页面造成过大干扰我们需要精细控制操作的范围和时机。5.2 编写元数据与框架新建一个脚本填写以下元数据// UserScript // name 网页时间高亮器 // namespace https://your-namespace.example.com // version 1.0 // description 高亮显示网页中的相对时间文本如“2小时前”、“昨天”便于快速定位。 // author 你的名字 // match *://*/* // grant none // /UserScript (function() { use strict; // 主函数代码将写在这里 })();注意这里的match我们使用了*://*/*这是一个非常宽泛的匹配规则表示匹配所有使用HTTP或HTTPS协议的网站。在实际发布给他人使用的脚本中应尽可能精确匹配避免不必要的性能消耗和潜在冲突。这里为了演示我们放宽了规则。5.3 实现核心高亮逻辑我们将代码写在IIFE内部。思路是定义一个高亮函数然后选择合适的时机执行它。(function() { use strict; // 定义需要匹配的时间模式的正则表达式 const timePatterns [ /\b(\d)\s*分钟前\b/, /\b(\d)\s*小时前\b/, /\b(\d)\s*天前\b/, /\b刚刚\b/, /\b昨天\b/, /\b前天\b/, /\b\d{1,2}月\d{1,2}日\b/, // 匹配“X月X日” // 可以继续添加更多模式如“周一”、“上午10:30”等 ]; // 高亮样式 const highlightStyle { backgroundColor: #FFF9C4, // 浅黄色背景 border: 1px solid #FFD54F, // 琥珀色边框 borderRadius: 3px, padding: 0 2px, fontWeight: bold }; /** * 主高亮函数 */ function highlightTimeText() { // 创建一个“树遍历器”用于遍历文档中的所有文本节点 const treeWalker document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT, // 只关注文本节点 null, false ); let textNode; const processedElements new Set(); // 用于记录已处理的元素避免重复操作 while ((textNode treeWalker.nextNode())) { const textContent textNode.textContent.trim(); if (!textContent) continue; // 跳过空文本节点 // 检查文本是否匹配任何时间模式 const isTimeText timePatterns.some(pattern pattern.test(textContent)); if (isTimeText) { let parentElement textNode.parentElement; // 向上寻找合适的块级或行内块级元素进行高亮避免选中太大的容器如整个div文章内容 while (parentElement parentElement ! document.body) { const style window.getComputedStyle(parentElement); const display style.display; // 如果父元素是行内或行内块元素通常就是我们要找的直接包裹文本的标签如span, a, time if (display inline || display inline-block) { break; } // 如果是块级元素且直接包含我们关注的文本也用它比如一个p里只有时间文本 if (display block parentElement.textContent.trim() textContent) { break; } parentElement parentElement.parentElement; } // 确保找到了一个有效的元素并且没有被处理过 if (parentElement parentElement ! document.body !processedElements.has(parentElement)) { // 应用高亮样式 Object.assign(parentElement.style, highlightStyle); // 可选添加一个标题提示 parentElement.title 已高亮时间信息; // 记录已处理防止在动态加载内容时重复高亮 processedElements.add(parentElement); } } } console.log(时间文本高亮脚本执行完毕。); } // 执行时机等初始DOM加载完成后立即执行一次 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, highlightTimeText); } else { // 如果文档已经加载完成直接执行 highlightTimeText(); } // 对于动态加载内容的页面如单页应用可以监听DOM变化但需要节流以防性能问题 // 这是一个简单的防抖实现避免频繁调用高亮函数 let debounceTimer; const observer new MutationObserver(() { clearTimeout(debounceTimer); debounceTimer setTimeout(highlightTimeText, 500); // 延迟500毫秒后执行 }); // 开始观察body子树的变化 observer.observe(document.body, { childList: true, subtree: true }); })();5.4 代码解析与关键点正则表达式 (timePatterns)我们定义了一个数组里面包含了多个正则表达式模式用于匹配不同的时间文本格式。\b表示单词边界确保匹配的是独立的词。(\d)匹配一个或多个数字。document.createTreeWalker这是遍历DOM树中特定类型节点这里指文本节点的高效API。比使用document.querySelectorAll(*)然后遍历每个元素的所有文本节点性能更好。向上寻找父元素我们匹配到的是文本节点但直接给文本节点加样式很困难。通常的做法是给其父元素如span添加样式。代码中的while循环会向上查找直到找到一个合适的“行内”或“行内块”元素或者一个只包含该时间文本的“块级”元素。这避免了错误地将整个文章容器高亮。processedElements集合用于存储已经处理过的元素。因为MutationObserver可能会因为页面微小的变动而多次触发高亮函数这个集合可以防止对同一个元素重复应用样式既提升性能也避免样式冲突。执行时机DOMContentLoaded当初始HTML文档被完全加载和解析完成时触发此时DOM树已就绪但像图片可能还没加载完。这是操作DOM的最佳时机之一。MutationObserver用于监听DOM树的变化。当页面通过Ajax或JavaScript动态插入新内容时例如滚动加载更多评论这个观察者会捕获到变化并重新执行高亮函数。我们使用了一个简单的防抖函数debounce将多次连续的变化合并为一次高亮操作防止性能损耗。样式应用使用Object.assign(parentElement.style, highlightStyle)将我们定义好的样式对象一次性赋给元素的style属性。这比逐个设置style.backgroundColor、style.border更简洁。5.5 测试与优化保存脚本保存这个新脚本。打开测试页面找一个包含时间信息的网站进行测试例如知乎的回答列表、微博的时间线、GitHub的提交历史页面等。观察效果刷新页面你应该能看到类似“2小时前”、“昨天”这样的文本被添加了浅黄色的背景框。打开控制台调试如果没效果按F12打开控制台查看是否有JavaScript报错。也可以在highlightTimeText函数开头加一句console.log(开始高亮...)确认函数是否被调用。优化正则你可能发现有些时间格式没被匹配到如“1 sec ago”、“Last Monday”。你可以根据目标网站的具体情况修改或添加timePatterns数组中的正则表达式。通过这个实战例子你已经掌握了用户脚本的核心能力精准定位页面元素、修改页面样式与内容、响应页面动态变化。你可以以此为基础发挥想象力创造出更多实用的自动化脚本比如自动展开所有“”、为特定关键词添加标记、批量处理列表项等等。脚本的世界从此对你敞开。