:让 Gemini 聊天界面更沉浸的完整指南)
Voyager 侧边栏自动隐藏Sidebar Auto-Hide让 Gemini 聊天界面更沉浸的完整指南【免费下载链接】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 浏览器扩展为 Google Gemini 提供的侧边栏自动隐藏Masquage automatique de la barre latérale功能——当鼠标离开侧边栏区域时自动收起、移回时自动展开从而最大化聊天区可视面积。你将掌握从面板开启该功能的完整操作步骤并通过仓库源码深入理解它的底层实现鼠标进出延迟、全隐藏Full-Hide模式、边缘触发区、预测式瞄准Predictive Aiming等关键机制以及针对 Gemini 页面 DOM 的适配策略。功能概述什么是侧边栏自动隐藏在 Gemini 的聊天界面中左侧栏会话列表、导航菜单长期占据屏幕宽度。Voyager 提供的自动隐藏侧边栏功能专门解决这一问题开启后当鼠标离开侧边栏所在的区域侧边栏自动收缩当鼠标再次移入该区域侧边栏自动展开。整体体验类似浏览器 DevTools 的自动隐藏抽屉让聊天区在不需要侧边栏时获得完整的视觉宽度。该功能面向“更沉浸的聊天体验”这一场景设计特别适合需要长时间阅读长对话、宽屏显示时希望内容区铺满的 Gemini 用户。当前支持范围注意该功能目前仅支持 Google Gemini 站点不支持 AI Studio、Claude、ChatGPT 等其他站点。这与 docs/fr/guide/sidebar-auto-hide.md 中的说明一致——从源码角度看其 DOM 适配bard-sidenav、side-navigation-content等选择器完全是围绕 Gemini 的页面结构编写的。如何开启三步完成配置按照以下步骤即可在 Voyager 面板中启用打开 Voyager 配置面板点击浏览器工具栏中的 Voyager 扩展图标。进入布局设置在面板中找到侧边栏行为相关的设置分组对应源码中的 “Sidebar Behavior” 卡片见 PopupLayoutSettings.tsx。开启开关找到Masquer auto barre latérale自动隐藏侧边栏选项并打开开关。开启后无需刷新页面扩展会立即生效——首次开启时若鼠标不在侧边栏上且没有弹窗打开侧边栏会在约 500ms 后自动收起。相关的第二个开关完全隐藏Full-Hide在同一个设置卡片中还有一个关联选项Masquer complètement la barre latérale完全隐藏侧边栏。它与自动隐藏配合使用当侧边栏处于收起状态无论是自动隐藏还是手动收起时将其宽度彻底归零连收起的窄条也一并隐藏进一步释放屏幕空间。法语版界面文案可在 messages.json 中查到。这两个开关的偏好设置通过chrome.storage.sync持久化存储键为gvSidebarAutoHide与gvSidebarFullHide见 common.ts因此会跟随浏览器账号跨设备同步。源码级实现自动隐藏是怎么工作的自动隐藏功能的核心实现位于 src/pages/content/sidebarAutoHide/index.ts文件头注释L1-L11明确描述了其两大职责Auto-hide鼠标离开时侧边栏自动收起移入时自动展开Full-hide侧边栏收起后无论由自动隐藏还是手动触发彻底隐藏宽度归零。实现通过点击 Gemini 页面的side-nav-menu-button切换按钮来改变侧边栏状态而不是直接修改 Gemini 的样式表。1. 设置读取与实时监听入口逻辑入口函数startSidebarAutoHide()index.ts执行三件事首次读取存储中的两项设置默认均为false据此调用enable()/enableFullHide()注册chrome.storage.onChanged监听器仅响应sync区域的变更实现开关切换时无需刷新页面即可热生效在beforeunload时清理确保页面卸载时关闭自动隐藏避免影响其他页面。2. 鼠标进出延迟与防误触自动隐藏对鼠标事件的响应采用双重延迟防抖策略index.tsLEAVE_DELAY_MS 400鼠标离开侧边栏后等待 400ms 才收起防止鼠标快速划过边缘时误触收起ENTER_DELAY_MS 150鼠标移入后等待 150ms 才展开同样用于过滤“快速穿越”场景。handleMouseEnter与handleMouseLeaveL681-L717分别设置这两个定时器并在对方事件到来时先取消未决定时器避免“进入-离开-进入”的抖动。测试用例专门验证了这一防误触逻辑“does not expand on quick sidebar hover pass-through”见 SidebarAutoHide.test.ts——鼠标在 80ms小于 150ms内进出侧边栏展开定时器不应触发。3. 何时暂停收起弹窗与菜单保护侧边栏在以下场景下不会自动收起collapseSidebar()的前置检查见 L571-L583存在keepExpandedLocks锁如引导提示 Coachmark 持有期间处于暂停窗口isPaused()例如用户刚点击过菜单项后 1500ms 内有弹窗或对话框打开isPopupOrDialogOpen()包括 Material 对话框、菜单面板以及 Voyager 自己的.gv-folder-dialog、.gv-color-picker-dialog等自定义弹层见 L458-L477鼠标仍在侧边栏区域或其悬停的弹层上。其中文件夹颜色选择器保护有对应的测试用例“does not collapse when folder color picker is open”见 SidebarAutoHide.test.ts颜色选择器打开时触发 mouseleave 不应收起关闭后再次 mouseleave 才正常收起。4. 菜单点击暂停handleMenuClickL505-L547在捕获阶段监听全局click事件当点击侧边栏切换按钮、rolemenuitem菜单项、侧边栏内按钮或 “Options / 选项 / More” 类按钮时会调用pauseAutoCollapse(1500)MENU_CLICK_PAUSE_MS给后续弹出的对话框或菜单留出操作时间避免刚点开菜单侧边栏就收起。Full-Hide 完全隐藏从收起窄条到零宽度仅靠自动隐藏Gemini 收起后仍保留一条窄侧栏。Full-Hide 通过注入 CSS 类的方式将其宽度压到 0两级 CSS 类控制gv-sidebar-full-hide-collapsing收起动画进行中的中间态——先将当前宽度固化为内联样式再过渡到0px实现平滑动画gv-sidebar-full-hide-collapsed最终态——对bard-sidenav、side-navigation-content及其内容容器强制width: 0、min-width: 0、max-width: 0、flex-basis: 0、overflow: hidden、padding: 0getFullHideStyle()。过渡动画getTransitionStyle()L123-L133为侧边栏及其内容层注入0.26s cubic-bezier(0.4, 0, 0.2, 1)的宽度/位移过渡配合will-change提示使收起与展开都平滑自然。测试“delays full-hide after auto-collapse so the native close animation can run”SidebarAutoHide.test.ts验证了完整时序自动收起后先进入collapsing中间态宽度为0px且带!important优先级260ms 后才进入collapsed终态再过 240ms 动画类被清除。边缘触发区如何重新唤出Full-Hide 启用后页面左侧会注入一个 6px 宽、100vh 高的透明热区gv-sidebar-edge-trigger见createEdgeTrigger()L212-L230EDGE_TRIGGER_WIDTH 6。鼠标移入该热区即触发handleMouseEnter展开侧边栏。需要说明的是Full-Hide 的边沿热区只在自动隐藏Auto-Hide同时开启时才参与展开逻辑仅开启 Full-Hide 时热区存在但不会响应鼠标展开对应测试“does not reveal from the full-hide edge trigger when auto-hide is disabled”L146-L184。预测式瞄准消除“等待感”的细节优化这是实现中非常有趣的一个细节L60-L69 注释明确说明其灵感来自 “Amazon mega-menu” 技巧在document级别监听mousemove追踪鼠标速度与方向当鼠标位于距左边缘PREDICTIVE_ZONE_WIDTH 100px范围内且向左移动速度超过PREDICTIVE_VELOCITY_THRESHOLD -0.5 px/ms时在mouseenter事件触发之前就预展开侧边栏彻底消除用户感知到的“等待”采样节流PREDICTIVE_THROTTLE_MS 50ms并丢弃间隔超过 200ms 的陈旧采样如切换标签页后的残留数据安全兜底若预展开后鼠标始终没有真正进入侧边栏中途改变方向PREDICTIVE_SAFETY_COLLAPSE_MS 1200ms后自动重新收起。测试套件中的 “predictive aiming” 分组SidebarAutoHide.test.ts覆盖了快速逼近展开、慢速不展开、仅 Full-Hide 时不展开、预展开后未进入则自动收回等四种场景。与 Gemini 页面结构的适配多种布局兼容Gemini 页面结构随版本演化Voyager 为此维护了多套选择器与状态判定策略切换按钮发现findToggleButton()L255-L294按优先级尝试button[aria-labelOpen sidebar]/button[aria-labelClose sidebar]side-nav-sparkle-button button、button[data-test-idside-nav-menu-button]、side-nav-menu-button button旧版布局通过mat-icon[fonticon]side_nav/side_nav_expand反查最近的button——因为 aria-label 是本地化的而图标字形的 ligature 名称与语言无关是 i18n 稳定的锚点。此外2026 新版布局会同时渲染两个匹配按钮一个可见、一个 0×0 占位因此代码用querySelectorAll遍历并过滤零几何元素确保点击落到真正可见的按钮上对应测试“picks the visible Close-sidebar button and skips the 0×0 invisible copy”L554-L603以及“finds the toggle via mat-icon fonticon when aria-label is localized”L605-L640。收起状态判定getStructuredSidebarCollapsedState()/isSidebarCollapsed()L316-L346综合多种信号bard-sidenav或其内容容器上的collapsed类、切换按钮的 icon/aria-label 状态、mat-sidenav-openedbody 类最后回退到侧边栏几何宽度 80px 视为收起。这种多信号判定让功能在 Gemini 不同改版中都能正确识别当前状态。动态 DOM 的韧性Gemini 是单页应用DOM 会不断重建。Voyager 采用三层机制保证监听不失效MutationObserver监听document.body的子树变更OBSERVER_DEBOUNCE_MS 100ms防抖避免展开时数百行会话渲染引发的同步扫描风暴注释 L45-L48window的resize事件200ms 防抖并在 600ms 后再复查一次每秒一次的setInterval兜底轮询SIDENAV_CHECK_INTERVAL_MS 1000。三者共同驱动checkAndReattach()侧边栏节点被重建时自动重挂事件监听并同步 Full-Hide 的边缘热区显隐。工程配套如何查看测试与本地验证该功能的单元测试集中在 src/pages/content/sidebarAutoHide/tests/SidebarAutoHide.test.ts使用 Vitest 的假定时器vi.useFakeTimers()验证延迟逻辑并 mockgetBoundingClientRect模拟可见几何。覆盖的关键行为包括弹窗/颜色选择器打开时禁止收起快速掠过不展开Full-Hide 的收起/展开时序与边沿热区显隐Coachmark 持锁期间保持展开keepSidebarExpanded()对应实现 index.ts预测式瞄准的正反例与安全收回。若想在本地运行这些测试可执行bun test仓库使用 Bun 作为包管理器见根目录 bun.lock 与 package.json或针对该文件运行bun test src/pages/content/sidebarAutoHide/__tests__/SidebarAutoHide.test.ts。小结Voyager 的侧边栏自动隐藏远不止一个简单的“鼠标进出开关”操作层面面板中两个开关即可启用自动隐藏 完全隐藏偏好随账号同步交互层面400ms/150ms 的进出延迟防抖、弹窗与菜单保护、菜单点击暂停把误触概率降到最低体验层面预测式瞄准让“滑向边缘展开”几乎无感知延迟260ms 的 CSS 过渡让收起动画顺滑工程层面多选择器发现、多信号状态判定、MutationObserver resize 轮询三保险让功能在 Gemini 页面改版后依然可靠。对追求沉浸式聊天体验的 Gemini 用户来说这是一组开箱即用、又能从源码中读出设计细节的高质量功能。它的完整实现与测试均可在此仓库中查看实现见 src/pages/content/sidebarAutoHide/index.ts面板入口见 src/pages/popup/components/PopupLayoutSettings.tsx测试见 src/pages/content/sidebarAutoHide/tests/SidebarAutoHide.test.ts。【免费下载链接】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),仅供参考