## 0. 先和大家打个招呼
我是一名在读大学生和独立产品创作者，不是科班工程师，也一直把自己当作技术小白。
之前在用 Claude 和 ChatGPT 做项目的时候，我发现一个反复出现的问题：长对话进行到二三十轮以后，AI 会悄悄偏离最初定好的方案结构，或者忘记早期明确写下的约束。等我发现的时候，已经走了很远。每次都要从头翻聊天记录，手动对照"我们一开始说好的是什么"。
这个痛点很具体，但我不知道怎么做。直到我遇到 TRAE。
我的做法是把产品想法告诉 TRAE：我希望扩展在浏览器侧被动捕获对话，不侵入 AI 的正常工作；我希望它检测四类信号——架构偏离、约束遗忘、一致性风险和并行机会；我希望数据全部存在本地，分析只调用用户自己选择的模型。TRAE 帮我完成了 Chrome Extension 后台调度、对话捕获、存储迁移、流式消息治理和全部自动化测试。
这不是一个"点一下按钮就生成"的过程。中间经历过好几轮真实错误：signal 还没递送就标记 delivered、clearAllData 后 content script 内存没清理、ChatGPT 的 DOM 结构和 Claude 完全不同导致捕获失败。每一次都是 TRAE 读取真实代码、定位问题、给出修复方案，我确认方向后一起完成。
## 1. Demo 简介
**Outsider 是什么**
一个 Manifest V3 Chrome Extension，安装在用户浏览器侧，在用户与 Claude、ChatGPT 等 AI 对话时充当第三方观察者。它观察的是人机交互轨迹——不是普通网页内容，也不是 Agent 内部 trace。
**面向谁**
经常和 AI 进行长对话协作的开发者、研究者和学习者。如果你曾经在 30 轮对话后发现"我们一开始说好的不是这个"、“AI你一直在同样的事情上绕了很久了”、“做了很久的任务发现在错的方向高歌猛进，最后浪费一周时间还发现需要推倒重来”
**核心功能**
1. 四类信号检测：架构偏离、长对话遗忘、AI 一致性倾向、并行待办提示
2. 右下角浮窗提醒：不抢焦点，不打断当前操作
3. 用户反馈闭环：每条提醒可以标记"有用"“误报”“知道了”
**当前支持**
- 平台：Claude、ChatGPT
- 产品形态：Chrome Extension（Manifest V3）
- 四种比赛 Demo 无需 API Key
## 2. Demo 创作思路
**灵感来源**
在做项目的过程中，我发现 AI 的"健忘"和"偏移"不是随机的——它有模式。比如，当你连续追问某个技术细节时，AI 会越来越倾向于维护自己已经给出的方向，即使这个方向已经失败了三次。又比如，当对话变长后，早期"不能加后端"这样的硬约束会被悄悄忽略。
**为什么选择用户侧第三方位置**
市面上已经有不少开发者侧的 observability 工具，比如 LangSmith、Langfuse。它们监控的是 Agent 内部的 trace、token 用量和调用链。但用户的体验是：我坐在对话的这一端，我看到的是 AI 说的每一句话，而不是它内部的调用栈。
Outsider 选择站在用户这一侧。它看到的和用户看到的一样——对话内容本身。它的价值不在于监控 AI 的内部状态，而在于帮用户发现"AI 正在悄悄偏离我们说好的方向"。
**当前、即将上线、长期愿景的边界**
- 当前已实现：单次对话中的偏离、遗忘、一致性风险与并行机会
- 即将上线：跨 Agent 工作流监督，在不同 Agent 交接与执行时检查委托是否被正确传递
- 长期愿景：形成由用户授权、由用户自己拥有的自我认知数据，类似体检报告，而不是说教式认知画像
## 3. Demo 体验方式
附件文件名：`Outsider-TRAE-Demo.zip`
Outsider-TRAE-Demo.zip (95.2 KB)
**方式一：双击 index.html 体验**
解压 ZIP 后，直接双击 `index.html` 用浏览器打开。可以点击四个场景按钮，体验 Outsider 的四类信号提醒。这是免安装交互预览，不涉及真实浏览器权限。
**方式二：加载 extension/ 体验真实 Chrome Extension**
解压 ZIP 后，进入 `extension/` 文件夹，按照 README 中的步骤加载已解压的扩展程序。真实扩展会自动捕获 Claude/ChatGPT 对话并进行分析。
## 4. TRAE 实践过程
以下是三个关键开发 Session，对应 Outsider 从规格到可运行扩展的核心阶段。
### 4.1 从产品规格到代码骨架
Session ID: `2539199929528936:e86904dbf11f7410ff8cacaeb00a928a_6a38f2452936d399a40f68c6.6a38f2452936d399a40f68c9.6a38f2452936d399a40f68c7:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/22 16:28:53)`
我把完整的产品规格文档发给 TRAE，要求它先不写功能代码，只做两件事：第一，复述对数据流和模块边界的理解；第二，按规格创建目录结构和空文件。
TRAE 准确理解了核心边界：扩展只负责产生幂等的 CaptureEvent，所有持久化由 background 单写入，content script 不直接写 chrome.storage.local。对话提炼与提醒递送相互分离，分析过程不会阻塞用户当前的对话。在此基础上，TRAE 创建了 manifest.json、types.js、store.js、capture.js、options.html、options.js 六个初始文件，并在 store.js 中实现了 chrome.storage.local 的基础读写和 schema 初始化。
这一步确立了整个项目的数据流方向和模块职责，后续所有功能都在这个骨架上生长。
【TRAE 开发截图 1】
### 4.2 DOM 捕获与 MV3 工程挑战
Session ID: `2539199929528936:710906db37acd1ca32af0c465cd4c370_6a38f2452936d399a40f68c6.6a38fcdf2936d399a40f694f.6a38fcdf2936d399a40f694d:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/22 17:14:07)`
capture.js 是 Outsider 最核心的 content script。这个 Session 里 TRAE 解决了两个关键问题。
第一个是 MV3 的工程限制：content_scripts 在 manifest 中静态声明，不支持 ES module 的 `import`/`export`。TRAE 最终用 IIFE 自包含方式实现 capture.js，把所有依赖手动内联，避免了构建工具的环境依赖。
第二个是 Claude 的 DOM 结构。Claude 的用户消息在 `[data-testid=“user-message”]`，助手回答在 `.font-claude-response-body`，两个选择器不对称。TRAE 验证了选择器的稳定性，并实现了 MutationObserver 轮询和流式状态判断。
后来 Outsider 需要支持 ChatGPT，DOM 结构完全不同。TRAE 新建了 `site-adapters.js`，集中维护 ChatGPT 的 `article[data-testid^=“conversation-turn-”]` turn 提取、角色判断、正文解析和 messageId 优先级，避免了把"复制、朗读、点赞"等界面按钮混入回答正文。
另一个实际问题是：Chrome 在扩展更新后不会自动注入 content script 到已打开的旧 tab。TRAE 实现了自愈机制——先发 PING 检测 overlay 是否存在，如果不存在，用 `chrome.scripting` API 按序注入 CSS 和 JS，注入后再次确认。这让用户不用刷新页面就能使用扩展。
【TRAE 开发截图 2】
### 4.3 数据架构冻结、错误修复与测试
Session ID: `2539199929528936:552a0852ae71eb9534ee8d35168d9470_6a38f2452936d399a40f68c6.6a4cb1aa1424c68c85e41f18.6a4cb1aa1424c68c85e41f16:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/7 15:58:34)`
项目推进到中期，数据结构需要冻结。这个 Session 里 TRAE 完成了三件事：定义 `SCHEMA_VERSION = 1`，引入 `SIGNAL_TYPE`、`CONFIDENCE`、`SIGNAL_OUTCOME` 三个枚举，创建 `createDetectionSignal()` 工厂函数，并实现了 schema 迁移框架，让后续版本升级时能自动迁移旧数据。
在此之后，开发进入错误修复和测试阶段，也全部由 TRAE 协助完成：
**Signal delivery 时序问题**：detector 产生 signal 时不应提前标记 delivered。TRAE 发现部分模块在创建 signal 时就设了 `delivered: true`，但此时消息还没发送。修复方式：创建时 `delivered: false`，只有 Overlay 确认渲染后才标记。
**clearAllData 生命周期问题**：删除全部数据后，content script 的内存状态没有清理。TRAE 新增了 RESET 消息，由 background 向所有受监听 tab 广播，capture.js 收到后清空所有内存状态。
**Streaming 覆盖问题**：ChatGPT 流式输出期间，旧消息可能被新内容覆盖。TRAE 增加了适配器级别的流式状态判断，只有适配器确认不再流式且全局稳定后才最终化。
最终 TRAE 编写了 71 个自动化测试，覆盖 ChatGPT DOM 适配、Claude 回归、signal delivery 时序、rendered 门控、clearAllData 生命周期、streaming 稳定性、递送失败去重和 overlay signalId 绑定。静态检查脚本验证 manifest 引用文件存在性、JS 语法、scripting permission 和加载顺序。
```
tests 71
pass 71
fail 0
```
【TRAE 开发截图 3】
## 5. 报名审核通过帖子链接
截图：
