1. 项目概述一个为ChatGPT对话管理而生的浏览器插件如果你和我一样每天都要和ChatGPT进行大量对话那么你一定也遇到过这样的困扰一次精彩的头脑风暴、一段精心调试的代码片段或者一份重要的会议纪要草稿在关闭浏览器标签页后就淹没在历史记录的汪洋大海里再也找不回来了。ChatGPT官方虽然提供了对话历史功能但搜索体验不佳更别提跨设备同步和结构化归档了。这正是我当初决定动手开发“ChatGPT Bookmarks”这个Chrome扩展的初衷。简单来说ChatGPT Bookmarks是一个轻量级的浏览器插件它做了一件非常直接但极其有用的事情让你能像收藏网页书签一样一键保存任何有价值的ChatGPT对话。它的核心功能有两个一是将对话内容包括你的提问和AI的完整回复以书签的形式保存在本地方便你快速查找和回顾二是将这些对话内容自动同步到Notion数据库中实现云端备份和结构化管理。这个项目基于现代化的开发框架Plasmo构建代码开源旨在解决一个真实、高频的痛点让知识工作者能更高效地管理和复用与AI的交互成果。2. 核心功能与设计思路拆解2.1 为什么是“书签”而不是“导出”市面上已经有一些工具可以将ChatGPT对话导出为Markdown或PDF但“保存”和“管理”是两个不同维度的问题。导出解决了存档问题但没有解决后续的检索、组织和复用问题。我选择“书签”这个隐喻是因为它最符合用户的心智模型和操作习惯。即时性看到一个好的回答第一反应是“我得把它存下来”而不是“我要把它导出”。书签功能就像在网页上按CtrlD一样自然快捷。轻量化管理书签列表本身就是一个轻量级的目录。你可以为书签添加标题、标签甚至简单的备注形成一个可快速浏览和搜索的索引。无侵入性插件只在需要时出现不会干扰你正常的ChatGPT使用流程。它是对原生体验的增强而非替代。这个设计思路的核心是“最小化用户操作成本最大化信息留存价值”。用户不需要离开ChatGPT页面不需要进行复杂的配置一次点击就能完成保存这才是工具应该有的样子。2.2 与Notion集成的深层考量本地书签解决了“找得到”的问题但还有“丢不了”和“用得好”的问题。选择Notion作为同步后端是经过深思熟虑的数据安全与持久化浏览器本地存储有容量限制且存在被清除的风险。将数据同步到Notion相当于获得了一个免费、可靠、容量几乎无限的云端备份。这是数据安全的基本保障。结构化与再创造Notion的核心优势在于数据库和块编辑器。对话同步到Notion后不再是一段静态文本。你可以建立数据库视图按标签、日期、项目对对话进行分类筛选。进行深度编辑将AI生成的代码块、思路要点提取出来整合进你的项目文档或知识库。建立内部链接将相关对话关联起来形成知识网络。生态与自动化潜力Notion API非常强大。一旦对话进入Notion你就可以利用其丰富的生态如Zapier, Make.com或自建脚本实现更复杂的自动化流程例如自动将编程问答同步到代码仓库的README或将学习笔记整理成Anki卡片。因此“同步到Notion”不仅仅是一个备份功能更是将一次性的AI对话转化为可被持续管理和挖掘的数字资产的起点。在插件的Beta阶段我强烈建议用户开启此功能正是为了避免任何因本地数据意外丢失而造成的损失。3. 插件安装与基础使用详解3.1 安装步骤与注意事项安装过程非常简单但有几个细节需要注意通过Chrome应用商店安装最推荐的方式是直接访问项目README中提供的Chrome Web Store链接。这是最安全、最稳定的方式浏览器会自动处理更新。注意如果你无法访问Chrome应用商店也可以从项目的GitHub Releases页面下载打包好的.crx或.zip文件进行手动安装。手动安装时需要在Chrome的扩展程序管理页面chrome://extensions/开启“开发者模式”然后点击“加载已解压的扩展程序”选择解压后的文件夹。这种方式需要你自行关注更新。安装后的图标确认安装成功后Chrome浏览器工具栏通常地址栏右侧会出现一个深色的书签图标。如果没找到可以点击工具栏的拼图图标在弹出菜单中将其“固定”。这是你与插件交互的主要入口。权限说明首次安装时Chrome会提示该插件需要“读取和更改您在 chat.openai.com 上的数据”。这是必须的权限因为插件需要在你访问ChatGPT页面时注入脚本以检测页面上的对话内容并提供保存按钮。请放心该插件是开源的所有代码透明且仅在与ChatGPT页面交互时激活不会读取其他任何网站的数据。3.2 保存对话的核心操作流程使用插件保存对话直观到几乎不需要教学正常打开并进入任何一段ChatGPT对话页面。你会发现在ChatGPT原生界面的某个位置设计上通常会放在对话标题附近或页面角落出现了一个新的“保存为书签”按钮或图标。点击它。可能会弹出一个简单的表单让你为这个书签输入一个自定义标题默认会使用对话的第一句话和标签可选。填写后确认。完成对话的完整文本内容包括所有轮次已经被保存。实操心得即时反馈一个成功的保存操作应该有明确的视觉反馈比如按钮状态变化或一个短暂的提示条。我在开发中特别注意了这一点避免用户因不确定是否保存成功而重复操作。内容抓取可靠性ChatGPT的页面结构并非一成不变。插件需要稳定地定位到对话内容的DOM节点。这里我采用了一套组合策略优先通过特定的CSS类名和数据结构定位并设置了备用选择器和定时重试机制以应对OpenAI前端可能的细微改动。这是保证核心体验稳定的技术关键点。4. Notion同步功能配置全指南这是插件的进阶功能也是其价值倍增的关键。配置只需一次即可享受自动同步的便利。4.1 获取Notion API密钥与页面ID这一步是连接Notion的桥梁需要你在Notion端进行操作。创建内部集成访问 Notion Integrations 页面。点击“ New integration”按钮。填写名称如“My ChatGPT Archiver”选择关联的工作区然后点击“Submit”。无需修改其他权限。创建成功后页面会显示“Secrets”部分其中最重要的就是Internal Integration Token。这个字符串以secret_开头就是你的Notion API密钥。请立即复制并妥善保存因为它只显示一次。获取页面ID并关联集成在Notion中创建一个你希望存放ChatGPT对话的页面。它可以是一个空白页面也可以是一个数据库页面。我个人推荐创建一个数据库Database页面因为后续管理起来更灵活。打开这个目标页面点击右上角的...菜单选择“Connections”。在弹出的窗口中找到你刚刚创建的集成如“My ChatGPT Archiver”点击它旁边的“Add”按钮。这一步至关重要它授权了这个集成可以向你指定的这个页面写入内容。现在查看浏览器地址栏。你的页面URL格式类似https://www.notion.so/workspace/Your-Page-Title-0e1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6。其中0e1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6这一长串字符就是Notion Page ID。复制它。重要提示Page ID是URL中最后一个连字符-后面的部分不包括任何斜杠或问号。如果页面URL被Notion美化过显示为标题你可以点击...菜单 - “Copy link”获得包含原始ID的长链接。4.2 插件端配置详解拿到API Key和Page ID后回到浏览器进行插件配置。在Chrome工具栏中右键点击“ChatGPT Bookmarks”的图标。在弹出的菜单中选择“选项”Options。这会打开插件的独立配置页面。在配置页面中你会看到两个输入框Notion API Key粘贴你复制的以secret_开头的令牌。Notion Page ID粘贴你复制的页面ID字符串。点击“保存”或“更新设置”按钮。配置验证技巧 为了测试配置是否正确一个简单的方法是回到ChatGPT页面尝试保存一条新的对话。然后立即刷新你的Notion页面。如果配置正确几秒内你就会看到一条新的记录被创建出来。在Notion中这条记录通常会以你设定的书签标题作为页面名称对话的完整内容被放在页面正文中。4.3 同步逻辑与数据格式解析理解插件如何与Notion交互有助于你排查问题和进行高级定制。同步触发时机目前插件采用“保存即同步”的策略。当你在ChatGPT页面点击保存书签时插件会首先在本地存储中创建一条记录然后立即尝试调用Notion API将数据推送到云端。未来可能会考虑增加“批量同步”或“定时同步”的选项。数据推送格式插件通过Notion API的Create a page端点将数据写入你指定的父页面即你配置的Page ID对应的页面下。推送的数据是一个结构化的JSON对象通常包含parent: 指定父页面的ID。properties: 包含页面的属性例如“标题”Title属性会被设置为书签的名称。children: 这是一个数组包含了对话内容的块Block列表。插件会将整个对话包括用户和AI的发言转换为Notion支持的段落paragraph、代码块code、引用quote等块类型从而在Notion中保留基本的格式。错误处理与重试网络请求可能失败。插件应具备基本的错误处理能力例如在同步失败时在本地标记该条记录为“待同步”并在下次检测到网络连接或用户手动触发时重试。在配置页面或插件弹出窗口中应有地方查看同步状态日志。5. 开发、构建与贡献指南“ChatGPT Bookmarks”是一个开源项目使用Plasmo框架开发。如果你是一名开发者并且对这个想法感兴趣欢迎参与到项目的改进和功能扩展中来。5.1 本地开发环境搭建克隆项目git clone https://github.com/SeekingLight233/chatgpt-bookmarks.git cd chatgpt-bookmarks安装依赖项目使用pnpm作为包管理器也支持npm。pnpm install # 或 npm install启动开发服务器pnpm dev # 或 npm run dev运行后Plasmo会在项目根目录下生成build文件夹里面包含针对不同浏览器和Manifest版本的开发构建产物。5.2 加载开发版扩展Chrome扩展无法直接运行源代码需要加载打包后的文件。打开Chrome进入扩展程序管理页面 (chrome://extensions/)。开启右上角的“开发者模式”。点击“加载已解压的扩展程序”按钮。在弹出的文件选择器中导航到你的项目目录选择build文件夹下的对应子目录。对于使用Manifest V3的Chrome浏览器应选择build/chrome-mv3-dev目录。加载成功后你就能在工具栏看到开发版的插件图标了。Plasmo框架支持热重载你对popup.tsx、content.ts等文件的修改在保存后通常只需要在浏览器中刷新一下ChatGPT页面或插件弹出窗口就能立即生效。5.3 项目结构解析与功能扩展Plasmo框架采用约定大于配置的方式结构清晰popup.tsx这是点击插件图标后弹出的界面。你可以在这里修改书签列表的展示样式、添加快捷操作等。content.ts这是内容脚本是插件的核心。它会被注入到chat.openai.com域名下的所有页面。你在这里编写与ChatGPT页面DOM交互的所有逻辑检测对话、添加保存按钮、抓取对话内容等。options.tsx这是选项页面。我们用来配置Notion API信息的地方。你可以扩展这个页面增加更多用户设置。background.ts这是后台服务线程。它一直运行在浏览器后台不直接与页面交互但可以处理跨页面的数据同步、监听浏览器事件、管理网络请求如调用Notion API等。将耗时的网络请求放在这里可以避免阻塞内容脚本影响用户页面体验。assets/存放图标、图片等静态资源。如果你想增加一个新功能例如“将书签导出为Markdown文件”你可以在popup.tsx的界面里添加一个“导出”按钮。在popup.tsx的逻辑中调用Chrome Storage API读取本地保存的所有书签数据。编写一个函数将这些数据格式化为Markdown字符串。利用浏览者的downloadAPI或创建一个Blob对象触发文件下载。5.4 打包与发布当功能开发完成准备发布到商店时需要构建生产版本pnpm build # 或 npm run build构建完成后在build/chrome-mv3-prod目录下会生成一个.zip文件。这个压缩包就是可以提交到Chrome Web Store的最终产物。发布过程需要在Chrome开发者控制台完成涉及填写商品信息、上传截图、支付一次性开发者注册费用等步骤。6. 常见问题与故障排查实录在实际使用和开发过程中我遇到了不少典型问题。这里将它们整理出来希望能帮你快速排雷。6.1 安装与基础使用问题问题现象可能原因解决方案插件图标不显示在工具栏未固定扩展点击浏览器工具栏的拼图图标在扩展列表中找到“ChatGPT Bookmarks”点击其右侧的图钉图标将其固定。在ChatGPT页面看不到“保存”按钮1. 插件未成功加载或启用。2. 内容脚本注入失败。3. ChatGPT页面结构已更新插件选择器失效。1. 检查chrome://extensions/确保插件已启用。2. 刷新ChatGPT页面。3. 检查开发者控制台F12有无错误。如果怀疑是页面结构变化需要开发者更新content.ts中的选择器逻辑。点击保存无反应1. 内容脚本逻辑错误。2. 与页面其他脚本冲突。1. 打开开发者控制台F12查看Console和Network标签页有无报错。2. 尝试禁用其他可能与ChatGPT页面交互的扩展排除冲突。6.2 Notion同步配置问题问题现象可能原因解决方案同步失败配置页面报错1. API Key或Page ID填写错误。2. Notion集成未关联到目标页面。3. 网络问题。1. 仔细核对API Key以secret_开头和Page ID长字符串确保无多余空格。2. 回到Notion目标页面确认已通过“Connections”添加了你创建的集成。3. 检查浏览器网络或尝试在插件配置页面点击“测试连接”。同步成功但Notion中内容格式错乱1. 对话内容包含Notion不支持的复杂格式或特殊字符。2. 插件的内容转换逻辑有缺陷。1. 这是已知的Beta版局限。可以尝试将对话内容先以纯文本形式同步后续再增强格式处理。2. 在项目GitHub提交Issue附上导致格式错乱的对话样例。部分对话同步部分失败1. 单条对话内容过长超出API限制。2. 网络间歇性中断。1. Notion API对单次请求有大小限制。可以考虑在插件端将长对话分块发送。2. 插件应实现失败重试机制。检查后台脚本的日志看失败请求是否有重试。6.3 开发与调试问题问题现象可能原因解决方案pnpm dev后无法加载扩展1. 依赖安装不完整。2. 端口被占用。3. Plasmo构建出错。1. 删除node_modules和pnpm-lock.yaml/package-lock.json重新运行pnpm install。2. 检查是否有其他进程占用了Plasmo默认的开发服务器端口。3. 查看命令行终端输出的错误信息。修改content.ts后刷新页面不生效1. 浏览器缓存。2. 热重载未正常工作。1. 在开发者工具中切换到Network标签勾选“Disable cache”。然后硬刷新页面CtrlShiftR。2. 尝试重启开发服务器或直接重新加载已解压的扩展。调用Notion API时遇到CORS错误在content.ts中直接发起了跨域请求。这是关键设计点禁止在内容脚本中直接调用第三方API。应将API请求发送到插件的后台脚本background.ts由后台脚本负责网络通信。后台脚本不受CORS限制。我个人在开发中最深刻的体会是浏览器扩展开发尤其是内容脚本就像是在别人的房子里小心翼翼地摆放自己的家具。你必须非常了解ChatGPT页面的结构DOM但又要足够“礼貌”确保你的脚本不会和页面原有的功能或其他扩展冲突。选择稳定的选择器、添加适当的防抖节流、做好异常捕获是保证插件稳定性的基石。而与Notion的集成则让我更深刻地理解了“数据流动”的设计。将本地动作转化为持久的云端资产这个看似简单的管道需要考虑网络、错误、速率限制等无数细节但一旦打通为用户创造的价值是指数级增长的。这个项目还在早期还有很多想法可以加入比如基于本地内容的语义搜索、更丰富的标签系统、与更多笔记软件如Obsidian的集成等。开源的意义就在于此一个人的痛点可能也是许多人的需求而社区的力量能让解决方案走得更远。