我把一个"会自己查资料"的 AI 助手塞进了浏览器侧边栏，开源了

先说结论：这是一个开源的 Chrome 扩展 + Node.js 服务端，装好之后你的浏览器侧边栏里就住着一个 AI 助手------总结当前网页、划词即问、自动多页深度研究，而且每一步在干什么、花了多少钱，全都看得见。

GitHub：github.com/Maxkim321/m...

全程实测截图，文末有 5 分钟跑起来的教程，还有"怎么参与贡献"。

一、为什么做这个

你大概率也遇到过这几个场景：

点开一篇长文，读了 1/3 发现"这文章好像不太行"，但时间已经花出去了；
看到一段不懂的概念，想问 AI，得先复制 → 切窗口 → 粘贴 → 提问，一整套下来思路都断了；
想搞清楚一个问题，搜出来的文章质量参差不齐，开了七八个标签页来回对照，最后不了了之。

市面上的 AI 浏览器插件不少，但我想要的是一个不切页面、就住在侧边栏里，并且能自己动手查资料的助手，而不是一个"套壳聊天框"。于是就有了这个项目。

二、它能干什么（直接上效果）

1. 一键总结本页

在任意网页点一下"总结本页"，它会提取正文（Readability），输出一句话概括 + 核心要点 + 关键数据，并附上来源 URL 和正文字数------回答是可溯源的，不是凭空编的。

左侧是掘金的一篇讲前端就业的文章，右侧是助手的总结。注意右下角那个小条：本会话花了 7126 token，约 ¥0.0165------每次 AI 回答的成本就摆在那里，不玩玄学。

侧边栏特写长这样，可以看到它中间有一个"执行轨迹"面板，把 AI 的推理轮次和工具调用过程展示了出来：

2. 划词即问

选中一段文字，页面上会浮出一个小工具条：翻译、总结、解释、改写、问词，还可以直接基于选中内容提问。比如我选中文章里"初级岗位萎缩（根据 Gartner 预测，2025 年低代码将替代 30% 基础开发需求）"这段：

点"解释"，它会结合整篇文章的上下文来解释这段话，输出"这段文字在说什么 / 关键概念 / 背景与意义"，而不是干巴巴的名词解释：

顺便一提，"提取表格"按钮可以把当前页面的表格直接转成 Markdown/CSV（上面那篇文章里的转型方向表格，一键就被抽成了 Markdown 表），对要写文档的同学是个小神器。

3. 深度研究：它会自己搜、自己读、自己汇总

这是这个项目最有意思的部分。你在输入框里扔一个问题，点 🔍 深度研究，它会：

拆解主题：把问题拆成几个子主题；
自动检索：用浏览器搜索引擎搜出真实存在的 URL（不用 LLM 凭记忆编链接）；
后台静默阅读：在后台标签页里逐页抓取正文，读完自动关掉，不打扰你；
交叉对比：把多来源的信息放在一起比对，标记矛盾点和信息缺口；
生成带来源的报告：每个结论都能追溯到原始页面。

我拿"Chrome Side Panel API 的兼容性与侧边栏扩展开发最佳实践"实测了一把（就是做这个项目时真实困扰过我的问题），执行轨迹长这样------每一条检索词、每一个抓取的页面都列了出来，失败的标记 ✗，成功的标记 ✓：

最后生成的报告有结论、分主题结果、来源列表、数据可信度说明：

比较打动我的是它的"诚实"：报告里明确标注了哪些主题信息不足、哪些检索结果是噪声（比如它自己发现"Chrome 下载地址"这类结果是检索词误召回，与 API 兼容性无关），而不是硬凑一份看起来很满的报告。AI 会编造，所以可溯源和可信度标注比"看起来很聪明"更重要。

这次研究总共花了 44.7k token、约 ¥0.24------其中 65% 的调用量走的是便宜的 light 档模型（后面讲这个）。

4. 还有一些贴心的小东西

多轮对话 + 会话持久化：历史会话可以切换，关掉浏览器再开还在；
可随时打断：回答到一半发现方向不对，点停止，不浪费 token；
偏好记忆：记住你喜欢"总结简短一点""翻译成英文"这类偏好，跨会话生效；
浏览记忆：总结过的文章会沉淀成本地记忆卡片，之后再问相关问题时，它会提示"参考了你之前读过的 N 篇"。

三、5 分钟跑起来

环境要求：Node.js ≥ 20、pnpm ≥ 9，以及一个 DeepSeek API Key（官网申请，充 10 块钱能用到你怀疑人生）。

bash 复制代码

# 1. 克隆 & 安装
git clone https://github.com/Maxkim321/mcp-browser-analyzer.git
cd mcp-browser-analyzer
pnpm install

ini 复制代码

# 2. 配置 Agent Server 的环境变量（agent-server/.env）
ARK_API_KEY=你的DeepSeek密钥
ARK_BASE_URL=https://api.deepseek.com
ARK_MODEL=deepseek-chat

bash 复制代码

# 3. 启动服务端（监听 9999 端口）；Windows 下也可以直接双击根目录的 start-agent.bat
pnpm agent-server

bash 复制代码

# 4. 构建 Chrome 扩展
pnpm extension:build

打开 Chrome，访问 chrome://extensions/，开启右上角"开发者模式"，点"加载已解压的扩展程序"，选择 chrome-extension/extension 目录（注意：是 manifest.json 所在的这一层）：

点击浏览器工具栏上的扩展图标，侧边栏弹出并显示"已连接"，就大功告成了。

几个说明：

Key 只存在你自己机器上的 .env 里 ；会话数据存在浏览器本地（chrome.storage.local），记忆卡片是本地 JSONL 文件，没有第三方数据上报；
服务端兼容 OpenAI 协议，理论上换成其他兼容服务只需改 .env 的三个变量；
如果懒得弄 Key，项目里还有一个独立的 ai-code-review CLI，可以 npm run review:sample 用 Mock 数据体验 AI 代码审查。

四、写给开发者：这项目有什么值得看的东西

如果你只是想用，上面的内容就够了。但这个项目真正想吸引的是"对 Agent 工程感兴趣"的人------它不是一个套壳 Demo，Agent 工程里那些真正费劲的问题，它都正面处理了，而且每一项都有数字或机制佐证：

1. 分级模型路由，成本有账可查 不是所有环节都需要旗舰模型。项目把调用点按任务标注了档位：打分、检索词改写、上下文压缩这类活儿走便宜的 light 档，规划和报告才走主模型。上面那次深度研究，light 档承担了 65% 的调用，账单明细在 localhost:9999/dashboard 一眼可见：

2. 上下文压缩：用基准说话 长会话会撑爆 context window，常见做法是简单截断------但会丢事实。这个项目自建了一个"保真度基准"（往对话里埋事实点 → 压缩 → 再考回来）：实测滚动摘要策略的事实保留率 100% ，而截断式只有 23.3% ，同时视图层 token 省 69%。压缩策略是可插拔的，选型靠数字不靠感觉。

3. 黄金评测集，改坏当场报警 固定 fixture + 三层判分（字符串 / 正则 / LLM-as-judge），10 个用例一条命令跑完，prompt 或模型一动，退化当场就知道。写操作的评测还会按"工具-选择器-值"的动作序列做轨迹判卷：

4. 事件溯源，服务重启断点续跑 所有会话事件 append-only 落 JSONL，服务重启后自动重放重建上下文。我在写这篇文章时重启了服务端，之前的研究会话无缝恢复------不是设计文档里写了，是真的发生了。

5. 可观测性做到 Step 级 AI 在干什么（推理第几轮、调用了什么工具、抓取哪个页面）实时推送到前端，所以你看到的每张截图里都有"执行轨迹"。

架构上：Chrome 扩展（Vue3 + MV3，SidePanel/Service Worker/Content Script 三件套）通过 WebSocket 连 Node.js 服务端；服务端是自研的三层编排（固定任务走 Prompt 模板、开放对话走 ReAct 循环、深度研究走一个 ~200 行、零依赖可单测的状态机）。没有重型框架，每个模块都能单独读懂。

五、想一起玩？这里有一把待办

项目还年轻，Roadmap 上有一堆事，非常适合作为第一个开源贡献的练手场：

新手友好 ：manifest 里有一个失效的 default_popup 路径（加载页会显示红色"错误"角标，不影响使用），顺手清掉就能熟悉一遍整个构建链路；
会话管理补全：重命名 / 删除 / 搜索历史会话；
写操作（Computer Use） ：点击/填表带审批卡片，权限流水线已经预埋好了挂载点；
模型适配器：Provider 层预留了 Claude / Gemini 的扩展位；
MCP Client：计划接入第三方工具生态，让侧边栏助手能调用更多工具；
ai-code-review：审查技能（安全/复杂度/命名）是可插拔的，欢迎加新 skill。

哪怕不是提代码，在 Issue 里说说你的使用场景、或者吐槽"为什么这里要这样设计"，都非常有价值。

六、最后

这个项目的核心理念其实就一句话：让 AI 助手长在浏览器里，看得见过程，算得清成本，查得到来源。

如果它让你有一点点"哦？有点意思"的感觉，去给个 Star 吧------对你是顺手，对独立开发者是真的能高兴一整天。

GitHub：github.com/Maxkim321/m...

声明：文中所有截图均为真实运行结果。AI 输出内容可能存在错误，项目能做的是让每个结论可溯源、让不足被标注------但最终的判断，还得是你。