做了个 Chrome 侧栏扩展：用 xopc 边读技术文档，边问 AI

最近看到 Codex 通过 Chrome 扩展连接浏览器的用法，也想分享一下我在做的 xopc 。它的 Chrome 扩展可以在侧栏里聊天，把当前网页或选中的文字附加给 AI 。

我比较想解决的是读英文技术文档时反复复制、切窗口的问题：翻译看懂了，但概念没弄明白，还得找 AI 补问。

先把文章加进来

打开 MDN 的异步 JavaScript 入门，点击 Chrome 工具栏里的 xopc ，右侧就会出现对话面板。

在输入框旁点 ＋ → 当前页面，页面标题和域名会出现在输入框上方。首次使用时，按 Chrome 提示允许访问这个站点。

接下来就可以围绕文章提问。比如：

我会基础 JavaScript ，但一直没弄明白异步。结合这篇文章，告诉我应该重点读哪一节，为什么。

实拍：页面来源与提问草稿。截图时连接离线，尚未发送，下图同样展示操作准备过程。

这里省下的是反复搬运正文的工夫。问题也可以问得更具体：“我只是想看懂 fetch 的示例，哪些内容需要先补？”

读不懂哪段，就选中哪段

全文摘要看完了，该卡住的地方往往还是会卡住。

比如文档说，一个耗时任务还没完成，程序就能继续响应其他事件。刚接触异步时，很容易追问：JavaScript 不是单线程吗？这两件事怎么同时发生？

把那段原文选中，在侧栏点 ＋ → 选中的文本，然后问：

请用“餐厅点餐”的例子解释这段话。再告诉我，这个类比哪里不够准确。

原文就在旁边，解释里哪个词没懂，可以接着问；觉得回答有问题，也方便回去核对。读到代码时，还可以要求它按执行顺序解释，而不只是翻译注释。

注意，附加选文时分享的是选中的内容。需要联系上下文，就再附加当前页面。

看完，顺手留一份笔记

读完可以在同一段对话里继续问：

把刚才讨论的内容整理成 3 条笔记，附上原文链接。最后出一道小题，先别给答案，我试着答。

比起再存一个以后未必会打开的书签，这样至少能留住自己刚弄懂的东西。笔记直接输出在对话里，需要时复制保存即可。

怎么试

从 xopc.ai 官网 下载 xopc ，完成配置并确认能正常聊天。然后在 设置 → 浏览器 → Chrome 扩展 中安装扩展文件，到 chrome://extensions 开启开发者模式，加载 xopc 显示的扩展目录。

使用时保持 xopc 服务运行。详细连接步骤放在扩展文档，这里就不展开了。

如果你也经常在 MDN 、框架文档和技术博客之间来回翻，找一篇读到一半的文章试试。欢迎在评论区说说：你更希望 AI 帮你总结整篇，还是陪你啃懂某一段？