【More Than Coding】降低启动困难，用 SOLO 从零打造一款 AI 对话存档插件，让每次 AI 协作都有迹可循，轻松读档~

SOLO挑战赛专区
,
1

【Code with SOLO-More Than Coding】降低启动困难，用 SOLO 从零打造一款 AI 对话存档插件，让每次 AI 协作都有迹可循，轻松读档~

:pushpin: 摘要

你是否也经历过这样的场景——上周和 AI 讨论了一个复杂的技术方案，周末结束后的工作日打开对话却一下子想不起来都聊了什么？然后就需要花费很多时间和精力去“读档”上次的工作内容，延后了开启工作的时间，这种“读档”需要一定程度增加了工作的启动难度，降低了效率。我用 TRAE SOLO 从零开发了一款 Chrome 扩展 ChatArchive，它能自动识别 几个大核心AI平台的对话内容，调用你选择的 AI 模型生成结构化摘要，一键保存为"工作存档点"。支持 TODO 管理、标签筛选、分类归档，让你下次打开对话时 10 快速重温上下文。

:bullseye: 背景

我是一名经常使用 AI 辅助工作的学生，日常会在 DeepSeek、ChatGPT、Kimi、千问（qwen）等多个平台之间切换。各个平台我主要偏好的工作内容也不那么相同，然而，随着对话越来越多，我发现也许大家都会面对的一个普遍的痛点：

AI 对话越多，越难找回之前聊过什么。

穿梭使用的AI模型太多，忘记自己曾经的哪个工作内容在哪个对话里

展开来说就是：

  • 同一个平台上有几十个对话，标题大多是ai自动总结的，同样内容标题可能相似，信息量不足

  • 跨平台使用时，某个方案在哪个 AI 上讨论的记不清晰

  • 想回顾上周的技术方案，要翻半天聊天记录，搜索记不清的关键词

  • 想起曾经一个好用的 Prompt，可能没来得及及时保存于是忘记是在哪个对话里

因此，我觉得需要一个工具，能在我每次和 AI 对话后，快速"打个存档点"，下次打开时一眼看到核心内容。开启工作如开启游戏一样对存档点一目了然。

:wrench: 实践过程

第一步：需求拆解

我没有一上来就写代码，而是先用 SOLO 帮我梳理了一个完整的设计方案。正所谓万丈高楼平地起，起楼先要做地基，填砖泥先打框架，我先把需求告诉 SOLO，和它一起讨论方案的可行性：

image
image1477×976 77.1 KB

SOLO 帮我输出了：

  • 完整的功能架构图

  • 数据模型设计

  • UI 交互方案

  • 技术选型建议

这一步让我对整个项目有了清晰的全局视角，有助于快速对插件功能进行定位，就像先有了毛胚房再往上装修成喜欢的样子。

第二步：核心代码开发

项目采用 Chrome Extension Manifest V3 架构，核心分为三个模块：

① 平台适配器（Platform Adapters）

需要让插件识别数个不同的 AI 平台，每个平台的 DOM 结构完全不同。我用 SOLO 逐个平台编写适配器，遇到 DOM 选择器不生效的问题时，SOLO 帮我设计了"三级回退"策略：

Plain Text

精确选择器 → 通用选择器 → 兜底提取

比如 DeepSeek 使用动态 hash class（如 .dad65929），SOLO 建议用多级降级方案来应对。

② AI API 调用模块

想要实现总结也需要有ai来完成，最初我设想让插件直接在对话中注入总结 Prompt，让当前 AI 自己总结。但测试发现这个方案不稳定——不同平台的输入框交互方式不同，经常失败，一方面这样即占用ai对话内容，容易打断工作的连续性，同时总结的对话框也会被收录进总结，容易“套娃”导致总结无休无止。

于是我用 SOLO 重构了架构：改为通过 Background Service Worker 直接调用外部 AI API。SOLO 帮我实现了 6 种模型的适配（DeepSeek、Kimi、ChatGPT、Claude、千问、豆包），每种模型的认证方式和请求格式都不同，SOLO 都处理好了。

③ 浮动面板 UI

插件中的浮动面板是使用关键，使用 Shadow DOM 创建浮动面板，完全隔离宿主页面的样式。这里踩了一个坑——最初用 mode: 'closed' 创建 Shadow DOM，导致所有内部元素都访问不到。SOLO 帮我排查了这个问题，改为 mode: 'open' 后一切正常。对于我这种不太清楚ai各种参数的人，通过精确描述问题也可以很快让ai实现自我检测与更新，solo在这里做的很好。

第三步：功能迭代

基础功能跑通后，我不断提出新需求，SOLO 一步步帮我实现，并通过测试→出现问题→更正来实现功能丰富化：

image
image1426×920 93.3 KB

重要改版经历：

版本 新增功能 SOLO 的贡献
v2.0 外部 API 总结架构重构 完全重写 background.js 和 content.js
v3.2 新增更多ai对话平台，检查悬浮窗是否可以有效识别 添加平台适配器和 URL 匹配
v3.4 TODO 管理、标签筛选、单条删除 新增可能并行常用的功能模块
v3.4 对话标题提取优化与跳转 设计评分匹配机制保证与网页一致且可以点击标题跳转至该对话
v3.4 优化插件按键交互 排查API设置点击跳转

感觉如果需要后期还可以加入计时器/日历提醒功能，作为一个多维度的工作存档小助手~

第四步：调试与修复

开发过程中难免遇到了不少大小问题，每次我截图反馈给 SOLO，它都能快速定位根因：

  • Shadow DOM 访问失败 → mode: 'closed' 改为 mode: 'open'

  • DeepSeek 消息提取总是为 0 → 动态 hash class 需要多级回退

  • 对话标题提取不准确 → 从页面标题改为从左侧对话列表匹配

  • "未配置API"点击无反应 →反直觉的交互：没有引导配置→ openOptionsPage 不适用于 popup，改用 tabs.create→跳转至api配置界面

我还特别欣赏SOLO的提问交互功能，在我想要打算再添加自建模型api接入时其实有的拿不准应该怎么做只是说出了想法，SOLO会提供方案供我选择或者文字补充，我觉得特别好！

73e6b56a613e9e58bafe6eeb2789082b
73e6b56a613e9e58bafe6eeb2789082b1422×857 64.5 KB

:package: 项目展示

最终效果

支持 8 大 AI 平台：

ChatGPT · Claude · Gemini · DeepSeek · Kimi · 千问 · 豆包 · 玻尔

核心功能一览：

  • :robot: 6 种 AI 模型可识别api密匙实现总结：自选:DeepSeek/Kimi/ChatGPT/Claude/千问/豆包

  • :package: 工作存档点：自动保存标题、摘要、要点、分类、标签、跳转链接，多余存档完成可删保证界面清洁，多任务可一键清空

  • :label: #tag 标签筛选：自动提取标签，标签云一键筛选/识别不准可自行更正

  • :white_check_mark: TODO 待办管理：优先级排序，关联存档，跨天工作延续

  • :bullseye: 分类手动调整：点击分类标签循环切换

  • :magnifying_glass_tilted_left: 全局搜索：全文搜索所有存档：可以通过关键词/标签快速筛选多平台存档点

  • :outbox_tray: 导出功能：Markdown / JSON 格式

技术架构

Plain Text

chat-archive-demo/
├── manifest.json      # Manifest V3 配置
├── content.js         # 平台适配 + 浮动面板 + 侧边栏标签
├── background.js      # AI API 调用 + 存储 + TODO 管理
├── popup/
│   ├── popup.html     # 三 Tab 布局（存档/待办/设置）
│   └── popup.js       # 交互逻辑
└── icons/

:camera_with_flash: 插件效果展示

1，浮动面板与保存流程

  • 展示在当前ai对话页面的蓝色浮动面板，可以随意拖拽换位

  • 面板显示：平台名称、消息计数、API 状态、存档列表

保存：

  • 点击"保存存档点"后，显示 AI 生成的摘要

  • 包含：摘要、要点、分类、标签

    image
    image2098×1063 269 KB

2，Popup 存档管理

  • 点击扩展网页插件处的图标弹出的 Popup 界面

展示存档列表、标签云、分类筛选

image
image847×1143 96.3 KB

3，TODO 待办功能

展示待办列表、不同优先级颜色区分、标签筛选

image
image820×1018 61.1 KB

4，API设置引导界面

image
image1002×669 53.1 KB

5，项目仓库

GitHub： yz-jun/ChatArchive: AI对话工作存档插件 - Multi-model summarization for AI conversations
代码已公开供大家使用

image
image2521×1326 305 KB

使用方法：

  1. 去GitHub下载本项目代码并解压

  2. 打开 Chrome 扩展管理页面：chrome://extensions/

  3. 开启右上角/左下角的「开发者模式」

  4. 点击「加载已解压的扩展程序」

  5. 选择项目内的chat-archive-demo 文件夹

:light_bulb: 效果与总结

提效指标点

指标 使用前 使用后
恢复对话上下文 10-20 分钟翻看理解记录 10 秒看摘要和关键词
跨平台查找方案 凭记忆逐个平台翻 全局搜索 + 标签筛选+一键跳转
工作连续性 靠脑子记/额外的记录软件 网页TODO 管理 + 存档关联
日报/周报素材 重新翻聊天记录 导出 Markdown 直接用

插件界面一览

image
image853×1182 70.8 KB

SOLO 在开发流程中的角色

整个项目从需求分析到最终版本，完全由 SOLO 辅助完成：

  1. 需求分析阶段：SOLO 帮我梳理了完整的设计文档，包含架构图、数据模型、UI 方案

  2. 编码阶段：SOLO 逐模块生成代码，从平台适配器到 API 调用到 UI 渲染（本次在图标设计上没有花太多功夫，说明SOLO审美设计在线，简约好看）

  3. 调试阶段：每次我截图反馈 Bug，SOLO 都能快速定位根因并修复，并且直接修改所有相关项目文件，直接打包生成可直接使用的zip，降低了修正代码的难度

  4. 迭代阶段：从 v1.0 到 v3.4，共经历 10+ 次功能迭代，SOLO 始终保持上下文连贯，能力稳定，幻觉极少

  5. 文档阶段：最终生成最终版本的使用指南和设计文档

可复用的经验

  1. 先设计再编码：用 SOLO 先输出设计文档，觉得想法可行再开工，避免算力浪费和垃圾代码的堆积

  2. 小步快跑、截图反馈：每次完成1~2个功能测试，积极发现问题及时修复，遇到 Bug 截图发给 SOLO，比文字描述更高效

  3. 递进式设计：想法不用一开始就很完善，可以是一个小idea，在产品测试实践与迭代中不断添加灵感使其丰富，SOLO也可以对灵感进行延申与完善，就像与好友讨论一样，大大降低了想法变现难度，实现先完成再完美。

  4. 保持上下文：尽量在同一个会话中持续迭代，SOLO 能记住所有历史决策更有助于修复

结语

从"AI 对话用完就忘"到"每次协作都有迹可循"，SOLO 帮我用一个周末打造了一个真正解决自己痛点的工具。如果对你有帮助你也来试试吧~