张洪Heo
·
Agentation 油猴脚本：让AI指哪改哪,配合 Claude Code 的开发神器
内容提要
文章介绍了一个油猴脚本，将Agentation工具打包注入到localhost页面，使非React项目也能通过点击页面元素生成结构化信息，配合MCP同步给AI，实现“指哪改哪”的网页修改功能。脚本安装简单，仅匹配本地开发环境，不影响线上网站。
延伸解读
适用场景与限制
该脚本主要面向使用原生 HTML/JS 开发、无法直接集成 Agentation 官方 React 组件的本地项目。它通过油猴注入方式，让非 React 项目也能获得类似“指哪改哪”的标注能力。但需注意，脚本仅匹配 localhost 和 127.0.0.1，不会影响线上网站，因此只适用于本地开发调试阶段。
工作原理简析
脚本将 Agentation 及其依赖（react、react-dom）用 esbuild 打包成一个 bundle，再通过油猴脚本注入到本地页面。它创建一个 #agentation-root 容器，用 React 渲染 Agentation 组件，并连接到默认的 MCP 服务（http://localhost:4747），实现标注信息的实时同步。这种打包注入方式避免了在每个项目中手动安装依赖。
使用注意事项
使用前需确保已安装 Tampermonkey 扩展，并启动本地开发服务器和 agentation-mcp 服务。脚本内置了打包好的 Agentation，安装即用，无需额外依赖。作者提到直接复制提示词给 Claude Code 更方便，但也支持通过 MCP 直接连接，用户可根据自身习惯选择。
Q&A
Agentation 油猴脚本是做什么的？
这个油猴脚本将 Agentation 工具打包并注入到 localhost 页面，让非 React 项目也能通过点击页面元素生成结构化信息，配合 MCP 同步给 AI，实现“指哪改哪”的网页修改功能。
为什么需要这个油猴脚本？
因为 Agentation 官方只支持 React 项目，需要 npm 安装并依赖 React 组件树。对于原生 HTML/JS 项目无法直接使用，所以作者编写了油猴脚本，将 Agentation 打包注入到 localhost 页面，使非 React 项目也能使用。
这个油猴脚本的工作原理是什么？
原理是将 agentation、react、react-dom 用 esbuild 打包成一个 bundle，套上油猴脚本外壳，匹配 localhost 页面，页面加载后自动挂载工具栏。配合 agentation-mcp 服务（默认 http://localhost:4747），标注内容实时同步给 AI。
如何安装和使用这个油猴脚本？
安装步骤：1. 浏览器安装 Tampermonkey 扩展；2. 安装脚本（下载 agentation.user.js）；3. 本地启动项目开发服务器（localhost 或 127.0.0.1）；4. 启动 agentation-mcp 服务；5. 打开页面，点击右下角 Agentation 按钮开始标注。
这个脚本会影响线上网站吗？
不会。脚本只匹配 localhost 和 127.0.0.1，不会影响线上网站。
使用这个脚本后，如何将标注信息同步给 AI？
可以通过两种方式：一是配合 agentation-mcp 服务实时同步给 AI；二是直接复制生成的提示词发给 Claude Code。作者个人觉得直接复制更方便。
这个油猴脚本的下载方式有哪些？
脚本文件 agentation.user.js 已内置打包好的 Agentation，安装即用。压缩包内含脚本本体、源码、构建模板和测试页面，可通过夸克网盘或百度网盘下载。
