我做了个 Chrome 插件,让 AI 编程时修改页面变得更容易

大家好，我是 Jerry 👋

今天想跟大家分享一个我刚发布的小工具——Coding Agent Communicator。

🤔 痛点

相信很多同学在使用 AI 编程助手（比如 Cursor、Claude Code）的时候，会有这种感觉：

“AI 生成的代码是能跑，但我想在某个具体位置加个标注，告诉它’这里要改’，该怎么表达？”

截图画红圈？贴代码？描述具体位置？

太累了。

💡 解决方案

Coding Agent Communicator 就是来解决这个问题的。

它是一个 Chrome 插件，安装之后，你可以：

• • 🖍️ 在页面上直接选取元素并标注，指出要修改的地方
• • 💬 添加可视化注释
• • 🤖 把这些信息一键复制后发送给你的 Coding Agent

就像这样：

点选一个元素：”这里改成圆角” → 复制 → 发送 → AI 自动理解并修改

所见即所得，所想即所得。指哪改哪。

🎯 像谁？

如果你用过 VisBug，可能会有熟悉感。但它的定位更偏向”设计debug”，而 Coding Agent Communicator 是专门为 AI 协作场景设计的：

• • 标注更精准（支持 CSS 选择器定位）
• • 集成更深度（直接对接 Coding Agent）
• • 操作更丝滑（一键复制发送，包含控制台报错信息）

📦 怎么用？

1. 1. 打开 Chrome 浏览器
2. 2. 访问 Chrome Web Store 安装（https://chromewebstore.google.com/detail/coding-agent-communicator/enegomjnlhjlfefoofggbdmcnbjpcnfl）
3. 3. 点击插件启动 → 选择页面元素进行标注
4. 4. 写注释、复制、发送

完全免费，无需配置，装好就能用。

🧪 未来计划

目前是 v1.0，基本功能已经跑通。

如果你有想法，欢迎来 GitHub 提 Issue 👇

GitHub – aooyoo/coding-agent-communicator（可点击阅读原文前往）

🙋‍♂️ 最后

做这个插件的契机很简单：我在用 Cursor/Claude Code 的时候，总觉得”表达我要什么”比”写代码”还累。

希望能帮到有同样困扰的同学。

如果你觉得有意思，求个转发～ 🌟

谢谢大家！