一个强大的 Chrome 浏览器扩展，专为 AI 对话设计。让你可以在与 Claude、ChatGPT 等 AI 聊天时，轻松标记和保存重要内容，再也不用翻半天聊天记录了！
- 🖍️ 波浪线标记：选择文本后一键标记，优雅的琥珀色波浪线高亮
- 💾 自动保存：所有标记自动保存到浏览器本地存储
- 🎯 快速跳转：点击标记立即跳转到对应位置，自动闪烁定位
- 🔍 智能搜索：支持关键词搜索，快速找到需要的内容
- 📊 URL 分组：按页面自动分组，支持展开/收起
- 🤖 AI 整理：多选标记后使用 AI 智能整理合并内容
- 📤 Flomo 同步：一键同步到 Flomo 笔记
- 📁 批量管理：多选模式支持批量合并、删除
- 📤 导出功能：导出为 Markdown 格式
- ⚙️ 个性化设置：自定义 Flomo API 和 AI Prompt
- 🎨 Claude 风格：暖色调设计，简洁优雅
- ✅ Claude (claude.ai)
- ✅ ChatGPT (chat.openai.com)
- ✅ Gemini (gemini.google.com)
- ✅ 所有其他网站（通用支持）
-
克隆或下载此仓库
git clone https://github.com/yourusername/Chatlog.git cd Chatlog -
加载扩展到 Chrome
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启右上角的"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择本项目的文件夹
-
开始使用！
- 访问 Claude 或 ChatGPT
- 选择任何文本
- 点击出现的"📌 标记"按钮
- 点击扩展图标查看所有标记
- 在 AI 对话页面选择你想要标记的文本
- 会出现一个"📌 标记"按钮
- 点击按钮，文本会被优雅的琥珀色波浪线高亮
- 右上角会显示"✓ 已标记"的成功提示
- 点击浏览器工具栏的扩展图标（或使用侧边栏）
- 查看按 URL 分组的所有标记
- 点击分组标题可以展开/收起
- 每条标记显示：
- 标记的文本内容（支持展开查看完整内容）
- 标记时间（相对时间显示）
- 快捷操作按钮（复制、flomo、删除）
- 点击右上角的搜索图标
- 在搜索框中输入关键词
- 实时过滤匹配的标记
- 按 ESC 或点击关闭按钮退出搜索
使用顶部的筛选按钮：
- 全部(n)：显示所有网站的所有标记
- 当前页(n)：只显示当前网页的标记
- 自动智能默认：当前页有内容时默认显示当前页
- 点击任意标记时间位置的"选择"
- 进入多选模式，底部显示工具栏
- 勾选需要合并的标记（至少2条）
- 点击"合并已选"按钮
- 可选择使用 AI 智能整理内容
- 合并后保留最新的一条，其余删除
合并标记时可以启用 AI 整理功能：
- 自动合并重复内容
- 按逻辑重新组织
- 去除冗余表述
- 使用清晰的结构（分点、分段）
- 保持原始信息完整性
- 点击设置图标配置 Flomo API
- 将你的 Flomo Webhook URL 粘贴进去
- 保存设置
- 点击标记的"flomo"按钮即可同步
- 自动包含来源信息和链接
- 点击底部的"导出"按钮
- 会自动下载一个 Markdown 文件
- 文件包含所有标记，按网站分组
- 包含时间戳和来源链接
点击右上角的设置图标可以配置：
-
Flomo API Key
- 输入你的 Flomo Webhook URL
- 用于同步标记到 Flomo 笔记
-
AI 整理 Prompt
- 自定义 AI 整理内容的行为
- 默认使用优化过的中文 prompt
- 支持完全自定义
Chatlog/
├── manifest.json # Chrome 扩展配置文件 (Manifest V3)
├── content.js # 内容脚本（在网页中运行）
├── content.css # 内容样式（波浪线等）
├── popup.html # 侧边栏界面
├── popup.js # 侧边栏逻辑
├── icons/ # 扩展图标
└── README.md # 本文件
- Manifest V3：使用最新的 Chrome 扩展规范
- Side Panel API：使用侧边栏而非小弹窗
- Chrome Storage API：本地存储标记数据
- XPath 定位：精确定位文本在 DOM 中的位置
- 上下文匹配：通过文本上下文确保准确定位
- SiliconFlow API：AI 智能整理内容
- Flomo Webhook：同步到 Flomo 笔记
- Lucide Icons：现代化矢量图标系统
{
"highlights": {
"https://claude.ai/chat/xxx": [
{
"id": "1234567890",
"text": "标记的文本内容",
"timestamp": "2024-01-01T12:00:00.000Z",
"url": "https://claude.ai/chat/xxx",
"pageTitle": "Chat - Claude",
"xpath": "/html/body/div[1]/...",
"startOffset": 10,
"endOffset": 30,
"context": {
"before": "前面的文本...",
"after": "后面的文本...",
"parentText": "父节点文本..."
}
}
]
},
"settings": {
"flomoApi": "https://flomoapp.com/iwh/xxx",
"aiPrompt": "自定义的 AI prompt..."
}
}- 主色调：琥珀色 (#f59e0b, #d97706)
- 背景色：暖白色 (#fafaf9)
- 边框色：浅色分割线 (#f0ede8)
- 高亮色：琥珀色悬浮 (#fef3e2)
- 波浪线：优雅的细波浪线（1px）
- 🎯 少阴影，多用边框和分割线
- 🎨 暖色调，舒适的视觉体验
- 🚫 无渐变，纯色块设计
- ✨ 细节精致，圆角统一（10-12px）
编辑 content.css 中的 .chat-highlight-mark 样式：
.chat-highlight-mark {
text-decoration: underline wavy #f59e0b; /* 改成你喜欢的颜色 */
text-decoration-thickness: 1px;
}在 popup.html 中搜索并替换颜色值：
#f59e0b- 主要琥珀色#d97706- 深琥珀色（hover）#fef3e2- 浅琥珀色（背景）
欢迎提交 Issue 和 Pull Request！
MIT License
感谢所有 AI 对话平台提供的优秀服务，让我们的工作和学习更加高效！
提示：如果你在使用过程中遇到任何问题，欢迎提交 Issue。
Star ⭐：如果这个项目对你有帮助，请给个 Star 支持一下！