在日常浏览网页、处理重复性工作时，你是否也曾感到疲惫？每天手动点击相同按钮、填写相似表单、或者需要从繁杂的页面里高亮出重要信息......这些其实都可以通过「脚本定制」轻松解决。
本文将带你从零开始，掌握浏览器用户脚本（Userscript）的定制方法。内容包含环境搭建、语法基础、三个实战案例以及发布调试技巧，所有代码均可直接运行。请放心，本文只介绍合法、正面的自动化技巧，绝不涉及破解、入侵或恶意爬取等违规内容。
一、为什么需要脚本定制？
用户脚本是一小段 JavaScript 代码，它能针对特定网站自动执行你设定的操作。例如：
-
自动翻页、自动点击「加载更多」
-
隐藏烦人的广告或侧边栏
-
修改网页样式，打造沉浸式阅读模式
-
自动填写工单、打卡、备份数据
据统计，合理使用自动化脚本可以为每个知识工作者每天节省 30~60 分钟 的机械操作时间。而且你不需要成为顶尖程序员------只要掌握基础的 JavaScript 和 DOM 操作，就能实现大多数需求。
二、准备工作：安装脚本管理器
目前最流行的脚本管理器是 Tampermonkey（油猴），支持 Chrome、Firefox、Edge、Safari 等主流浏览器。
-
访问 Tampermonkey 官网 安装对应浏览器扩展。
-
安装后浏览器工具栏会出现油猴图标，点击「管理面板」即可进入脚本管理页。
-
点击 + 新建脚本，就会得到一个基础模板。
模板通常包含以下结构：
javascript
// ==UserScript==
// @name 我的自定义脚本
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 在这里描述脚本功能
// @author You
// @match https://example.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 你的代码写在这里
})();📝 @match 决定了脚本在哪些网址上运行，可以使用通配符
*。例如@match https://*/*会匹配所有 HTTPS 页面，但为了性能和安全，建议只匹配必要域名。
三、核心语法速览
在定制脚本前，你需要了解几个最常用的 Tampermonkey API 和原生 JavaScript 技巧。
1. 等待页面元素加载
因为脚本可能在 DOM 未完全构建时运行，我们常使用 setTimeout、MutationObserver 或者简单延时：
javascript
// 方法一：延迟执行（简单但不精确）
setTimeout(() => {
let btn = document.querySelector('#load-more');
if(btn) btn.click();
}, 2000);
// 方法二：轮询检查（推荐）
function waitForElement(selector, callback) {
const el = document.querySelector(selector);
if (el) {
callback(el);
return;
}
const observer = new MutationObserver(() => {
const el = document.querySelector(selector);
if (el) {
callback(el);
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}2. GM_* 高级API（需要申请权限）
在元数据中通过 @grant 声明后，可以使用强大的 GM 函数，例如：
-
GM_setValue(key, value)/GM_getValue(key)：跨页面保存数据 -
GM_xmlhttpRequest：发起跨域请求（需谨慎使用） -
GM_addStyle：注入自定义 CSS
示例：
javascript
// ==UserScript==
// @name 夜间模式助手
// @match https://news.ycombinator.com/*
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle(`
body {
background-color: #0f0f0f !important;
color: #ccc !important;
}
.title a { color: #9eff9e !important; }
`);3. 拦截与修改网络响应（高级）
利用 XMLHttpRequest 或 fetch 的劫持技术可以修改网页接收到的数据，但这较复杂。多数常规需求用 DOM 操作就足够了。
四、实战案例 ①：自动点击「加载更多」
很多信息流网站（如论坛、问答社区）需要反复点击「加载更多」按钮。写一个脚本让它自动点击，直到没有更多内容。
目标网站 ：假设一个讨论区的分页按钮 ID 为 next-page
javascript
// ==UserScript==
// @name 自动加载下一页
// @match https://bbs.example.com/forum/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function clickNext() {
const nextBtn = document.querySelector('#next-page');
if (nextBtn && !nextBtn.disabled) {
nextBtn.click();
// 等待新内容加载后再次尝试，避免无限快速点击
setTimeout(clickNext, 2000);
} else {
console.log('已到达最后一页，自动停止');
}
}
// 页面加载后启动
window.addEventListener('load', clickNext);
})();⚠️ 注意：不要用于暴力请求，尊重网站服务器压力。建议每次点击后增加延时。
五、实战案例 ②：高亮页面特定关键词
当你需要快速定位页面上的某个产品型号、错误代码或者价格数字时，高亮脚本非常实用。
javascript
// ==UserScript==
// @name 关键词高亮器
// @match https://*/*
// @grant none
// ==/UserScript==
(function() {
const keywords = ['Error 500', 'price: $99', 'urgent'];
const regex = new RegExp(`(${keywords.join('|')})`, 'gi');
function highlightText(node) {
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0) {
const parent = node.parentNode;
if (parent && parent.tagName !== 'SCRIPT' && parent.tagName !== 'STYLE') {
const html = node.textContent.replace(regex, match => `<mark style="background: yellow; color: black;">${match}</mark>`);
if (html !== node.textContent) {
const span = document.createElement('span');
span.innerHTML = html;
parent.replaceChild(span, node);
}
}
} else if (node.nodeType === Node.ELEMENT_NODE && node.childNodes) {
node.childNodes.forEach(highlightText);
}
}
highlightText(document.body);
})();这段脚本会递归遍历所有文本节点，给匹配的关键词包上黄底 <mark> 标签，并且不会破坏页面结构。
六、实战案例 ③：自动填写表单并提交
想象你每天需要填写同一份调查问卷或打卡界面------姓名、工号、部门。用脚本实现一键自动填写。
javascript
// ==UserScript==
// @name 自动打卡助手
// @match https://attendance.company.com/*
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
// 尝试读取保存过的信息
let userInfo = {
name: GM_getValue('name', ''),
id: GM_getValue('id', ''),
dept: GM_getValue('dept', '')
};
// 如果信息为空，则弹出输入框让用户填写（仅第一次）
if (!userInfo.name) {
userInfo.name = prompt('请输入你的姓名');
userInfo.id = prompt('工号');
userInfo.dept = prompt('部门');
GM_setValue('name', userInfo.name);
GM_setValue('id', userInfo.id);
GM_setValue('dept', userInfo.dept);
}
function fillAndSubmit() {
const nameInput = document.querySelector('#name');
const idInput = document.querySelector('#employee_id');
const deptSelect = document.querySelector('#department');
if (nameInput) nameInput.value = userInfo.name;
if (idInput) idInput.value = userInfo.id;
if (deptSelect) deptSelect.value = userInfo.dept;
// 延迟 0.5 秒后自动提交，给用户反悔时间
setTimeout(() => {
const submitBtn = document.querySelector('input[type="submit"], button[type="submit"]');
if (submitBtn && confirm('准备自动提交，确认吗？')) {
submitBtn.click();
}
}, 500);
}
window.addEventListener('load', fillAndSubmit);
})();这里使用了 GM_setValue 将信息保存在浏览器内部（类似 localStorage 但更安全）。下次访问同一网站，脚本会自动读取并填入。
七、调试与测试技巧
脚本不工作时，不要慌张。按照以下步骤排查：
-
打开浏览器开发者工具（F12）→ Console 标签页，查看红色报错信息。
-
在脚本中加入
console.log('某步骤已执行')逐步确认代码走到了哪一行。 -
确认 @match 规则是否匹配当前网址。可在油猴管理面板点击脚本的"编辑"，下方有一个"包含的网址"列表，能直接测试当前页面是否匹配。
-
使用
debugger;关键字 ：在代码中插入debugger;，刷新页面后会自动断点，然后可以逐行执行。 -
检查权限 ：如果使用
GM_*方法但忘记@grant，会报GM_xmlhttpRequest is not defined错误。
八、发布与分享
如果你写了一个很棒的脚本，想分享给他人使用，可以上传到 GreasyFork（全球最大的用户脚本仓库）。
-
注册 GreasyFork 账号。
-
点击「发布脚本」，粘贴你的代码。
-
填写详细的说明、截图以及适用的网址。
-
发布后其他用户只需安装 Tampermonkey 并点击 Install，就能自动获得更新。
注意：发布前请移除敏感信息（如公司内部接口地址、私人 token），并添加合适的许可协议（如 MIT）。
九、注意事项：合法与合理使用
-
✅ 可以做的：自动填充自己账号的表单、优化阅读体验、提醒重要信息。
-
❌ 不可做的：刷票、绕过付费墙、批量爬取他人数据、发送垃圾请求、自动化破坏性行为。
-
⚠️ 谨慎处理：涉及金融交易、支付、修改他人数据的脚本，务必三思。
绝大多数正规网站的条款禁止"对网站功能造成非预期负载或干扰"。你的脚本应当是帮助自己提高效率，而不是替网站管理员制造麻烦。
十、总结与拓展
脚本定制是一个非常实用、门槛较低的技术爱好。从本文的三个案例出发，你可以组合它们，创造出更强大的工具，例如：
-
自动签到 + 积分提醒
-
屏蔽特定关键词的帖子
-
将网页表格一键导出为 CSV
-
合并多个页码的内容到单页无滚动阅读
学习的下一步是深入理解 MutationObserver （动态监听 DOM 变化）、Promise 异步处理以及 CSS 选择器的灵活运用。即使你只掌握了今天介绍的 20% 知识，也已经能解决 80% 的日常重复点击问题了。
希望这篇文章能激发你的动手欲望。打开 Tampermonkey，写下你的第一行脚本，让浏览器更懂你！