Agentation 油猴脚本：让AI指哪改哪,配合 Claude Code 的开发神器

用 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，告诉它具体要改哪个元素、怎么改。

原理

其实很简单：

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

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

(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();
  }
})();