Codex 一小时实现一个DeepSeek 浏览器插件实战
从「聊天太长会乱」到可检索会话:一个 DeepSeek 浏览器插件实战
本文记录一个轻量 Chrome / Edge 浏览器扩展的实现过程:不接入 DeepSeek API,不保存聊天正文,只在本机建立会话索引,并提供选词追问能力。
背景:聊天记录还在,思路却断了
用 DeepSeek 做需求分析、代码排查或内容创作时,最容易遇到的不是“找不到答案”,而是以下两个问题:
- 一个项目聊得久了,历史上下文越来越重,模型容易把早期结论、临时讨论和新问题混在一起;
- 旧会话虽然没有消失,但数量多以后很难根据项目、阶段或关键词找回来;
- 看到一段回答时,想只围绕其中一个概念继续问,却要手动复制、加引号、再补上下文。
这次的目标不是替代 DeepSeek 的会话列表,而是在网页右下角补一个“小型会话索引”,把长对话拆开,把关键节点找回来。
成品能力
| 能力 | 解决的问题 |
|---|---|
| 保存当前会话 | 在关键结论或阶段切换处建立本地书签 |
| 开启下一段 | 归档当前对话并打开新对话,主动控制上下文长度 |
| 自定义名称和备注 | 用“项目|阶段”和结论备注整理会话 |
| 搜索与筛选 | 按标题、备注、链接搜索;按全部、进行中、已分段过滤 |
| 选词追问 | 选中回答中的文字,一键写入带引用的追问模板 |
数据只保存在浏览器扩展的 chrome.storage.local 中。扩展不会读取、上传或同步 DeepSeek 的聊天正文。
开发时长
本次功能的实际开发与校验约 3 小时,可以拆成四段:
| 阶段 | 产出 | 耗时 |
|---|---|---|
| 需求拆解与交互设计 | 确定“书签 + 分段 + 选词”的最小闭环 | 30 分钟 |
| 扩展基础能力 | Manifest V3、内容脚本、本地存储和悬浮面板 | 70 分钟 |
| 可检索会话管理 | 搜索、状态筛选、重命名、备注和结果统计 | 45 分钟 |
| 体验修复与静态校验 | 修复输入框光标回跳;检查 JS、Manifest 与 diff | 35 分钟 |
这里选择“无构建步骤”的实现方式:manifest.json + content.js + content.css。好处是下载后可直接以“加载已解压的扩展程序”的方式测试,也降低了维护门槛。
界面一览
打开 DeepSeek 页面后,右下角会出现会话管家入口。它以悬浮按钮的方式提供能力,不改动 DeepSeek 原有侧栏。

点击入口后,可以直接搜索会话,并用“全部 / 进行中 / 已分段”快速缩小范围。结果数量会随搜索词和筛选条件即时更新。

每个会话都能补充项目名、阶段和备注。建议统一使用“项目|阶段”的命名方式,例如“官网改版|需求梳理”;备注写下已经确认的结论或下一步,之后都能被搜索到。

在模型回复中选中任何一段内容,就能把它作为引用带入输入框继续追问。扩展不会自动发送,用户可以在“我的问题:”后继续补充语境。

核心实现思路
1. 用内容脚本把能力限制在 DeepSeek 页面
扩展只匹配 https://chat.deepseek.com/*,在 document_idle 时注入面板。相比全局脚本,这样的权限更小、行为也更可预期。
"content_scripts": [{
"matches": ["https://chat.deepseek.com/*"],
"js": ["content.js"],
"css": ["content.css"],
"run_at": "document_idle"
}]
2. 会话只存“索引”,不存正文
每一条记录包含 URL、标题、更新时间、是否已分段,以及可选的备注。会话正文仍在 DeepSeek 内,插件保存的是“从哪里回去”和“这一段做了什么”。
{
id: location.href,
url: location.href,
title: '官网改版|需求梳理',
note: '已确认信息架构',
archived: false,
updatedAt: Date.now()
}
这也是隐私和检索效率之间比较合适的边界:索引足够找回对话,但不会把模型回答复制到扩展存储中。
3. 用“下一段”代替无限续聊
当主题转向、关键结论已经确认,或对话已经很长时,点击“开启下一段”。当前链接会被标记为“已分段”,然后跳到新对话页面。
新会话第一句建议写清楚三件事:目标、已经确定的结论、这次只讨论的范围。例如:
继续官网改版项目。
已确认:信息架构为首页、产品、案例、关于我们。
本轮只讨论首页首屏文案,请不要重复改信息架构。
这比把很长的历史完整带入更稳定,也更容易回溯。
4. 选词追问只写入,不代发
选中文本后,扩展显示一个很小的浮层。点击后会把引用格式写入 textarea 或 contenteditable 输入区,并在下一帧把光标放在内容末尾。
之所以要延后一帧设置选区,是因为 React 这类受控输入框收到 input 事件后可能重新渲染,从而把光标跳回开头。这也是本次测试中发现并修复的一个体验问题。
推荐的日常使用方式
- 新项目开始时,先保存第一条会话,命名为“项目|需求澄清”。
- 每完成一个明显阶段,点击“开启下一段”,并给旧会话补一条结论备注。
- 需要找资料时,先用项目名称搜索,再按“已分段”筛选历史结论。
- 对回答中的局部概念有疑问时,用选词追问,不必复制整段上下文。
一个简单的命名约定就足够:项目名|阶段。例如“支付改版|异常流程”“支付改版|测试用例”。
安装与验证
- 打开
chrome://extensions或edge://extensions; - 开启开发者模式,选择“加载已解压的扩展程序”;
- 选择本项目目录;
- 打开 DeepSeek,依次验证上图中的入口、检索、整理与选词追问交互。
代码入口可参考:manifest.json、content.js 与 content.css。
小结
这个扩展没有试图管理模型,也没有替用户总结所有对话;它做的是更轻量、更可控的一层:在正确的时间切段、为每段留下可搜索的索引、在正确的句子上继续追问。
对于高频使用 Web 端 AI 的人来说,能否把“聊过”变成“找得到、接得上”,往往比增加一个复杂功能更重要。
本作品采用《CC 协议》,转载必须注明作者和本文链接
关于 LearnKu
推荐文章: