大家好，我是一名全栈工程师，也是个不折不扣的 AI 工具重度用户。
每天在 ChatGPT、Gemini、DeepSeek、Kimi 等多个大模型平台之间来回切换，早已成为我的工作日常。但用得越多，一个痛点就越明显：
“上次问的那个问题，到底在哪一轮？”
尤其当一次对话超过几十轮，甚至上百轮时，想回看某个关键提问或答案，只能靠肉眼滚动 + Ctrl+F 搜索关键词——效率低、体验差，还容易漏掉上下文。
于是，我决定自己动手解决这个问题。经过几周打磨，我开发并上线了一款 Chrome 浏览器插件 —— AiChatAssistant。它能自动识别你在各大 AI 平台上的“用户提问”，并在页面右侧生成一个可点击的悬浮目录，点一下就能跳转到对应位置。
今天，我想以一名开发者的真实视角，和大家聊聊这个小工具背后的设计思考与技术实现。
🎯 为什么做这个插件？
市面上已有不少 AI 增强类插件，比如自动注入 Prompt、一键总结网页等。但专门针对“对话结构化管理”的工具几乎空白。
而作为开发者，我们经常需要：
- 调试不同版本的 Prompt；
- 对比多个模型对同一问题的回答；
- 回溯某次调试中的关键输入。
这些场景都依赖快速定位历史提问。可惜，目前主流 AI 平台均未提供类似“对话大纲”或“锚点导航”的功能。
所以，我做了 AiChatAssistant —— 不是为了炫技，而是解决自己每天都在遇到的真实问题。
⚙️ 技术实现：轻量、本地、跨平台
虽然功能看起来简单，但要做得“通用、稳定、无感”，其实有不少细节要考虑：
1. 跨平台 DOM 识别
不同 AI 平台的前端结构差异很大。例如：
- ChatGPT 使用
div[data-message-author-role="user"] - Gemini 用的是
c-wiz内嵌结构 - DeepSeek 和 Kimi 则有各自的 class 命名规则
我通过分析各平台 DOM 特征，抽象出一套动态匹配策略，在运行时自动判断当前页面类型，并应用对应的“用户消息选择器”。未来新增平台只需扩展配置，无需重写核心逻辑。
2. 纯本地处理，零网络请求
所有对话解析、锚点生成、目录渲染，全部在用户本地浏览器完成。插件不调用任何远程 API，也不包含任何埋点、统计或分析代码（如 GA、Sentry 等）。你可以打开 DevTools 的 Network 面板验证——安装后没有任何外联请求。
3. 极简资源占用
整个插件打包后仅 184KB，无第三方依赖。UI 采用原生 CSS + 微型 JS 实现，确保即使在低性能设备上也不会卡顿。同时，插件仅在访问支持的 AI 网站（如 chat.openai.com、gemini.google.com 等）时才会激活，其他网站完全静默。
4. 原生融合设计
我不想让用户觉得“这是个外来插件”。因此，侧边栏的样式会根据当前平台自动适配色调与字体，力求视觉无缝融入。比如在 ChatGPT 中是深灰风格，在 Gemini 中则更接近 Material Design。
🔒 隐私是我们最在意的事
作为开发者，我深知用户对隐私的敏感。因此，AiChatAssistant 从设计之初就坚持以下原则：
- ❌ 绝不上传任何对话内容（包括提问、回答、URL、时间戳等）；
- ❌ 不收集用户行为数据；
- ✅ 所有逻辑运行在 content script 中，数据生命周期仅限当前页面；
- ✅ 权限申请最小化（仅需
activeTab和读取网页内容）； - ✅ 插件官网 ai-chat-assistant-willis.vercel.app/ 提供完整的隐私政策说明。
你可以完全放心使用。
🌐 目前支持哪些平台？
- ✅ ChatGPT（OpenAI 官网）
- ✅ Gemini（Google AI）
- ✅ DeepSeek（深度求索）
- ✅ Kimi（月之暗面）
- ✅ 通义千问（Qwen）
- ✅ 元宝（腾讯元宝）
- ✅ 豆包
后续计划支持更多国产大模型平台（如文心一言、混元等），也欢迎你在插件评价区或Github Issues 提出建议。
📦 如何安装？
只需一步，即可开启“对话目录”体验：
安装后，打开任意支持的 AI 平台，开始聊天，右侧就会自动出现目录栏。无需配置，开箱即用。
最后的话
AI 工具正在重塑我们的工作流，但工具本身也该被优化。希望 AiChatAssistant 能成为你与 AI 对话时那个“看不见却离不开”的小助手。
—— 一位不想再手动翻对话的全栈工程师
🔗 官网：ai-chat-assistant-willis.vercel.app/
📧 反馈邮箱：793207918@qq.com
