选中、描述、回车——浏览器里的 Claude Code 自己就动起来了

一、阿杰的「窗口太极」

周三下午，阿杰瘫在椅子里，Chrome 开着竞品的一个落地页。老陈在群里甩了句：「看看人家这个 CTA 按钮的间距，咱们的也调调。」

阿杰点点头，想把这事丢给 Claude Code。然后他开始了每天的固定表演——

先框选那段按钮的 HTML，⌘C；切到 iTerm，⌘V；敲一句「帮我看下这个按钮间距」；切回浏览器确认元素位置；又切回去补一句「就是第三个 card 里那个 primary 按钮」；切回浏览器一看，哦不对，是第四个；再切回去改……

光标在窗口间跳了四五趟，像打太极。等他终于切回浏览器，早忘了刚才想改的到底是左边还是右边那个——只记得自己为这事已经切了六次窗口，咖啡都凉了。

「要是能直接在浏览器里跟 Claude 说一句就好了。」阿杰对着空气嘟囔，「而不是把我自己活成一个人肉中间件。」

二、选中即指令

他上个月装了个叫 Call Your Claude 的小玩意儿，一直没认真用。这次他没切窗口。

选中那段 HTML，按下 ⌘+/（Windows 是 Ctrl+/），鼠标往那个按钮上一悬，页面高亮，点一下——面板里自动填好了 CSS 选择器：

div.cta-wrap > button.btn-primary:nth-child(2)

他在描述框敲：「这个按钮右间距不对，参考竞品调成 16px。」回车。

一秒后他瞟了眼旁边的 iTerm——Claude Code 的 tmux 会话里，一段完整的 prompt 已经安安静静躺在那儿：

[Call Your Claude] 请帮我看看这个网页上的问题：

页面链接: https:// competitor.com/landing
页面标题: Landing Page
选中元素: div.cta-wrap > button.btn-primary:nth-child(2)

选中内容:
<button class="btn-primary">立即体验</button>

问题描述:
这个按钮右间距不对，参考竞品调成 16px

连页面链接、标题、选中元素、选中内容都拼好了。Claude 已经开始读上下文，准备动手。

阿杰全程没切过一次窗口。他数了数：从「选中」到「回车」，手没离开过浏览器，咖啡还热着。

三、老陈路过

老陈端着咖啡路过，瞅了眼屏幕：「你刚那几下，手都没离开浏览器？」

阿杰：「不止。我笔记本上装的插件，连的是开发机上的 Claude Code。开发机在机房跑着 tmux，我在这摸鱼发指令。」

老陈：「……你管这叫摸鱼？」

阿杰笑：「这叫「零切换」。以前改个东西得在浏览器和终端之间折返跑，现在选中、描述、回车，Claude 自己就开干了。」他指了指面板，「它连 iframe 里的元素都能选，自动带出嵌套页面的链接和父页位置，不用我手动去扒 DOM。」

老陈凑近看了眼：「哦，所以你现在的工作量，就是从「切六次窗口」变成了「切零次窗口」。」

阿杰：「……你这话听着怎么像在嘲讽。」

老陈：「没有。我只是帮你算出，你今天省下的那六次切窗口，够你再摸五分钟的鱼。」

四、它到底是什么

不是魔法，是 WebSocket + tmux 的小把戏，但接得很巧：

1. 浏览器插件（content.js）捕获你的选区或元素，弹出面板；
2. 你填描述、回车 → 插件通过 WebSocket 把结构化 prompt 发到服务端；
3. 服务端把它拼装成「页面链接 + 标题 + 选中元素 + 选中内容 + 你的描述」；
4. 服务端用 tmux 的 load-buffer → paste-buffer -t <session> → send-keys Enter，把整段 prompt 贴进 Claude Code 的交互会话——跟你手动敲完回车一模一样。

真·「call your claude」。区别只是：你不用再当那个人肉中间件了。

五、为什么值得装

• 零切换：不用切窗口、建文件、手拼 prompt。看到就想改，选中就说。
• 精确定位：⌘+/ 元素选择模式，鼠标悬停高亮、点击即选中，CSS 选择器自动填入。Claude 知道你说的是页面上哪个按钮、哪张表，不用你用人话描述「第三个 card 里那个」（然后发现其实是第四个）。
• 直接注入终端：tmux 注入，prompt 落进正在跑的 Claude Code 会话，上下文零丢失。
• 跨机器：浏览器插件和 WebSocket 服务端分离部署。开发机在机房跑 Claude Code，你笔记本浏览器里照样发反馈——老陈说得对，这确实很适合摸鱼。
• 轻到没存在感：一个 relay + 一个 Chrome 插件，不启动数据库，不依赖任何第三方服务。
• 中文友好：IME 合成期间的 Enter 不会误触发提交——你打着拼音，它不抢回车。
• iframe 支持：嵌套 iframe 里的元素也能选，自动带出 iframe 链接和父页中的位置。

六、三分钟上手

1. 启动服务端（在跑着 Claude Code 的机器上，建议塞进 tmux）

cd server
npm install
node index.js --session claude

好消息：服务端默认端口 12346，插件默认也连 12346——两边出厂就对齐，零配置。以前这俩默认不一致是个坑，现在修好了。如果你的 Claude Code 不在默认叫 claude 的 tmux session 里，用 --session 指定真实名字即可（想换个端口也行，加 --port 覆盖，插件里跟着改地址）。

2. 加载 Chrome 插件

• 打开 chrome://extensions/ → 开启「开发者模式」
• 点「加载已解压的扩展程序」→ 选 chrome-extension/ 目录
• 点插件图标改服务端地址（默认已对齐，一般不用动），点「测试连接」，图标变绿点即成功

3. 日常用法

• 划词发送：选中文本 → 右键「Call Your Claude」→ 填描述 → 回车
• 元素选择：⌘+/（Windows Ctrl+/）→ 悬停选元素 → 点选 → 填描述 → 回车
• 面板打开后按 Esc 关闭

七、它在「三件套」里的位置

前面写过「AI 编程三件套」：

• php-vibe-coding-frame 管「写」——热重载框架，vibe 式快速验证；
• harness 管「验」——工程化环境，保证改完能跑；
• chrome_do_action（cda） 管「操作」——让 Agent 亲手遥控真实浏览器。

但还差一环：你的大脑和眼睛在浏览器里看到的东西，怎么顺畅地变成 Claude Code 的指令？

Call Your Claude 就是这环「神经」。更妙的是它和 cda 反向互补：

• cda 让 AI 伸手操作浏览器（AI → 浏览器）；
• Call Your Claude 让浏览器开口指挥 AI（浏览器 → AI）。

两者一接，就成了一条完整闭环——你指着网页说要什么 → Claude 改完 → cda 自动去浏览器验证效果。写、验、操作、连接，四件齐活。阿杰的窗口太极，到此正式退役。

八、项目地址

git clone https://github.com/smarty-kiki/chrome_call_your_claude_code.git

开源、轻量、零依赖。装好之后，下次在浏览器里看到想让 Claude 改的东西，别再 ⌘C ⌘V 打太极了——也别再当那个人肉中间件。

选中、描述、回车，剩下的交给它。

本系列由 WorkBuddy 编排发布，专栏「阿杰的技术成长」。前三篇讲了「写 / 验 / 操作」三件套，这一篇补齐「连接」这一环。