TidyChat - AI Chat Collapser

一个 Chrome 扩展，用于折叠/展开 AI 聊天消息，方便浏览长对话。

支持平台 • 功能特性 • 安装方法 • 使用说明 • 开发指南

---

支持平台

平台	状态	URL
ChatGPT	✅ 完全支持	chatgpt.com, chat.openai.com
Grok	✅ 完全支持	grok.com, x.com/i/grok
Gemini	✅ 完全支持	gemini.google.com
豆包 (Doubao)	✅ 完全支持	doubao.com

功能特性

• 🎯 全局折叠按钮 - 一键折叠/展开所有聊天消息，可拖拽定位
• 📝 智能预览 - 折叠后显示消息预览，鼠标悬停可查看完整内容
• 🎨 视觉区分 - 用户消息（绿色）和 AI 消息（蓝色）采用不同主题色
• 🌙 深色模式 - 自动适配各平台深色主题
• ⚡ 操作栏集成 - 在各平台原生操作栏中注入收起按钮
• 🔌 可扩展架构 - 平台适配器设计，轻松支持新平台

安装方法

🎯 方式一：下载安装包（推荐小白用户）

1. 📥 点击下载 tidychat-v1.0.0.zip
2. 解压 ZIP 文件，得到 tidychat 文件夹
3. Chrome 地址栏输入 chrome://extensions/ 回车
4. 打开右上角「开发者模式」
5. 点击「加载已解压的扩展程序」
6. 选择解压出来的 tidychat 文件夹
7. 完成 🎉

📖 详细图文教程请看 INSTALL.md

方式二：从源码安装（开发者）

git clone https://github.com/Raingle01/tidychat.git
cd tidychat

然后在 chrome://extensions/ 页面加载 tidychat 文件夹即可。

方式三：Chrome 应用商店（即将上线）

🚧 正在申请上架 Chrome Web Store，敬请期待！

使用说明

1. 访问任一支持的 AI 聊天平台
2. 页面右上角会出现绿色的全局折叠按钮
3. 点击全局按钮可折叠/展开所有消息
4. 折叠后，点击消息预览条可展开单条消息
5. 鼠标悬停在折叠的消息上 1 秒，可预览完整内容

快捷操作

• 全局按钮可拖拽 - 拖动到任意位置，位置会自动保存
• 点击预览条展开 - 点击折叠的消息条可展开该消息
• 悬停预览 - 在折叠消息上悬停 1 秒可弹出完整预览

项目结构

tidychat/
├── manifest.json              # 扩展配置 (Manifest V3)
├── styles.css                 # 全局样式
├── popup.html/js/css          # 扩展弹窗 UI
├── src/
│   ├── platforms/             # 平台适配器
│   │   ├── base.js            # 适配器基类
│   │   ├── chatgpt.js         # ChatGPT 适配器
│   │   ├── grok.js            # Grok 适配器
│   │   ├── gemini.js          # Gemini 适配器
│   │   ├── doubao.js          # 豆包适配器
│   │   └── index.js           # 平台注册中心
│   ├── core/
│   │   ├── collapser.js       # 核心折叠逻辑
│   │   └── ui.js              # UI 管理器
│   └── main.js                # 主入口
└── icons/                     # 扩展图标

开发指南

添加新平台支持

1. 在 src/platforms/ 下创建新的适配器文件：

class NewPlatformAdapter extends window.TidyChat.BasePlatformAdapter {
  get id() { return 'new-platform'; }
  get name() { return 'New Platform'; }
  
  matchURL(url) {
    return url.includes('newplatform.com');
  }
  
  getMessageSelector() {
    return '.message-container';
  }
  
  // 更多方法请参考 base.js
}

// 注册适配器
window.TidyChat.adapters.push(new NewPlatformAdapter());

2. 在 manifest.json 中添加权限和匹配 URL

3. 在 styles.css 中添加平台特定样式（如需要）

调试

在浏览器控制台中：

// 查看当前适配器
TidyChat.PlatformManager.getAdapter()

// 查看支持的平台
TidyChat.PlatformManager.getSupportedPlatforms()

// 手动触发折叠/展开
TidyChat.getCollapser().toggleAll()

本地开发

修改代码后，在 chrome://extensions/ 页面点击扩展的刷新按钮即可生效。

UI 设计规范

本项目遵循统一的 UI 设计规范：

元素	用户消息	AI 消息
主色	#10b981 (绿色)	#3b82f6 (蓝色)
背景	rgba(16, 185, 129, 0.06)	rgba(59, 130, 246, 0.06)
左边框	4px solid #10b981	4px solid #3b82f6

贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建你的功能分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'feat: add some amazing feature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

Commit 规范

• feat: 新功能
• fix: 修复 Bug
• style: 样式调整
• refactor: 代码重构
• docs: 文档更新
• chore: 其他杂项

License

MIT © 2025

---

如果这个项目对你有帮助，请给一个 ⭐️ Star！