随问 AskAlong · 边读边问的 AI 学习助手

用户516280210277
2 阅读5分钟

我做了个浏览器扩展:读技术文章时划选即问 AI,再也不用复制粘贴了

前言

不知道你有没有过这种经历:

在知乎、CSDN、掘金上读技术文章,读到一半卡在一个术语上——比如文章里提到"闭包",或者冒出来一个 GPU利用率 0.9,作者默认你懂,但你就是似懂非懂。

我以前的操作流程是这样的:

  1. 鼠标选中那段看不懂的话
  2. 切换到 AI 对话窗口
  3. 粘贴
  4. 补一句"帮我解释一下这段"
  5. 发送,等回答
  6. 看完,再切回文章,找回刚才读到的位置

一次还好,一篇文章来个四五次,心流碎成渣了。而且更致命的是:AI 只拿到一个孤零零的片段,它不知道这篇文章在讲什么、不知道前后文,答得经常不对路。

于是我做了这个项目——随问 AskAlong,一个 Chrome 扩展:

在任何技术文章页面,划选一段文字 → 点「解释」→ AI 的回答直接流式浮现在文字旁边,并且 AI 自动阅读了整篇文章的全文作为上下文。

全程零复制粘贴、零窗口切换。

先看效果

demo

如上:选中看不懂的段落,浮出工具条,点「解释」,一张快答卡就在选区下方流式作答。想知道更深的细节,点「↳ 侧栏追问」,这轮问答会被带进侧边栏,继续多轮对话。

侧边栏长这样(基于文章全文回答,还支持思考模型的推理过程展示):

sidepanel

它解决了什么

痛点对策
复制粘贴麻烦划词后浮出工具条:解释 / 翻译 / 问AI 一键触发
切换窗口打断心流行内快答卡浮在文字旁;多轮追问走浏览器侧边栏,不离开页面
AI 拿不到文章全貌,答不准扩展直接读取页面 DOM 提取文章全文,每次提问自动作为上下文

另外还有一些我觉得很必要的能力:

  • 多标签页并行:两个文章页各问各的,切换标签不会打断后台正在生成的回答
  • 编辑重发:对自己发过的提问不满意?悬停 → 原地编辑 → 重新生成,旧对话自动截断
  • 长文预算:超长文章不会无脑全量投喂,按「开头 + 完整目录 + 与问题最相关的章节」智能截断(默认 16000 字,可调)
  • 多模型:任何 OpenAI 兼容接口都能接,预设了智谱 GLM、DeepSeek、Kimi、OpenAI、本地 Ollama

几个关键实现

源码在这里:github.com/Bswoalwo/as…,全程原生 JavaScript、零依赖、无构建步骤,clone 下来就能加载。挑几个有意思的点聊聊。

1. 怎么让 AI"读到"文章全文

这是整个项目的核心。思路分三级:

  1. 平台适配器优先:给 20+ 个站点维护正文选择器——公众号 #js_content、CSDN #content_views、知乎 .Post-RichTextContainer(问答页还能收齐全部回答)、GitHub article.markdown-body、StackOverflow(问题+全部回答)、小红书、掘金、博客园……
  2. Readability 简化算法兜底:陌生站点就克隆一份 DOM,删掉 script/导航/评论区/广告,然后按 <p> 和 <pre> 的文本密度给容器打分,得分最高的就是正文;
  3. 提取后转成 Markdown 再发给模型——比直接发 HTML 省一半以上 token,代码块还能保留语言标记。

2. 划词 UI 为什么用 Shadow DOM

工具条和快答卡是注入到别人页面里的,如果用普通 DOM,文章站自己的 CSS 会把 UI 冲得稀烂(反之亦然)。所以全部 UI 挂在 Shadow DOM 里,:host { all: initial } 一套组合拳,和页面样式完全隔离。

3. 踩坑:MV3 Service Worker 30 秒"自杀",思考模型必触发

这是开发中最有意思的一个坑,单独展开讲讲。

Chrome MV3 的 Service Worker 有个机制:空闲 30 秒就会被强制休眠。而我的架构里,所有对模型 API 的请求都走 SW 代理(解析 SSE 再把增量推给页面)。

测试时一切正常,一接真实模型就频繁"连接中断"。排查后发现:思考型模型(比如 GLM-5.3-Flash,思考模式常开)在吐出第一个字之前,要先静默"思考"几十秒。这段静默期里没有任何消息流动,30 秒一到 Chrome 把 SW 杀了,通道随之断开。我的 mock 测试没暴露这个问题,因为 mock 每 25ms 就吐一个字,SW 一直"忙"。

解法是官方认可的保活套路:只要有请求在飞,每 20 秒调一次任意扩展 API,重置空闲计时器;顺手把思考模型的 reasoning_content 也解析出来,折叠展示成"💭 已深度思考"块,等待不再是黑盒。

4. 长文怎么截断才不"失忆"

粗暴砍半会让模型失去全文结构。我的做法是:先按 Markdown 标题把文章切节,然后保留「开头 2000 字 + 完整目录 + 与划选/问题关键词重合度最高的章节」,并在末尾告知模型"以上是节选、原文共 N 字"。模型知道自己在看节选,回答时就不会不懂装懂。

快速上手

  1. git clone https://github.com/Bswoalwo/askalong.git
  2. Chrome 打开 chrome://extensions → 开启「开发者模式」→ 「加载已解压的扩展程序」→ 选择 askalong 文件夹(Edge 同样适用)
  3. 首装自动弹出设置页,选模型服务 → 粘贴 API Key → 点「测试连接」→ 保存

然后随便打开一篇技术文章,划选一段话,点「解释」,体验一下什么叫边读边问。

最后

项目已经开源,MIT 协议, repo 在这里:

GitHub: github.com/Bswoalwo/as…

如果你也经常读技术文章,欢迎试用 + 提 Issue;如果觉得思路有意思,一个 Star 就是最大的鼓励~

avatar
文章
阅读
粉丝