我猜大多数人的流程是：选中单词 → Ctrl+C → 切到翻译标签页 → Ctrl+V → 看翻译 → 切回原文。遇到不懂的代码片段，再切到 ChatGPT 问一下。来回切换几次，思路早断了。

今天介绍的开源 Chrome 扩展 AI Helper，有一个划词浮动工具栏功能，能让你在任意网页选中文本就直接用 AI，完全不用切换标签页。

划词工具栏是什么

安装 AI Helper 后，在任意网页选中文本，选区旁边会自动浮现一个工具栏：

点击对应按钮，结果会显示在浮动面板里，不用离开当前页面。

内联追问：不用切到侧边栏

这是我最喜欢的功能。弹出结果面板后，如果你还想继续追问，直接在面板底部的输入框打字就行。

比如你选中一段英文，点了”翻译”，看到翻译结果后觉得某个词翻得不对，直接在面板里输入”第三个词换成更口语化的表达”，AI 就会在当前面板里继续对话。

整个交互流程是这样的：

选中文本 → 工具栏出现 → 点击"翻译" → 结果面板弹出 →
底部输入框追问 → AI 回答 → 继续追问...

全程不离开当前页面，不打开新标签页，不切换窗口。读文档的思路完全不会被打断。

面板可以拖拽和缩放

结果面板不是固定死的，你可以自由调整：

• 拖拽移动：按住面板标题栏拖到屏幕任意位置
• 缩放大小：拖拽右下角调整面板尺寸
• 锁定位置：锁定后面板不会因为你选中其他文本而移动

这在实际使用中很实用。比如你在读一篇长文档，面板可以固定在屏幕右侧，一边滚动页面一边看 AI 的回答。

自定义提示词工具

除了内置的 4 个工具，你还可以添加自定义提示词工具。比如创建一个”代码审查”工具，提示词设置成：

请审查以下代码，检查潜在bug和优化建议，用中文回答

创建后这个工具会出现在划词工具栏里。而且工具支持拖拽排序，常用的放前面。显示数量也可以配置，工具多的时候不会挤成一堆。

配置选项

AI Helper 的设置里提供了划词工具栏的精细控制：

域名黑名单很实用。有些网站（比如在线编辑器、内部系统）你不想被工具栏打扰，加到黑名单就行。

一个实际场景

我在读 React 官方文档的时候，经常遇到这样的场景：

1. 选中一段关于 useEffect 的英文说明
2. 点”翻译”看中文
3. 选中一段示例代码
4. 点”解释”，让 AI 分析这段代码做了什么
5. 追问”如果我依赖数组写空会怎样”
6. AI 回答后继续追问”那和 useLayoutEffect 有什么区别”

整个过程在同一个页面上完成，不用开新标签页，不用复制粘贴。读完一个知识点，效率比以前高了不少。

小结

划词工具栏解决的核心问题是：减少上下文切换。每次切换标签页，大脑都要重新加载上下文，这个开销比想象的大。在原页面直接用 AI，把切换成本降到零。

AI Helper 是开源项目，MIT 许可证：

• GitHub: https://github.com/xiweicheng/ai-helper
• Gitee: https://gitee.com/xiweicheng/ai-helper

装上试试，读文档的体验会完全不一样。