Tampermonkey (油猴的入门与AI结合指南)
什么是 Tampermonkey (油猴)？
Tampermonkey，通常被国内用户称为“油猴”，是世界上最流行的浏览器扩展，也是一个用于管理和运行 UserScript（用户脚本）的管理器。 通过它，我们可以往任意第三方网站强行注入一段自定义的 JavaScript 和 CSS 代码，以此来实现：
- 隐藏网页中的广告
- 提取受保护或隐藏的页面数据，制作自动化表格
- 自动化繁琐的操作流程，辅助日常工作流
对于内部工具编写而言，它比制作完整的 Chrome 扩展要轻量非常多，且更新下发极快。您只需把一个 .user.js 地址丢给需求方，他点击一下就能无感安装。
常用平台与资源
- Tampermonkey 官方网站: 提供各浏览器版本的插件安装及官方指南。
- 官方脚本资源库: 官方维护的一些辅助演示。
- GreasyFork (油叉): 世界上最活跃、最大规模的用户脚本库，您可以在这搜索到全网开发者为各大网站编写的功能增强脚本，极具参考价值。
为什么选油猴？与直接开发 Chrome 扩展的横向对比
在内部做效率提升工具时，经常会面临“我们要不要开发个 Chrome 插件？”的讨论，下面图表是两者的主要抉择考量：
| 维度 | Tampermonkey 油猴脚本 | 标准 Chrome Extensions (浏览器扩展) |
|---|---|---|
| 开发难度 | 极低。单个纯文本 .js 文件即可开工，基于纯 JavaScript/CSS 极简语法。 | 较高。需熟悉 Manifest 规范、Background / Content / Popup 的通信隔离机制与打包流程。 |
| 发行与审核周期 | 无周期，秒级。员工直接将链接或代码发到群里即可复制使用，0 等待。 | 漫长。上架 Chrome Web Store 需要开发者账号、数天的审核，内网发行也需要经历繁杂的打包分发流程。 |
| 迭代更新 | 支持在自己的内网服务器配置 Check URL，自动在用户端无缝同步最新版本。 | 需通过复杂的重新发版才能覆盖全员应用，极难控制碎片化版本。 |
| 功能权限 (Capabilities) | 能对页面 DOM 深度改造，支持规避浏览器跨域限制发送特定 Request。 | 具备统治级权限。能劫持网络请求，干涉浏览器历史记录、书签及所有底层系统级别交互。 |
| 适用场景 | 测试验证原型理念（PoC）；提取表单结构；增加几个便捷内部按钮。 | 涉及多窗口管理的大型工具、强交互体系或严肃商业化。 |
如何安装和使用？
步骤一：安装浏览器扩展与必须的前置配置
- 访问 Chrome Web Store (或 Edge Add-ons)。
- 搜索并安装 Tampermonkey 官方组件。
- ⚠️ 关键安全设定（新版本必做！）： 安装完成后，请在浏览器地址栏输入
chrome://extensions/?id=dhdgffkkebhmkfjojejmpbldmpobfkfo进入扩展程序详情页，并 必须开启以下开关：- 「允许运行用户脚本」 (首要关键)：必须开启此项，才能使您的自定义测试脚本生效，否则浏览器将处于安全目的强行阻止未过审代码的发放执行。
- 「固定到工具栏」 (强烈推荐)：能够方便地将图标贴在地址栏边上，供您随时查看哪个脚本正在当前页面生效，并能实现一键启停。
- 「允许访问文件网址」 (特定需要)：当您在本地写了个 HTML 页面（地址为
file:///开头）并且想用油猴改造它时，才需要打开这个。
步骤二：安装您的第一个脚本
我们在本实验室专门准备了一个体验演示脚本当作练习。 前往 💡 试验场 - 油猴脚本靶场测试，点击页面内的安装地址，此时油猴会自动拦截并弹出脚本源码供您点击“安装”。
脚本的基础结构元数据解析
不管是手写还是 AI 生成的油猴脚本，其开头都有一个特征明显的元数据块（Metadata Block）。熟悉它可以避免 80% 的使用坑。
// ==UserScript==
// @name 脚本的名字 (用户看见的名字)
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 干啥用的？写给使用者看
// @author 作者
// @match https://*.iyunquna.com/* <-- 最重要的参数之一，定义这个脚本在什么网站上才会高亮运行
// @grant GM_xmlhttpRequest <-- 非常强大的功能，允许突破跨域请求，获取接口
// ==/UserScript==
(function() {
'use strict';
// 你的业务代码就写在这里！由于是被注入到目标页面，所以你可以为所欲为。
})();🚀 AI 赋能：零基础也能成为工具创造者 (核心思维与实操)
无论您是毫无编程经验的业务人员，还是想要提升开发效率的工程师，利用大语言模型（如 ChatGPT / Claude）辅助编写油猴脚本，都是一项不可或缺的“神级组合技”。
在本节中，我们将重点探讨如何利用 AI 解决实际问题，并将抽象的解题思维具象化、流程化。
1. 思维方法 (The Mindset)
请不要把 AI 当作一个死板的代码搜索引擎，而应将其视为您的**“高级数字实习生”**。在指挥这位实习生时，您需要具备以下思维：
- 业务逻辑的抽象化：业务人员口中的“我要把这个网页里隐藏的运单号全都导出来”是一个“人类目标”，您需要学习将其翻译为浏览器能理解的“步骤目标”：“寻找包含运单号的特定 HTML 标签 -> 提取内部文本 -> 拼接 -> 触发下载”。
- 边界与上下文意识：必须清晰地告诉 AI 你工作在什么环境（油猴脚本）、针对哪个网页（告知匹配的 URL 规律）、您期望达到的最终交互状态是什么。
- 持续迭代 (对话即编程)：第一版代码往往不完美（由于目标网页加载慢、或者网页结构极其复杂），您不必气馁。您只需要将肉眼看到的失败现象（例如：没有生效、控制台报错），用大白话反馈给 AI，让它为您“修 Bug”。
2. 解题思路与操作指南 (The Framework)
面对日常痛点，我们推荐您套用这套标准的 "COT (Chain-of-Thought) 操作四步法"：
Step 1: 确定痛点与场景定位 (Where & What) 明确痛点发生在哪一个系统、哪一个域名下。比如：“为了应对合规，内部审批系统的某个灰色确认按钮强制要求等 10 秒才能点。我想在本地破除这个限制。”
Step 2: 分析网页结构特征 (Inspect - 强烈推荐) 在浏览器目标网页上按下 F12 或右键选择“检查(Inspect)”，用鼠标小箭头指一下那个目标按钮，看看它代码里有没有 id="xxx" 或 class="xxx" 等标识。如果有，把它复制下来喂给 AI，这会让 AI 生成代码的成功率无限逼近 100%。
Step 3: 构造精准框架级 Prompt (写提示词) 将前两步的要素拿来，套用我们的万能公式： 👉 【角色设定】+【目标页面匹配】+【核心业务动作】+【防报错容错机制要求】
Step 4: 测试、反馈与微调 (Feedback) 把 AI 给出的代码粘入我们打造的 💡 脚本靶场测试区 试验。如果发现脚本不生效，您可以直接回复 AI：“这个网页的内容都是异步加载的，你的代码执行得太早了，目标元素还没刷出来。请帮我改成包含 setInterval 轮询等待获取元素的机制”。
3. 具体实例：破除灰色按钮限制 (结合本实验室靶场)
让我们把上述抽象的概念直接落地，复盘我们在上一节体验过的“靶场测试 Demo 脚本”是如何利用这套思维由 AI 编写出来的。
我们在 测试靶区靶点 预留了一个呈现灰色的无效按钮（其 ID 标识为 tm-test-target）。我们的目标就是强行修改它的样貌。
典型的 AI 喂食实录 (Prompt 示例)：
🧑💻 您发给 AI 的提示词： "你好，你现在是一名高级前端开发工程师。请帮我编写一个 Tampermonkey（油猴）脚本。 场景与目标匹配：我希望在一个 URL 里包含
tampermonkey-test字样的页面中执行它。 核心动作：
- 请在页面上自动寻找一个 ID 标识为
tm-test-target的按钮元素。- 把它原本的灰色背景强行改为
#10b981醒目绿，并让字体变为白色。- 把它的按钮文案改为“✅ 我已被油猴脚本接管拦截成功！”。 容错机制：由于现代网页往往是单页应用动态渲染的，请你必须使用 setInterval 或 MutationObserver 进行轮询检测，直到该 DOM 元素真正出现渲染后再执行上述核心动作。一旦修改成功立刻停止轮询，并配置最大重试超时机制防止死循环卡顿。 最后，请直接输出带有标准
@include和完整注释信息的 UserScript 源码结构即可。"
🤖 AI 的应对与产出： 通过这种结构化的指挥方式，AI 不仅能秒速输出代码，还会自动为您处理好“因为网页缓慢加载而导致脚本瞬间执行后抓虾报错”的这一世纪大难题（即 setInterval 方案）。 这就是高效利用 AI 进行“对话即编程”的最佳实践，您可以随时在此实验室页面开启您的创意之旅！