三个月前，我做过一个免费开源的浏览器书签小工具 Selector，用来帮助我们在网页上快速选择页面元素。把书签拖到浏览器的书签栏后，点击就能呼出操作面板，再点击网页里的元素就能直接选中。选中后按下 Command+C（Windows 上是 Ctrl+C）复制，切换到 Codex 粘贴，就能把刚才选中的元素位置和页面信息整理成一段提示词。
把这些信息发送给 AI Coding Agent 之后，Agent 能够非常快地在代码库里定位到对应位置。因为 Agent 查找元素本质上是去检索代码，我们给它提供了准确的代码和页面上下文，它定位起来就很简单。相比直接截一张图发给 Agent、让它从画面里去提取文字或颜色，直接选择元素的上下文信息是一种更高效的方式。这个书签我自己使用了很长时间，是我日常 Vibe Coding 过程中非常重要的一个工具。
最近，我基于这个免费的开源书签做了一个浏览器拓展版本 Selector Pro。拓展版本是一个付费工具，价格是 5 美元直接买断、永久使用。相比原本的书签版本，浏览器拓展版本在交互和功能上做了很多增强。
快捷键与多选支持
浏览器拓展安装之后是一个黑色的小圆圈图标，点击可以在页面上弹出带有 Pro 标识的操作面板。
除了点击图标，拓展版本还支持使用快捷键呼出。我们在页面上直接按 F2 就能弹出面板，再按一次 F2 就可以关闭，不需要每次都用鼠标去点击书签栏。
呼出面板之后，我们可以按住 Shift 键在页面上多选元素，比如同时选中 3 个或 4 个元素。按 Command+C 复制后切换到 Codex 粘贴，刚才选中的所有元素信息都会一次性放进提示词里。
拓展版本还支持跨标签页的状态持久化。我们在一个页面启用了拓展之后，切换到其他标签页时面板不会自动关闭，除非我们手动关闭或者再次按下快捷键。
截图与上下文联动
在日常排查和修改 UI 问题时，我们经常需要同时查看代码和视觉表现。
按 F2 激活拓展并选中页面上的文字或元素后，按下 Command+I（Windows 上是 Ctrl+I），拓展在复制提示词的同时会自动下载一张对应的图片。
来到 Codex 粘贴，提示词里除了页面上下文之外，还会直接带上这张本地图片的文件链接。
这张图片并不是只截取元素本身极小的一块区域，而是在当前元素范围的基础上向外扩大了一点，把周围相邻的元素也展示出来一部分。
通过这种方式，Codex 既能知道元素的代码上下文，又能直接读取图片里的视觉信息。比如页面 UI 出现了一些样式问题或者边框异常，Codex 既能定位到代码所在的位置，又能直接查看图片确认具体表现。两种信息相互补充，而且不需要先粘贴一次文本再上传一次图片，一次操作就能把完整信息提供给 Codex，排查 UI 问题的效率会提高很多。
纯文本与 Markdown 提取
除了抓取元素上下文，拓展还提供了两项实用的文本提取功能。
第一项是纯文本提取。选中区域后按下 Option+Command+C（Windows 上是 Alt+Ctrl+C），可以只复制选中区域内的纯文本信息。在浏览一些长文章时，如果通过鼠标滚动去选择文字，经常会遇到滚动到某个位置突然失焦、选区断开的情况；使用这个快捷键，我们可以直接从外层容器提取里面的完整文本。
第二项是 Markdown 格式提取。在网页中按下 Command+M，拓展可以直接把网页内容（比如一篇公众号文章）提取为整理好的清洗版 Markdown 格式，按 Command+C 就能直接复制。如果遇到不支持直接复制文档的网站，或者需要把网页文档整理后提供给 AI，使用 Command+M 就可以快速复制并保留 Markdown 结构。
多选备注与写轮眼模式
在选中多个元素的时候，拓展支持为各个元素单独添加备注。比如我们选中两个元素，把第一个元素备注修改为 1，第二个元素备注修改为 2。按 Command+C 复制后粘贴到 Codex 里，提示词就会把备注带在对应的元素位置上，方便更清楚地向 AI 描述不同区域的修改要求。如果需要清空所有选区，直接按 Esc 键即可清理。
在拓展的设置面板里，所有的快捷键都支持自定义。
设置中还有一个「写轮眼模式」。开启写轮眼模式后，复制页面上的任何元素，拓展都会把该元素内部所有子元素的细节和图片等完整信息全部复制下来，生成的提示词文本会非常详细。当我们看到其他网站上有设计得很好的元素、想要复刻功能或还原 UI 设计时，开启写轮眼模式就能直接复制出完整的元素信息，直接提供给 AI 进行还原。
