想让网页按你的想法运行？油猴（tampermonkey）脚本就是你的工具。通过编写自定义脚本，你可以自动执行操作、修改页面内容、屏蔽广告，甚至增强网站功能。下面是一套清晰的油猴脚本创建与调试流程，适合新手快速上手。
一、安装油猴并创建第一个脚本
在开始编写前，先确保你已安装油猴扩展：
- 浏览器推荐使用 Chrome 或 Edge
- 前往应用商店搜索“Tampermonkey”并安装
- 安装完成后，点击浏览器右上角油猴图标
- 选择“创建新脚本”
- 默认会打开一个编辑界面，包含基础元数据和示例代码
删除示例代码中的内容，准备从头写一个干净的脚本。
二、理解脚本结构：元数据块与主逻辑
油猴脚本由两部分组成：顶部的元数据块和下方的JavaScript代码。
// ==UserScript==
// @name 我的第一个脚本
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 尝试修改百度首页
// @author You
// @match https://www.baidu.com/*
// @grant none
// ==/UserScript==
关键字段说明：
- @name：脚本名称，便于识别
- @match：指定脚本在哪些网址运行，支持通配符
-
@grant：声明需要的API权限，如需弹窗用
alert，可设为GM_notification - @run-at：控制脚本执行时机，如 document-start、document-end
元数据结束后，写入JavaScript代码：
document.addEventListener('DOMContentLoaded', function() {
document.title = '已被脚本修改';
});保存后刷新目标页面，查看是否生效。
三、编写实用功能：常见操作示例
以下是一些常用场景的代码片段，可直接参考使用：
自动点击按钮
// 等待元素出现后再点击
function autoClick(selector) {
const btn = document.querySelector(selector);
if (btn) btn.click();
}
autoClick('#submit-btn');修改页面文字
const el = document.querySelector('h1');
if (el) el.textContent = '新标题：脚本已生效';注入CSS样式
const style = document.createElement('style');
style.textContent = `
body { background: #f0f8ff !important; }
.ad-banner { display: none !important; }
`;
document.head.appendChild(style);监听页面变化（如SPA页面）
const observer = new MutationObserver(() => {
console.log('页面结构更新');
// 在这里执行你的逻辑
});
observer.observe(document.body, { childList: true, subtree: true });四、调试技巧与常见问题排查
脚本不生效？别急，按步骤排查：
- 确认 @match 规则正确，URL完全匹配
- 打开浏览器开发者工具（F12），查看控制台是否有报错
- 在脚本中加入
console.log('测试')确认是否执行 - 检查元素是否在 DOM 加载完成之后才存在，必要时使用 setTimeout 或 MutationObserver
- 如果页面使用 iframe，脚本默认不进入，需单独处理
建议开发阶段设置：
- @run-at document-end：确保DOM基本就绪
- 频繁保存后刷新页面测试
- 使用
alert()或console.log()输出调试信息
基本上就这些。掌握结构、理解执行时机、善用调试工具，就能写出稳定可靠的油猴脚本。不复杂但容易忽略细节，多练几次就熟练了。
