Voyager Timeline：将 Gemini 长对话变成可即时跳转的可视化时间轴

AI 应用前端【免费下载链接】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点击查看免费下载Voyager Timeline 是 Voyager面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件为 Google Gemini 提供的可视化对话导航系统。它把聊天中的每条消息映射为屏幕右侧的一个交互节点将冗长的 AI 对话转换为一张可瞬时跳转、可标注、可折叠的地图。读完本文你将掌握 Timeline 的节点点击跳转、悬停预览、长按 Star 书签、右键分级折叠、Vim 风格键盘导航与自定义快捷键等完整能力并了解其底层实现原理。为什么需要 Timeline长对话的导航问题长对话是混乱的。你向上滚动、向下滚动然后丢失了自己的位置。Voyager 把你的对话变成一条时间轴每条消息对应一个节点整段对话的结构一眼可见跳转到任意一轮只需一次点击。从源码结构看Timeline 的入口在 src/pages/content/timeline/index.ts其中startTimeline()负责初始化并通过isGeminiConversationRoute()正则/^\/(?:u\/\d\/)?(app|gem)(\/|$)/识别 Gemini 的对话路由——包括app、gem/以及带账号作用域/u/num/app、/u/num/gem/形式。当 Gemini 是 SPA单页应用时路径变化会触发 500ms 延迟后的重新初始化等待 DOM 稳定而仅 hash 变化则不会重建时间轴页面卸载或扩展被挂起时cleanup()会断开所有 MutationObserver、清除定时器并释放监听器避免内存泄漏。看见对话的形状打开任意 Gemini 对话看向屏幕右侧。时间轴上每一个节点代表一条消息节点排布的可视化密度直接反映对话的节奏——密集的区域是来回交锋的讨论稀疏的区域是长文本的展开。这里没有强行缩放、没有分页节点在整条轨上的相对位置对应消息在滚动视口中的真实位置。TimelineManagermanager.ts组合单个会话的 DOM 观察、状态、导航与时间轴表面通过 MutationObserver 监听对话容器的子节点变化用recalculateAndRenderMarkers()防抖200ms重建标记集合并借助 IntersectionObserver阈值 0.1、rootMargin-40% 0px -59% 0px在消息进出可视区时同步滚动位置。核心交互从跳转到预览Timeline 把导航压缩成四种直觉操作Teleport传送点击任意节点立即跳到对应消息。Peek窥视悬停节点即可看到消息内容无需移动滚动条。Star书签长按节点将其标记为星标。Levels分级实验性右键节点设置 1–3 级或折叠其子节点。Resize缩放拖动时间轴内侧边缘调整宽度。在实现上点击与悬停由 TimelineNavigation.ts 的navigateToMarker()驱动先解析目标标记必要时刷新标记集合再根据 flow/jump 模式计算滚动时长并执行平滑滚动。悬停内容的展示由 TimelineTooltip.ts 负责含星标前缀与时间戳而预览面板由 TimelinePreviewPanel.ts 承载支持搜索、固定与紧凑悬停桥接。宽度缩放则在 TimelineView.ts 中通过barWidthMin/barWidthMax约束用户设置值会被校验后再应用见manager.ts中的geminiTimelineBarWidth处理。Voyager Timeline 在 Gemini 右侧呈现的对话导航界面Star为突破时刻做书签长对话会埋没金子。把重要的时刻标上星标操作方式在时间轴节点上长按约 0.5 秒节点亮起即表示已星标再次长按取消星标。高亮常驻已星标的节点保持高亮扫一眼即可定位。集中查看点击时间轴头部header的星标图标打开Starred History面板查看全部星标消息。源码层面长按由 TimelineMarkerInteractions.ts 实现longPressDuration 550毫秒并带有longPressMoveTolerance 6像素的移动容差——按下后手指移动超过 6px 就取消长按判定避免误触触发星标后还会抑制 350ms 内的点击事件防止连击。星标状态存储在 TimelineState.ts按会话维度持久化到localStorage键形如geminiTimelineStars:conversationId同时通过StarredMessagesServiceStarredMessagesService.ts把星标消息含turnId、内容摘要、会话标题、会话 URL、starredAt时间戳写入共享存储这也是跨设备同步的基础。值得注意的是TimelineState会做旧格式/路由格式会话 ID 的别名解析与自动迁移并订阅starred:added/starred:removed事件总线与chrome.storage.onChanged实现跨组件实时联动。一个实用细节星标消息支持深链导航——当 URL 带有#gv-turn-id哈希时handleStarredMessageNavigation()见TimelineNavigation.ts会解析该存储 ID 对应的当前节点并平滑滚动过去最多重试 20 次完成后清除哈希。::: tip Pro Tip 若你开启了 Cloud Sync星标会跨设备同步。 :::Levels让分支对话一目了然分支型对话例如让 Gemini 并行探索多个方案很容易变得杂乱。Timeline 的实验性分级功能可以解决设置级别右键节点在菜单中把它设为 1–3 级。折叠子节点右键某个已分级节点将其所有低一级编号更大的直接子节点折叠隐藏。折叠的实现逻辑在TimelineState.getHiddenMarkerIndices()从每个被折叠的标记出发向后隐藏所有级别更低数字更大的后续标记直到遇到同级或更高级别的标记为止随后calculateCollapsedPositions()按“有效 baseN”子节点贡献按0.5^(级别差)衰减重新计算可见节点的相对位置保证折叠后轨道仍保持视觉比例。分级与折叠数据同时写入 legacy localStorage 与扩展存储TIMELINE_HIERARCHY键并按账号作用域隔离见 hierarchyStorage.ts 与AccountIsolationService且会与 popup 设置实时同步。更快键盘操作不想用鼠标试试键盘。这就像给 Gemini 开启 Vim 模式。默认快捷键按键动作k跳到上一个节点j跳到下一个节点gg跳到第一轮GG跳到最后一轮按键序列检测由 KeyboardShortcutService.ts 实现gg对应timeline:first、GG对应timeline:last使用 capture 阶段监听且会忽略输入框内的键入与输入法组合状态避免干扰正常打字。默认配置即文档所述的 Vim 风格j/k无需修饰键。自定义快捷键打开扩展设置点击快捷键输入框按下任意你想要的键即可——任意键、任意组合n/p、,/.全由你决定。TimelineNavigation.initKeyboardShortcuts()在每次会话初始化时向keyboardShortcutService订阅timeline:previous、timeline:next、timeline:first、timeline:last四个动作并在销毁时正确退订避免 SPA 导航累积泄漏监听器。Flow 模式与 Jump 模式Flow 模式快速连按会平滑排队执行导航队列上限 3 条滚动带有动画节奏。Jump 模式瞬时响应追求最大速度。两种模式由存储键geminiTimelineScrollModeflow | jump控制。滚动动画还支持三种弹簧曲线——geminiTimelineSpring可选ios默认、snappy带轻微过冲、gentle三次缓动单次跳转的基础时长由geminiTimelineFlowDurationMs指定默认 650ms代码中钳制在 300–1800ms 之间并按起止节点的轨道距离缩放0.6–1.6 倍距离越远滚动越快。什么时候该用 TimelineTimeline 在超过 10 条消息的对话中价值最大此时滚动开始变得低效研究式会话让 Gemini 探索某个话题超过 30 轮后Timeline 让你无需重读全部内容即可跳回关键洞见。代码调试长调试对话中解法出现在第 47 轮。把它星标之后一键找到。学习与辅导循序渐进地攻克复杂主题用 Levels 折叠已掌握的章节。头脑风暴复盘回顾创意过程并提取最佳想法星标标记值得保留的瞬间。团队交接共享一个已星标的对话让同事直接跳到相关轮次。Timeline 与手动滚动对比能力无 Timeline有 Voyager Timeline查找特定消息反复上下滚动点击节点或按j/k为关键时刻做书签复制粘贴到外部笔记长按星标并同步到云端查看对话结构顺序通读可视化地图一眼看清全貌键盘导航Gemini 原生不可用Vim 风格j/k、gg/GG完全可自定义导航 100 条消息需要滚动数分钟瞬时跳到任意位置组织超长线程无内置工具Levels1–3与可折叠子节点支持范围与浏览器Timeline 在 Chrome、Edge、Firefox、Safari、Opera 与 Brave 上的 Google Gemini 中均可使用。键盘快捷键、星标与分级功能在所有平台上行为一致开启 Cloud Sync 后星标消息跨设备同步。Timeline 是Gemini 专属特性不适用于 AI Studio——后者的对话通常更短。这也与源码中的路由判定一致index.ts只匹配app/gem路径含账号作用域前缀非对话路由会直接销毁时间轴实例。附录Timeline 相关设置项一览以下设置项来自 manager.ts 的初始化默认值与存储监听逻辑均可在扩展设置或 popup 中实时调整并即时生效存储键取值/默认值作用geminiTimelineScrollModeflow默认/jump导航滚动模式TIMELINE_STYLEdots默认时间轴视觉风格geminiTimelineHideContainerfalse默认隐藏时间轴容器geminiTimelineBarWidthnull默认时间轴宽度受 min/max 约束geminiTimelineDraggablefalse默认是否允许拖动时间轴geminiTimelineMarkerLevelfalse默认是否启用分级功能geminiTimelinePositionnull默认时间轴位置v1 像素值会自动迁移为 v2 百分比格式TIMELINE_PREVIEW_PINNEDfalse默认预览面板是否固定geminiTimelineSpringios默认/snappy/gentle滚动动画弹簧曲线geminiTimelineFlowDurationMs650默认300–1800Flow 模式单跳基础时长geminiTimelineUserTurnSelector空默认用户消息选择器的用户覆盖优先级最高其中用户消息节点的自动探测值得一提findCriticalElements()依次尝试多组选择器如.user-query-bubble-with-background、[data-message-author-roleuser]等命中后会把选择器缓存到localStoragegeminiTimelineUserTurnSelectorAuto供下次快速启动若用户显式覆盖且覆盖失效会自动清除缓存以自愈。这保证了即使 Gemini 前端 DOM 结构变化Timeline 也能保持健壮。进一步阅读Cloud Sync云端同步开启后星标跨设备同步Timeline 源码入口src/pages/content/timeline/index.tsTimeline 各模块职责划分src/pages/content/timeline/README.md含 Highlight 集成边界说明键盘快捷键服务src/core/services/KeyboardShortcutService.ts赞分享AI 应用前端【免费下载链接】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点击查看免费下载相关推荐Voyager Timeline 时间旅行指南把 Gemini 长对话变成可即时跳转的可视化导航地图Voyager Timeline 时间旅行指南把 Gemini 长对话变成可即时跳转的可视化导航地图 本篇技术指南围绕 Voyager 扩展的 TimelinAI 应用前端Voyager 时间轴Timeline实战指南把 Gemini 长对话变成一张可导航的地图Voyager 时间轴Timeline实战指南把 Gemini 长对话变成一张可导航的地图 导读 Voyager 的 Timeline时间轴是面向AI 应用前端Voyager 时间轴Timeline使用指南把长对话变成一条可导航的线Voyager 时间轴Timeline使用指南把长对话变成一条可导航的线 本指南讲解 Voyager 扩展核心功能「时间轴」它在 Gemini、ClauAI 应用前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考