Codex 一小时实现一个DeepSeek 浏览器插件实战

AI摘要
本文是一篇【知识分享】,详细介绍了如何开发一个轻量级Chrome/Edge浏览器扩展,用于在DeepSeek网页端实现会话索引管理、分段保存和选词追问功能。扩展不接入API、不保存聊天正文,仅本地存储索引,开发时长约3小时,采用无构建步骤的Manifest V3方案,强调隐私保护和检索效率。内容不涉及任何违规风险。

从「聊天太长会乱」到可检索会话:一个 DeepSeek 浏览器插件实战

本文记录一个轻量 Chrome / Edge 浏览器扩展的实现过程:不接入 DeepSeek API,不保存聊天正文,只在本机建立会话索引,并提供选词追问能力。

背景:聊天记录还在,思路却断了

用 DeepSeek 做需求分析、代码排查或内容创作时,最容易遇到的不是“找不到答案”,而是以下两个问题:

  1. 一个项目聊得久了,历史上下文越来越重,模型容易把早期结论、临时讨论和新问题混在一起;
  2. 旧会话虽然没有消失,但数量多以后很难根据项目、阶段或关键词找回来;
  3. 看到一段回答时,想只围绕其中一个概念继续问,却要手动复制、加引号、再补上下文。

这次的目标不是替代 DeepSeek 的会话列表,而是在网页右下角补一个“小型会话索引”,把长对话拆开,把关键节点找回来。

成品能力

能力 解决的问题
保存当前会话 在关键结论或阶段切换处建立本地书签
开启下一段 归档当前对话并打开新对话,主动控制上下文长度
自定义名称和备注 用“项目|阶段”和结论备注整理会话
搜索与筛选 按标题、备注、链接搜索;按全部、进行中、已分段过滤
选词追问 选中回答中的文字,一键写入带引用的追问模板

数据只保存在浏览器扩展的 chrome.storage.local 中。扩展不会读取、上传或同步 DeepSeek 的聊天正文。

开发时长

本次功能的实际开发与校验约 3 小时,可以拆成四段:

阶段 产出 耗时
需求拆解与交互设计 确定“书签 + 分段 + 选词”的最小闭环 30 分钟
扩展基础能力 Manifest V3、内容脚本、本地存储和悬浮面板 70 分钟
可检索会话管理 搜索、状态筛选、重命名、备注和结果统计 45 分钟
体验修复与静态校验 修复输入框光标回跳;检查 JS、Manifest 与 diff 35 分钟

这里选择“无构建步骤”的实现方式:manifest.json + content.js + content.css。好处是下载后可直接以“加载已解压的扩展程序”的方式测试,也降低了维护门槛。

界面一览

打开 DeepSeek 页面后,右下角会出现会话管家入口。它以悬浮按钮的方式提供能力,不改动 DeepSeek 原有侧栏。

Codex 一小时实现一个DeepSeek 浏览器插件实战

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

Codex 一小时实现一个DeepSeek 浏览器插件实战

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

Codex 一小时实现一个DeepSeek 浏览器插件实战

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

Codex 一小时实现一个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. 选词追问只写入,不代发

选中文本后,扩展显示一个很小的浮层。点击后会把引用格式写入 textareacontenteditable 输入区,并在下一帧把光标放在内容末尾。

之所以要延后一帧设置选区,是因为 React 这类受控输入框收到 input 事件后可能重新渲染,从而把光标跳回开头。这也是本次测试中发现并修复的一个体验问题。

推荐的日常使用方式

  1. 新项目开始时,先保存第一条会话,命名为“项目|需求澄清”。
  2. 每完成一个明显阶段,点击“开启下一段”,并给旧会话补一条结论备注。
  3. 需要找资料时,先用项目名称搜索,再按“已分段”筛选历史结论。
  4. 对回答中的局部概念有疑问时,用选词追问,不必复制整段上下文。

一个简单的命名约定就足够:项目名|阶段。例如“支付改版|异常流程”“支付改版|测试用例”。

安装与验证

  1. 打开 chrome://extensionsedge://extensions
  2. 开启开发者模式,选择“加载已解压的扩展程序”;
  3. 选择本项目目录;
  4. 打开 DeepSeek,依次验证上图中的入口、检索、整理与选词追问交互。

代码入口可参考:manifest.jsoncontent.jscontent.css

小结

这个扩展没有试图管理模型,也没有替用户总结所有对话;它做的是更轻量、更可控的一层:在正确的时间切段、为每段留下可搜索的索引、在正确的句子上继续追问。

对于高频使用 Web 端 AI 的人来说,能否把“聊过”变成“找得到、接得上”,往往比增加一个复杂功能更重要。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!