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

AI 应用
前端

【免费下载链接】voyager

Enhancement 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 对话，看向屏幕右侧。时间轴上每一个节点代表一条消息，节点排布的可视化密度直接反映对话的节奏——密集的区域是来回交锋的讨论，稀疏的区域是长文本的展开。

这里没有强行缩放、没有分页，节点在整条轨上的相对位置对应消息在滚动视口中的真实位置。TimelineManager（manager.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>），同时通过StarredMessagesService（StarredMessagesService.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 模式：瞬时响应，追求最大速度。

两种模式由存储键geminiTimelineScrollMode（'flow' | 'jump'）控制。滚动动画还支持三种弹簧曲线——geminiTimelineSpring可选ios（默认）、snappy（带轻微过冲）、gentle（三次缓动）；单次跳转的基础时长由geminiTimelineFlowDurationMs指定（默认 650ms，代码中钳制在 300–1800ms 之间），并按起止节点的轨道距离缩放（0.6–1.6 倍），距离越远滚动越快。

什么时候该用 Timeline

Timeline 在超过 10 条消息的对话中价值最大，此时滚动开始变得低效：

研究式会话：让 Gemini 探索某个话题超过 30 轮后，Timeline 让你无需重读全部内容即可跳回关键洞见。
代码调试：长调试对话中，解法出现在第 47 轮。把它星标，之后一键找到。
学习与辅导：循序渐进地攻克复杂主题，用 Levels 折叠已掌握的章节。
头脑风暴复盘：回顾创意过程并提取最佳想法，星标标记值得保留的瞬间。
团队交接：共享一个已星标的对话，让同事直接跳到相关轮次。

Timeline 与手动滚动对比

能力	无 Timeline	有 Voyager Timeline
查找特定消息	反复上下滚动	点击节点或按`j`/`k`
为关键时刻做书签	复制粘贴到外部笔记	长按星标，并同步到云端
查看对话结构	顺序通读	可视化地图一眼看清全貌
键盘导航	Gemini 原生不可用	Vim 风格`j`/`k`、`gg`/`GG`，完全可自定义
导航 100+ 条消息	需要滚动数分钟	瞬时跳到任意位置
组织超长线程	无内置工具	Levels（1–3）与可折叠子节点

支持范围与浏览器

Timeline 在 Chrome、Edge、Firefox、Safari、Opera 与 Brave 上的 Google Gemini 中均可使用。键盘快捷键、星标与分级功能在所有平台上行为一致；开启 Cloud Sync 后，星标消息跨设备同步。

Timeline 是Gemini 专属特性，不适用于 AI Studio——后者的对话通常更短。这也与源码中的路由判定一致：index.ts只匹配app/gem路径（含账号作用域前缀），非对话路由会直接销毁时间轴实例。

附录：Timeline 相关设置项一览

以下设置项来自 manager.ts 的初始化默认值与存储监听逻辑，均可在扩展设置或 popup 中实时调整并即时生效：

存储键	取值/默认值	作用
`geminiTimelineScrollMode`	`flow`（默认）/`jump`	导航滚动模式
`TIMELINE_STYLE`	`dots`（默认）	时间轴视觉风格
`geminiTimelineHideContainer`	`false`（默认）	隐藏时间轴容器
`geminiTimelineBarWidth`	`null`（默认）	时间轴宽度，受 min/max 约束
`geminiTimelineDraggable`	`false`（默认）	是否允许拖动时间轴
`geminiTimelineMarkerLevel`	`false`（默认）	是否启用分级功能
`geminiTimelinePosition`	`null`（默认）	时间轴位置，v1 像素值会自动迁移为 v2 百分比格式
`TIMELINE_PREVIEW_PINNED`	`false`（默认）	预览面板是否固定
`geminiTimelineSpring`	`ios`（默认）/`snappy`/`gentle`	滚动动画弹簧曲线
`geminiTimelineFlowDurationMs`	`650`（默认，300–1800）	Flow 模式单跳基础时长
`geminiTimelineUserTurnSelector`	空（默认）	用户消息选择器的用户覆盖，优先级最高

其中用户消息节点的自动探测值得一提：findCriticalElements()依次尝试多组选择器（如.user-query-bubble-with-background、[data-message-author-role="user"]等），命中后会把选择器缓存到localStorage（geminiTimelineUserTurnSelectorAuto）供下次快速启动；若用户显式覆盖且覆盖失效，会自动清除缓存以自愈。这保证了即使 Gemini 前端 DOM 结构变化，Timeline 也能保持健壮。