油猴脚本开发入门：用JavaScript给任意网页加『黑科技』功能（从写第一个脚本开始）

油猴脚本开发入门：用JavaScript给任意网页加『黑科技』功能（从写第一个脚本开始）

你是否曾浏览某个网站时，心里冒出这样的念头：“要是这里能自动填表就好了”、“这个按钮要是能一键操作就完美了”、“页面广告太多，真想一键净化”……对于大多数普通用户来说，这些想法往往止步于想象。但对于了解一点前端知识，或者愿意动手尝试的你来说，这些“黑科技”功能完全可以亲手实现。今天，我们就来聊聊如何通过编写用户脚本（UserScript），借助 Tampermonkey（俗称油猴）这个强大的工具，将你的浏览器变成一个高度定制化的“超级浏览器”。

简单来说，用户脚本就是一段运行在特定网页上的JavaScript代码。它像是一个隐形的助手，在网页加载时悄悄介入，按照你设定的规则去修改页面内容、添加功能或自动化操作。而Tampermonkey，就是管理、运行这些脚本的“指挥官”。它本身不提供具体功能，但为你搭建了一个安全、便捷的脚本运行环境。这意味着，你无需等待网站官方更新，也不必依赖功能固定的浏览器扩展，就能为自己打造独一无二的浏览体验。

无论你是刚接触JavaScript的前端新手，还是希望将想法快速落地的开发者，用户脚本开发都是一个绝佳的实践场。它门槛相对较低，能让你立刻看到代码带来的改变，获得强烈的正反馈。接下来，我们将从零开始，一步步构建你的第一个脚本，并深入探讨如何让它变得更强大、更智能。

1. 环境搭建与脚本管理器选择

在开始编写代码之前，我们需要一个“舞台”来运行我们的脚本。这个舞台就是用户脚本管理器。市面上主流的脚本管理器有好几款，它们各有特色，但核心功能相似：安装、管理、启用/禁用用户脚本。

1.1 主流脚本管理器对比

目前，最广为人知且功能最完善的当属 Tampermonkey（篡改猴），这也是本文主要使用的工具。它支持 Chrome、Edge、Firefox、Safari、Opera 等几乎所有主流浏览器，拥有超过千万的用户，生态成熟，文档齐全。除了Tampermonkey，还有 Violentmonkey（暴力猴） 和 Greasemonkey（油猴，Firefox专属） 等选择。

为了帮助你快速做出选择，这里有一个简单的功能对比表格：

提示：对于初学者和大多数场景，强烈建议从Tampermonkey开始。其庞大的用户基数意味着你在遇到问题时更容易找到解决方案，丰富的功能也能满足你未来更复杂的开发需求。

1.2 安装Tampermonkey

安装过程非常简单，以Chrome浏览器为例：

1. 打开Chrome网上应用店。
2. 在搜索框中输入“Tampermonkey”。
3. 找到由“Jan Biniok”开发的“Tampermonkey”扩展，点击“添加到Chrome”。
4. 在弹出的确认对话框中点击“添加扩展程序”。

安装成功后，你会在浏览器工具栏的扩展程序区域看到一个猴头图标。点击它，如果看到类似“仪表盘”、“添加新脚本”的菜单，就说明安装成功了。

// 这是一个最简单的Tampermonkey脚本元数据块示例，我们稍后会详细解释
// ==UserScript==
// @name         My First Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.example.com/*
// @grant        none
// ==/UserScript==

对于无法访问Chrome商店的用户，也可以从Tampermonkey官网或一些可信的第三方扩展商店下载.crx文件进行离线安装。安装完成后，别忘了点击猴头图标，进入“仪表盘”熟悉一下界面。你会看到“已安装脚本”、“实用工具”、“设置”等选项卡，这里就是你未来管理所有“黑科技”的大本营。

2. 编写你的第一个脚本：从“