Voyager Context Sync 实战借助 CoBridge 将 Web 对话记忆无缝同步到 IDE【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager在 Gemini、AI Studio、Claude 或 ChatGPT 的网页中反复打磨思路回到 VS Code、Trae、Cursor 却要向 IDE 重新复述需求——这是许多开发者日常最耗时的重复劳动。Voyager 的Context Sync上下文同步Experimental功能正是为此设计它把 Web 端的思考过程以结构化 Markdown 的形式传输到本地 IDE 的.cobridge/AI_CONTEXT.md中让 IDE 里的 AI 助手Trae、Cursor、Copilot 等通过各自的规则文件自动读取这份记忆。读完本文你将掌握完整的同步链路、端口与配置参数、对话采集与图片/表格处理的底层原理以及落地 IDE 后的目录规范。为什么需要记忆传输Web 是大脑IDE 是双手受配额与响应速度限制开发者通常把逻辑推演放在 Web 端Gemini / Claude / ChatGPT 等把代码实现放在 IDE 端。问题在于两个环境之间缺乏记忆通道网页里讨论清楚的方案切回 IDE 后 AI 助手对需求一无所知一切都要从头解释。Context Sync 的解法是维度打通——让 Web 与 IDE 共享同一份上下文记忆。Voyager 在页面端采集对话内容CoBridge安装在 IDE 中的本地桥接扩展接收并落盘最终由 IDE 的 AI 通过规则文件读取。整个过程无需复制粘贴也不需要把私人对话推送到任何远端仓库。核心链路与数据模型从源码看同步是如何发生的Context Sync 是一条页面 → 扩展后台 → 本地服务的闭环。以下关键环节都可以在仓库源码中找到对应实现页面采集内容脚本监听 Popup 发出的sync_to_ide消息调用ContextCaptureService.captureDialogue()采集当前页面对话src/pages/content/contextSync/index.ts消息转发SyncService单例src/features/contextSync/services/SyncService.ts通过chrome.runtime.sendMessage把数据交给后台后台 POST后台脚本接收gv.syncToIDE消息后以application/json向本地服务发起POST请求src/pages/background/index.ts。注意注释明确说明这一步是 bypasses page CSP——由扩展后台代发请求可规避页面内容安全策略对跨域请求的限制本地服务落盘CoBridge 服务器收到 JSON 后在工作目录生成.cobridge/AI_CONTEXT.md与图片文件。数据模型DialogNode每次同步的载荷是若干DialogNodesrc/features/contextSync/types.ts其字段决定了 IDE 侧能拿到哪些信息字段类型含义urlstring当前页面域名如gemini.google.comclassNamestring采集节点的 DOM 类名textstring对话文本经过 HTML 转义表格已转为 Markdownimagesstring[]图片的 Base64 Data URL 列表is_ai_likelyboolean该节点是否可能为 AI 回复is_user_likelyboolean该节点是否可能为用户提问rectobject节点在页面中的位置top / left / width站点适配器按域名匹配选择器不同 AI 站点的 DOM 结构差异很大Voyager 用适配器解决在哪抓的问题src/features/contextSync/adapters/index.ts站点用户消息选择器AI 回复选择器gemini.google.comdiv.user-query-container.response-content默认通用div, p辅以user/human标记辅以ai/assistant标记getMatchedAdapter(host)遍历注册表命中站点域名则使用专用选择器否则回落到默认适配器。这意味着除 Gemini 外Claude、ChatGPT 等页面也会尝试按通用规则采集Popup 端还会对当前 Tab 的 URL 做gemini.google.com/chatgpt.com/claude.ai支持性检查src/pages/popup/components/ContextSyncSettings.tsx。三个步骤完成一次同步第 1 步安装并启动 CoBridge在 VS Code 中安装CoBridge扩展它是连接 Web 界面与本地 IDE 的核心桥接打开 VS Code 扩展市场搜索安装 CoBridge打开任意一个工作目录点击右侧工具栏中的 CoBridge 图标启动本地服务器。第 2 步握手连接在 Voyager 弹窗中启用Context Sync开启后界面才显示端口与同步按钮对齐端口号Voyager 默认访问http://127.0.0.1:3030/sync请确保 CoBridge 服务器监听相同端口观察状态指示点变为绿色并显示IDE Online表示握手成功。第 3 步一键同步点击Sync to IDE按钮Voyager 会把当前网页对话包括复杂的数据表格与参考图片打包发送给 CoBridge。按钮仅在 IDE 在线时可用同步中会显示转圈动画与状态文案捕获中 / 同步成功 / 失败原因成功后状态提示约 3 秒自动消失。同步背后对话是如何被翻译成 IDE 记忆的采集顺序与过滤captureDialogue()按适配器选择器抓取所有用户提问与 AI 回复节点然后交错排序提问、回复、提问、回复……以还原对话时序src/pages/content/contextSync/capture.ts。每个节点在提取前会做两道过滤不可见节点offsetParent null直接跳过SCRIPT、STYLE、NAV、HEADER、FOOTER、SVG、PATH等标签不参与采集。文本内容会做/的 HTML 转义内部换行占位符再还原为br保证 Markdown 输出安全、结构完整。表格自动转 Markdown采集时若节点内包含tableconvertTableToMarkdown()会将其转为标准 Markdown 表格单元格内|转义为\|换行替换为占位符再还原为br并自动补齐表头与每行的列数。转换失败时回退为innerText纯文本——保证 IDE 侧的 AI 能像读手册一样流畅理解数据表。图片转 Base64多级抓取策略图片是 Context Sync 的重头戏源码实现了相当完整的降级链getBase64Safeblob:URL直接在页面上下文 fetch 并转 Base64通常已是处理后的高分辨率图Google 系图片优化googleusercontent.com/ggpht.comChrome 系浏览器把/rd-gg/改写为/rd-gg-dl/以获取原图Firefox 对该路径存在 CORS 问题保留原路径将sNN等尺寸参数改写为s0请求原始分辨率三级抓取优先内容脚本直连 fetch先带凭据、失败后不带凭据→ 失败则走后台gv.fetchImage→ 再失败走页面上下文gv.fetchImageViaPage全部失败才放弃该图。这一策略保证参考图片能尽可能以原始清晰度进入 IDE同时兼容不同浏览器的 CORS 限制。落地 IDE.cobridge/AI_CONTEXT.md 目录规范同步完成后IDE 工作目录会出现如下结构your-project/ ├── .cobridge/ │ ├── images/ │ │ ├── context_img_1_1.png │ │ └── context_img_1_2.png │ └── AI_CONTEXT.md ├── .github/ │ └── copilot-instructions.md ├── .gitignore ├── .traerules └── .cursorrulesAI_CONTEXT.md以纯 Markdown 编写Voyager 页面端的思维过程被完整保留图片保存在.cobridge/images/中由AI_CONTEXT.md按序引用。Trae、Cursor、Copilot 会通过各自的规则文件.traerules、.cursorrules、copilot-instructions.md自动读取这份记忆无需任何手动导入——这就是文档中所说的让 IDE 拥有 Web 的思考过程。设计原则零污染、全 Markdown、先回忆再同步Context Sync 的三个设计底线零污染CoBridge 自动处理.gitignore.cobridge/目录默认不入库私人对话永远不会被推到 Git 仓库行业兼容输出为完整 Markdown 格式对 IDE 内各类 AI 助手来说读它就像读一本说明书专业提示如果对话是较早之前的建议先用Timeline功能在网页端向上滚动、让 Web 端回忆起完整上下文后再同步采集到的内容会更完整。配置参数速查Context Sync 的配置全部存储在chrome.storage.sync键定义见 src/core/types/common.ts与 Popup 设置界面ContextSyncSettings.tsx一一对应配置键类型默认值说明contextSyncEnabledbooleanfalse是否启用 Context Sync关闭后停止连接检测并清空在线状态contextSyncPortnumber3030本地 CoBridge 服务端口合法范围 1–65535越界自动钳制连接检测的工程细节也值得注意启用后 Popup 每5 秒轮询一次GET http://127.0.0.1:{port}/sync单次请求 200ms 超时以刷新 IDE Online 状态后台的gv.checkSyncStatus也内置超时默认 200msSyncService 侧传 500ms避免无谓阻塞。若 IDE 显示离线请优先核对两端的端口号是否一致、CoBridge 服务器是否已启动。小结Voyager 的 Context Sync 把网页讨论 → IDE 实现这条最日常的开发链路彻底打通Web 端负责深度思考IDE 端负责执行落地两者通过 CoBridge 共享同一份 Markdown记忆。从站点适配、对话采集、表格与图片处理到后台转发与本地落盘整条链路在仓库中均有清晰实现可查capture.ts、SyncService.ts、background 消息处理也让本文的三步操作有了源码级的依据。逻辑在云端酝酿落地在本地生根——安装 CoBridge、对齐端口、点击同步即可让 IDE 与 Web 同频呼吸。【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Voyager Context Sync 实战：借助 CoBridge 将 Web 对话记忆无缝同步到 IDE
Voyager Context Sync 实战借助 CoBridge 将 Web 对话记忆无缝同步到 IDE【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager在 Gemini、AI Studio、Claude 或 ChatGPT 的网页中反复打磨思路回到 VS Code、Trae、Cursor 却要向 IDE 重新复述需求——这是许多开发者日常最耗时的重复劳动。Voyager 的Context Sync上下文同步Experimental功能正是为此设计它把 Web 端的思考过程以结构化 Markdown 的形式传输到本地 IDE 的.cobridge/AI_CONTEXT.md中让 IDE 里的 AI 助手Trae、Cursor、Copilot 等通过各自的规则文件自动读取这份记忆。读完本文你将掌握完整的同步链路、端口与配置参数、对话采集与图片/表格处理的底层原理以及落地 IDE 后的目录规范。为什么需要记忆传输Web 是大脑IDE 是双手受配额与响应速度限制开发者通常把逻辑推演放在 Web 端Gemini / Claude / ChatGPT 等把代码实现放在 IDE 端。问题在于两个环境之间缺乏记忆通道网页里讨论清楚的方案切回 IDE 后 AI 助手对需求一无所知一切都要从头解释。Context Sync 的解法是维度打通——让 Web 与 IDE 共享同一份上下文记忆。Voyager 在页面端采集对话内容CoBridge安装在 IDE 中的本地桥接扩展接收并落盘最终由 IDE 的 AI 通过规则文件读取。整个过程无需复制粘贴也不需要把私人对话推送到任何远端仓库。核心链路与数据模型从源码看同步是如何发生的Context Sync 是一条页面 → 扩展后台 → 本地服务的闭环。以下关键环节都可以在仓库源码中找到对应实现页面采集内容脚本监听 Popup 发出的sync_to_ide消息调用ContextCaptureService.captureDialogue()采集当前页面对话src/pages/content/contextSync/index.ts消息转发SyncService单例src/features/contextSync/services/SyncService.ts通过chrome.runtime.sendMessage把数据交给后台后台 POST后台脚本接收gv.syncToIDE消息后以application/json向本地服务发起POST请求src/pages/background/index.ts。注意注释明确说明这一步是 bypasses page CSP——由扩展后台代发请求可规避页面内容安全策略对跨域请求的限制本地服务落盘CoBridge 服务器收到 JSON 后在工作目录生成.cobridge/AI_CONTEXT.md与图片文件。数据模型DialogNode每次同步的载荷是若干DialogNodesrc/features/contextSync/types.ts其字段决定了 IDE 侧能拿到哪些信息字段类型含义urlstring当前页面域名如gemini.google.comclassNamestring采集节点的 DOM 类名textstring对话文本经过 HTML 转义表格已转为 Markdownimagesstring[]图片的 Base64 Data URL 列表is_ai_likelyboolean该节点是否可能为 AI 回复is_user_likelyboolean该节点是否可能为用户提问rectobject节点在页面中的位置top / left / width站点适配器按域名匹配选择器不同 AI 站点的 DOM 结构差异很大Voyager 用适配器解决在哪抓的问题src/features/contextSync/adapters/index.ts站点用户消息选择器AI 回复选择器gemini.google.comdiv.user-query-container.response-content默认通用div, p辅以user/human标记辅以ai/assistant标记getMatchedAdapter(host)遍历注册表命中站点域名则使用专用选择器否则回落到默认适配器。这意味着除 Gemini 外Claude、ChatGPT 等页面也会尝试按通用规则采集Popup 端还会对当前 Tab 的 URL 做gemini.google.com/chatgpt.com/claude.ai支持性检查src/pages/popup/components/ContextSyncSettings.tsx。三个步骤完成一次同步第 1 步安装并启动 CoBridge在 VS Code 中安装CoBridge扩展它是连接 Web 界面与本地 IDE 的核心桥接打开 VS Code 扩展市场搜索安装 CoBridge打开任意一个工作目录点击右侧工具栏中的 CoBridge 图标启动本地服务器。第 2 步握手连接在 Voyager 弹窗中启用Context Sync开启后界面才显示端口与同步按钮对齐端口号Voyager 默认访问http://127.0.0.1:3030/sync请确保 CoBridge 服务器监听相同端口观察状态指示点变为绿色并显示IDE Online表示握手成功。第 3 步一键同步点击Sync to IDE按钮Voyager 会把当前网页对话包括复杂的数据表格与参考图片打包发送给 CoBridge。按钮仅在 IDE 在线时可用同步中会显示转圈动画与状态文案捕获中 / 同步成功 / 失败原因成功后状态提示约 3 秒自动消失。同步背后对话是如何被翻译成 IDE 记忆的采集顺序与过滤captureDialogue()按适配器选择器抓取所有用户提问与 AI 回复节点然后交错排序提问、回复、提问、回复……以还原对话时序src/pages/content/contextSync/capture.ts。每个节点在提取前会做两道过滤不可见节点offsetParent null直接跳过SCRIPT、STYLE、NAV、HEADER、FOOTER、SVG、PATH等标签不参与采集。文本内容会做/的 HTML 转义内部换行占位符再还原为br保证 Markdown 输出安全、结构完整。表格自动转 Markdown采集时若节点内包含tableconvertTableToMarkdown()会将其转为标准 Markdown 表格单元格内|转义为\|换行替换为占位符再还原为br并自动补齐表头与每行的列数。转换失败时回退为innerText纯文本——保证 IDE 侧的 AI 能像读手册一样流畅理解数据表。图片转 Base64多级抓取策略图片是 Context Sync 的重头戏源码实现了相当完整的降级链getBase64Safeblob:URL直接在页面上下文 fetch 并转 Base64通常已是处理后的高分辨率图Google 系图片优化googleusercontent.com/ggpht.comChrome 系浏览器把/rd-gg/改写为/rd-gg-dl/以获取原图Firefox 对该路径存在 CORS 问题保留原路径将sNN等尺寸参数改写为s0请求原始分辨率三级抓取优先内容脚本直连 fetch先带凭据、失败后不带凭据→ 失败则走后台gv.fetchImage→ 再失败走页面上下文gv.fetchImageViaPage全部失败才放弃该图。这一策略保证参考图片能尽可能以原始清晰度进入 IDE同时兼容不同浏览器的 CORS 限制。落地 IDE.cobridge/AI_CONTEXT.md 目录规范同步完成后IDE 工作目录会出现如下结构your-project/ ├── .cobridge/ │ ├── images/ │ │ ├── context_img_1_1.png │ │ └── context_img_1_2.png │ └── AI_CONTEXT.md ├── .github/ │ └── copilot-instructions.md ├── .gitignore ├── .traerules └── .cursorrulesAI_CONTEXT.md以纯 Markdown 编写Voyager 页面端的思维过程被完整保留图片保存在.cobridge/images/中由AI_CONTEXT.md按序引用。Trae、Cursor、Copilot 会通过各自的规则文件.traerules、.cursorrules、copilot-instructions.md自动读取这份记忆无需任何手动导入——这就是文档中所说的让 IDE 拥有 Web 的思考过程。设计原则零污染、全 Markdown、先回忆再同步Context Sync 的三个设计底线零污染CoBridge 自动处理.gitignore.cobridge/目录默认不入库私人对话永远不会被推到 Git 仓库行业兼容输出为完整 Markdown 格式对 IDE 内各类 AI 助手来说读它就像读一本说明书专业提示如果对话是较早之前的建议先用Timeline功能在网页端向上滚动、让 Web 端回忆起完整上下文后再同步采集到的内容会更完整。配置参数速查Context Sync 的配置全部存储在chrome.storage.sync键定义见 src/core/types/common.ts与 Popup 设置界面ContextSyncSettings.tsx一一对应配置键类型默认值说明contextSyncEnabledbooleanfalse是否启用 Context Sync关闭后停止连接检测并清空在线状态contextSyncPortnumber3030本地 CoBridge 服务端口合法范围 1–65535越界自动钳制连接检测的工程细节也值得注意启用后 Popup 每5 秒轮询一次GET http://127.0.0.1:{port}/sync单次请求 200ms 超时以刷新 IDE Online 状态后台的gv.checkSyncStatus也内置超时默认 200msSyncService 侧传 500ms避免无谓阻塞。若 IDE 显示离线请优先核对两端的端口号是否一致、CoBridge 服务器是否已启动。小结Voyager 的 Context Sync 把网页讨论 → IDE 实现这条最日常的开发链路彻底打通Web 端负责深度思考IDE 端负责执行落地两者通过 CoBridge 共享同一份 Markdown记忆。从站点适配、对话采集、表格与图片处理到后台转发与本地落盘整条链路在仓库中均有清晰实现可查capture.ts、SyncService.ts、background 消息处理也让本文的三步操作有了源码级的依据。逻辑在云端酝酿落地在本地生根——安装 CoBridge、对齐端口、点击同步即可让 IDE 与 Web 同频呼吸。【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考