爱意满满的作品展示区。
micjoyce90

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

  •  
  •   micjoyce90 · 1 day ago · 636 views

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

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

    先把文章加进来

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

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

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

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

    附加 MDN 页面后,在 xopc 侧栏准备阅读问题

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

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

    读不懂哪段,就选中哪段

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

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

    把那段原文选中,在侧栏点 + → 选中的文本,然后问:

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

    选中 MDN 原文中的段落,附加给 xopc 并准备解释问题

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

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

    看完,顺手留一份笔记

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

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

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

    怎么试

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

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

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

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1096 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 23:00 · PVG 07:00 · LAX 16:00 · JFK 19:00
    ♥ Do have faith in what you're doing.