Voyager 侧边栏宽度调整指南在 Gemini 与 AI Studio 中自由定制 Sidebar 宽度【免费下载链接】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 中过长的文件夹名称常常被截断成省略号而默认的侧边栏又时常挤占聊天主区域的空间。Voyager 为这两个问题提供了一个统一的答案自由拖拽滑块调整侧边栏宽度。本指南将完整讲解该功能的使用方法、参数范围、持久化机制并深入到 src/pages/content/sidebarWidth/index.ts 等核心实现说明它如何在 Google Gemini 与 Google AI Studio 两个平台上落地。一、功能背景侧边栏宽度的两个痛点依据 docs/en/guide/sidebar.md 的说明该功能解决的核心痛点是文件夹名称太长侧边栏过窄时多级文件夹的名称会被截断无法一眼看清全貌侧边栏过宽固定的侧边栏占用大量屏幕空间挤压了宝贵的聊天区域。Voyager 让用户可以自由地在「窄」与「宽」之间调节侧边栏Narrow窄节省空间将视觉焦点留给对话内容Wide宽完整展示文件夹名称浏览时一目了然。二、快速上手三步调整侧边栏宽度打开设置面板点击浏览器右上角的 Voyager 扩展图标进入设置面板。定位选项在General Settings通用设置中找到Sidebar width侧边栏宽度滑块。在弹窗中它位于布局设置区域与 Chat Width、Edit Input Width 等滑杆并列见 src/pages/popup/components/PopupLayoutSettings.tsx。拖拽调节左右拖动滑块选择你想要的宽度。滑块左端标注窄Narrow、右端标注宽Wide拖动时会实时显示当前像素值松手后立即生效。该滑块与 Chat Width、Chat Font Size 等控件共用同一个可复用组件WidthSlidersrc/pages/popup/components/WidthSlider.tsx因此交互体验一致拖拽中显示草稿值松手onValueCommit才落盘保存避免高频写入存储。三、支持的平台与参数范围依据文档该功能同时支持 Google Gemini 与 Google AI Studio但两个平台的实现路径与参数范围并不相同。汇总如下数据来自 src/pages/popup/utils/layoutSettings.ts平台滑块最小值滑块最大值默认值单位/粒度Google Gemini180px对应 15%540px对应 45%312px对应 26%步长 8px显示为 pxGoogle AI Studio240px600px280px步长 8px显示为 pxGemini 一侧的百分比换算以 1200px 为基准LEGACY_BASELINE_PX15% ≈ 180px26% ≈ 312px45% ≈ 540px。弹窗中的滑块统一以像素显示但在底层 Gemini 的实现中百分比与像素两套历史格式都被支持详见下文源码剖析。四、源码剖析Gemini 平台的 CSS 变量注入机制Gemini 侧边栏bard-sidenav的宽度由 CSS 变量--bard-sidenav-open-width控制。Voyager 的核心思路是向页面注入一段style标签用!important覆盖该 CSS 变量从而在不改动页面结构的前提下自由调整宽度。4.1 核心常量与归一化逻辑在 src/pages/content/sidebarWidth/index.ts 中定义了关键常量const STYLE_ID gv-sidebar-width-style; const DEFAULT_PERCENT 26; const MIN_PERCENT 15; const MAX_PERCENT 45; const LEGACY_BASELINE_PX 1200; const DEFAULT_PX Math.round((DEFAULT_PERCENT / 100) * LEGACY_BASELINE_PX); // 312px const MIN_PX Math.round((MIN_PERCENT / 100) * LEGACY_BASELINE_PX); // 180px const MAX_PX Math.round((MAX_PERCENT / 100) * LEGACY_BASELINE_PX); // 540pxnormalizeWidth同文件 L44-L50负责兼容历史数据数值大于 45 的存储值被当作像素处理否则按百分比处理。这与弹窗侧的normalizeSidebarPxlayoutSettings.ts遥相呼应——后者会把旧的百分比值先换算成像素再夹取到合法区间保证升级用户的数据平滑迁移。4.2 注入的 CSS 结构构建出的样式buildStyleL52-L233核心部分如下:root { --bard-sidenav-open-width: clamp(200px, 26vw, 800px) !important; --bard-sidenav-open-closed-width-diff: max(0px, calc(clamp(200px, 26vw, 800px) - var(--bard-sidenav-closed-width, 72px))) !important; --gv-sidenav-shift: ... !important; } /* 侧边栏折叠时将位移清零 */ #app-root:has(side-navigation-content div.collapsed) { --gv-sidenav-shift: 0px !important; }其中值得注意的实现细节百分比单位会渲染成clamp(200px, ${normalized}vw, 800px)即至少 200px、至多 800px既保留了旧版 vw 行为又避免极端值折叠态宽度回退到var(--bard-sidenav-closed-width, 72px)与 Gemini 默认的收起轨道宽度一致通过--gv-sidenav-shift位移顶部模式切换器bard-mode-switcher保证侧边栏变宽/变窄时顶栏始终对齐。4.3 点击穿透修复保证顶栏控件可点侧边栏加宽后Gemini 的顶栏top-bar-actions可能覆盖在新侧边栏边界上吞掉搜索按钮、侧边栏折叠按钮的点击。Voyager 通过一整套pointer-events规则解决容器层设pointer-events: none而search-nav-button、side-nav-sparkle-button、side-nav-menu-button等真实交互控件恢复pointer-events: autoindex.ts L96-L231。此外代码中还内置了点击拦截守护Sidebar Toggle Hit GuardL348-L396当捕获阶段发现点击落在真实折叠按钮的矩形内却被其他元素拦截时会主动preventDefaultstopImmediatePropagation并转发调用真实按钮的click()。这一修复对应 changelog 1.4.9 中「侧边栏折叠按钮恢复可点击」的说明src/pages/content/changelog/notes/1.4.9.md。针对上述行为的回归测试集中在 src/pages/content/sidebarWidth/tests/sidebarWidthCentering.test.ts其中明确验证了「常规侧边栏按钮不被误判为折叠按钮」「被拦截的点击会转发到真实折叠按钮」等场景。五、源码剖析AI Studio 平台的样式直改方案AI Studio 的实现位于文件夹管理器中src/pages/content/folder/aistudio.tsAIStudioFolderManager。它不走 CSS 变量而是直接操作侧边栏 DOM 元素的内联样式目标元素是.nav-content.v3-left-nav通过设置width/minWidth/maxWidth/flex: 0 0 Npx固定宽度L3754-L3774侧边栏折叠无expanded类时自动清除这些覆盖恢复原生行为代码中还提供了拖拽手柄addResizeHandleL3779 起允许在页面上直接拖动调整宽度该平台的最小/最大宽度为 240px / 600pxL299-L300弹窗滑块的默认值为 280px。AI Studio 的宽度既写入chrome.storage.sync用于跨设备同步也同步写入localStorage作为即时备份saveSidebarWidthL3730-L3749加载时优先读取 sync 存储、失败后回退 localStorageloadSidebarWidthL3684-L3725。六、设置持久化与自动生效文档承诺「设置会自动保存下次打开页面时生效」。这一承诺由以下机制保证统一存储键geminiSidebarWidthGemini 宽度、gvSidebarWidthEnabled总开关、gvAIStudioSidebarWidthAI Studio 宽度集中定义在 src/core/types/common.ts 的StorageKeys中写入路径弹窗滑块通过useWidthAdjustersrc/hooks/useWidthAdjuster.ts在用户松开滑块的瞬间一次性写入chrome.storage.sync写入前会经过normalize夹取到合法区间usePopupLayoutSettings.ts读取路径内容脚本startSidebarWidthAdjustersrc/pages/content/sidebarWidth/index.ts在页面加载时读取存储并注入样式同时注册chrome.storage.onChanged监听——即使页面已打开只要弹窗中改了宽度也会实时生效升级自动启用当检测到用户此前自定义过宽度、但缺少显式开关时会自动写入gvSidebarWidthEnabled: true并启用功能index.ts L416-L429避免老用户升级后设置「静默失效」。由于数据存储在chrome.storage.sync该偏好会跟随账号跨设备同步无需手动导出导入。七、与其他侧边栏相关功能的配合侧边栏宽度的调整可以与 Voyager 的其他侧边栏功能组合使用构成完整的界面定制方案Sidebar Auto-hide让侧边栏在鼠标离开时自动收起、返回时自动展开配合加宽的侧边栏可实现「平时隐去、需要时展开完整宽度」的体验参见 docs/en/guide/sidebar-auto-hide.md从文件夹菜单直接调整自 1.7.1 版本起也可以在文件夹菜单中直接调整侧边栏宽度无需打开弹窗src/pages/content/changelog/notes/1.7.1.md开关控制自 1.3.2 版本起宽度调整功能带有一个独立开关可随时停用 CSS 注入一键恢复 Gemini/AI Studio 原生宽度src/pages/content/changelog/notes/1.3.2.md。八、常见问题与注意事项为什么弹窗里显示的是像素而不是百分比当前弹窗统一以 px 展示valueFormatter: (v) ${v}px见 PopupLayoutSettings.tsx底层仍兼容历史百分比数据读取时自动归一化。调宽后搜索按钮点不动了这是 Gemini 顶栏覆盖导致的已知问题Voyager 已通过pointer-events白名单与点击转发守护解决如遇异常可暂时关闭该功能开关再开启或在浏览器控制台观察[Gemini Voyager][sidebarWidth debug]前缀的诊断日志由 index.ts 内置的调试工具输出。宽度设置能跨设备同步吗可以。Gemini 宽度与开关存储在chrome.storage.sync中属于同步偏好AI Studio 宽度在 sync 之外另有 localStorage 兜底防止扩展上下文失效时丢失。总结Voyager 的侧边栏宽度调整是一个典型的「小而精」的增强功能操作上只需在弹窗里拖一个滑块底层却针对 GeminiCSS 变量覆盖 点击穿透修复与 AI StudioDOM 内联样式 拖拽手柄分别实现了两套方案并通过统一存储键与归一化逻辑保证设置跨设备持久、跨版本兼容。对使用者而言它解决了「文件夹名看不全」与「聊天区被挤压」两个日常痛点对开发者而言src/pages/content/sidebarWidth/index.ts、src/pages/content/folder/aistudio.ts 与配套测试 sidebarWidthCentering.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），仅供参考