用 AI 改网页，最折磨人的不是改，而是”说清楚改哪里、怎么改”。

跟 Claude Code 或 Cursor 说”这个按钮往左挪一点”，AI 听完一脸懵：哪个按钮？挪多少？是 padding 还是 margin？于是你要翻代码、查文件、贴选择器、描述样式……一来一回，比手改还累。

Agentation 就是来解决这个问题的：在浏览器里点选页面元素，它自动生成 CSS 选择器、React 组件树、计算样式这些结构化上下文，配合 MCP 实时同步，AI 立刻知道你说的”这个按钮”到底是哪个、在哪个文件、现在长什么样。

想法很好，但有个硬伤——Agentation 官方只支持 React 项目。它要靠 npm install agentation 集成进项目，再依赖 React 组件树来定位源码文件。我手上的项目大多是原生 HTML/JS，直接没法用。

所以我自己写了个油猴脚本，把 Agentation 整个打包进去，注入到 localhost 的任意页面。非 React 项目，一样指哪改哪。

效果

打开本地开发页面，右下角会出现 Agentation 的入口按钮：

点击进入标注模式，鼠标悬停元素自动高亮，点一下就能写备注，生成的结构化信息通过 MCP 直接同步给 AI，告诉它具体要改哪个元素、怎么改。

原理

其实很简单：

1. Agentation 官方包通过 npm 引入，本质上就是一段注入页面右下角工具栏的代码
2. 把 agentation、react、react-dom 用 esbuild 打包成一个 bundle
3. 套上油猴脚本外壳，@match 匹配 localhost 页面，页面加载完自动把工具栏挂载进去
4. 配合 agentation-mcp 服务（默认 http://localhost:4747），标注内容实时同步给 AI

核心代码就一段，创建一个 #agentation-root 容器，用 React 渲染 Agentation 组件，防止重复注入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function () {
  if (window.__agentationInjected) return;
  window.__agentationInjected = true;

  const mount = () => {
    if (document.getElementById('agentation-root')) return;
    const container = document.createElement('div');
    container.id = 'agentation-root';
    document.body.appendChild(container);
    createRoot(container).render(
      React.createElement(Agentation, {
        endpoint: 'http://localhost:4747',
      })
    );
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mount);
  } else {
    mount();
  }
})();

使用方法

1. 浏览器安装 Tampermonkey（油猴）扩展
2. 安装脚本（下载链接在文末）
3. 本地启动你的项目开发服务器（localhost 或 127.0.0.1）
4. 启动 agentation-mcp 服务
5. 打开页面，右下角出现 Agentation 按钮，开始标注

脚本只匹配 localhost 和 127.0.0.1，不会影响线上网站。

点击按钮选中位置并评论

其实是支持直接接mcp等等方式，但是我感觉直接复制用的更方便，各有所爱吧。

大功告成！

下载

脚本文件：agentation.user.js（已内置打包好的 Agentation，安装即用，无需任何依赖）

压缩包内含：脚本本体、源码（entry.jsx）、构建模板、测试页面。

夸克网盘：https://pan.quark.cn/s/8c663f2a687a?pwd=Ng4M

百度网盘：https://pan.baidu.com/s/1p5NfaR7-X46GFdqfDTdM3A?pwd=ko0v

感谢 HaoUp 提供的信源，脚本由我制作，欢迎使用反馈。