AIWebHelper

让一个人和一个 AI 同看同一个浏览器窗口的 MCP 服务器。 人指出要改的地方，AI 读取同一块屏幕并点击。

为什么

人看到的是屏幕，AI 看到的是文件。用截图把隔在中间的那段填上，两边就开始猜——而猜是猜不准的。「这边帮我改一下」——「哪里？」——一张截图——「不是那儿，是那上面」。

这个工具把这个来回消掉。人只需 Alt+点击 指一下，AI 收到的是：

  하고 싶은 말: 이 합계 글씨가 너무 작아요
  글자: 8,700,000원
  요소: span.v.mono.income
  선택자: div.ledg-sum span.v.mono.income
  짐작: apps/mail/src/client/ledger/  (클래스 ledg-sum)
  감싼 것: div.ledg-sum ← div.ledg-sums ← div.ledg
  ⚠ 잘림: 6px 모자람 (112px 필요, 106px 있음)
  크기: 106×23
  스타일: block · 17px · rgb(30,142,90)
  주소: http://localhost:5360/ledger/e2fa416e
  창 폭: 1000px (기기 픽셀비 2)

窗口宽度和「被截掉多少」一起送过来，这点特别值钱。截断会因为宽度不同时有时无，所以「已经截掉了」和「我这里没有截掉」两边同时为真的情况，在现实中真的会出现。

Related MCP server: Chromanche

怎么运作

由两个部分搭成。

• 浏览器扩展（extension/）——用工具栏按钮或 Alt+Shift+P 打开。 只寄生在打开中的那个标签页。打开之前，不会进到任何页面里。 调用服务器的动作由扩展替页面做（bridge.js）。因为如果页面直接去呼叫 127.0.0.1，网站有可能挡住——像 X 这种把 connect-src 钉死的地方，点了也只是「Failed to fetch」。扩展不会碰到这层墙，所以到哪都一致。 （书签工具里没有桥，所以那时就只能由页面自己直接呼叫。）

• 这边（server.js）——收下点选这种 HTTP 讯息（127.0.0.1:47391），再用 MCP 工具交给 AI。 反方向路径也同一条通道——AI 想让页面做的事，就变成一个挂着的请求由页面来领。 与其每 0.5 秒去敲门一次，改用一期待开的写法，这样就算整天运行在用户正用着的页面上，还是很安静。

重点就是不种进项目里。如果工具要跟着项目走，每个项目都得重新种一遍，也总担心会跟去混进 release。

点选的这一段（extension/picker.js）只有一份。扩展载入同一个文件，服务器也把同一个文件放出成 /picker.js（给书签方式用）。只要有两份，就会出现「书签可以、扩展不作」的那种脑子问题。

端口

47391。7000、8000、5000 等是有太多 dev server 在挤的，早晚会相争。一相争，点选就会被悄悄带到先占了那个编号的程序那里。因此端口开门失败时，每个工具响应前面都会附上这情况。要搬可以用 AIWH_PORT；这时候 /picker.js 会把自己正在监听的端口写进响应里。

挂上

在 ~/.claude.json（或其它 MCP 客户端的设置）加上：

{
  "mcpServers": {
    "aiwebhelper": {
      "command": "node",
      "args": ["/절대/경로/AIWebHelper/server.js"]
    }
  }
}

想改端口就用 "env": { "AIWH_PORT": "47391" }。

安装扩展（首次一次即可）

1. Chrome 里打开 chrome://extensions

2. 右上角把开发者模式打开

3. 点**「加载已解压的扩展程序」**，选本仓库的 extension/ 文件夹

命令行的 --load-extension 在较新的 Chrome（137 以上）已经被封了。前面三步就是唯一的路，只需要做一次。Edge、Whale 也一样。

想用书签方式的话，向 AI 要「how_to_start」即可——那是无法装扩展的浏览器使用的。

使用

1. 到你想改的页面（生产或本机皆可）

2. 按工具栏按钮或 Alt+Shift+P，徽标出现 ON

3. 照常使用即可——这工具不会干扰你。app 照原来的方式跑。

4. 在要改的地方点击 Alt+点击(point)，在出现的输入框里写下你想改成什么，再按回车（或留白）

5. AI 用 wait_for_pick 等待并原样收走

开了之后，从那时候起你们看的就是同一个窗口。吹一句「帮我把这个画面看一下」AI 就读；说「（帮我）点一下这里」它就会点。AI 也会直接在画面上用 page_point 高亮让你看「你说的是这个吗」，而不用文字。

Alt+P 能切到「连续点选」（按顺序抓几个目标）；Esc 关闭一次；按钮再按一次关闭。

工具

人与 → AI 这是：

AI → 人正在看的窗：

一起看——先知道再写

page_* 这组，动的是人已经登录着的真实窗口。被我按下，就真的会保存、送出、删除。没有撤销。方便到什么程度，代价就大到什么程度。

有这三层围栏。

• 只在打开的标签页里动作。 打开之前，不会钻进任何页面。只要按 Esc 或工具钮一次，就在那里断掉。徽标上的 ON 表示现在接好了。

• 只通 127.0.0.1。 没有从外面这家伙搬这窗口的路。

• 模棱两可，就不按。 比如屏幕上有三个「保存」时，不会偷偷地选第一个——而是把列表交回去，用 nth 去决定等。遇到再问一次只多一次来回；但错了一次就没有回头路了。

host_permissions 写得宽，是为了让打开的那个标签在跳转也连得住。若是用 activeTab ——换页就没了，你只要开着它点一次链接就被断了。所以既宽，那就要靠「只有在开的那个标签里动作」——这就是最大的围栏了。平时不用，还是关掉好。

规则 —— 从 CSS class 找到文件

在 presets/*.json 里，为每个项目写明「class 前缀 → 文件位置」的规则。它按网址自己挑选用（match）。

{
  "name": "내 프로젝트",
  "match": ["localhost", "example.com"],
  "rules": [{ "prefix": "ledg-", "home": "src/client/ledger/" }]
}

没有规则也可以。 元素、选择器、外层容器、被裁剪的部分、窗口宽度——这些都会原样呈现出来；规则只是额外加的罐头。

比起接 React 的 source 信息（_debugSource），这种方式更持久。那个 React 19 已经没了，而且 production build 里 component 名也会被压倒消失。CSS class 就算过建也还在。

我没有做的东西

• 屏幕截图。 只要有文字、宽度和裁剪量，大多图非必要；while adding图会把对话拖重。

• 嵌入 app 的方式。 因为每个 React project 都要重新弄一遍，还会担心它混进部署产物里。

• Electron 样子。最初我们也尝试过；但那还是有人要复制 — 把那种来回留在掉。用 MCP 的话，AI 就直接拿到。

• 远程联机。 只开 127.0.0.1——沒有必要去接收别人浏览器掷过来的点选。