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 的侧边栏宽度调整功能展开当 Gemini / AI Studio 侧边栏中的文件夹名称过长显示不全或侧边栏挤占了过多对话空间时你可以通过 Voyager 弹窗设置中的滑块自由调整宽度并将偏好自动保存、跨页面生效。读完本文你将掌握该功能的完整操作流程、支持的平台范围以及它从滑块到 CSS 变量注入的底层实现原理。功能概述为什么需要调整侧边栏宽度Gemini 与 AI Studio 的侧边栏默认宽度是固定的而不同用户的真实使用场景差异很大文件夹名太长显示不全使用 Voyager 的文件夹Folders功能整理会话后长文件夹名会被截断无法一眼看清归属侧边栏挤占聊天空间在窗口较窄或需要专注阅读对话时固定宽度的侧边栏会让内容区显得局促。Voyager 提供的侧边栏宽度调整功能正是为解决这两类痛点而设计既可以收窄以节省空间、聚焦对话也可以加宽以完整显示长文件夹名称。操作步骤三步完成宽度调整打开 Voyager 设置面板点击浏览器右上角的扩展图标打开 Voyager 的弹窗Popup界面找到侧边栏宽度选项在设置面板的布局Layout区域中找到Sidebar width侧边栏宽度选项它位于通用设置General Settings中与聊天宽度、输入框宽度等调整项属于同一组布局类设置拖动滑块选择宽度向左拖动收窄侧边栏向右拖动加宽侧边栏释放滑块后设置即刻生效。宽度两端对应的效果窄Narrow节省空间把注意力集中在对话内容上宽Wide一眼看清完整的文件夹名称减少因截断带来的误点。在弹窗中侧边栏宽度滑块还带有一个启用开关Switch关闭开关即可完全禁用自定义宽度并恢复站点默认布局。关闭时滑块区域会收起保持面板整洁数值徽标会实时显示当前选择的宽度以像素为单位。该交互由 WidthSlider.tsx 这个可复用组件实现它与聊天宽度、编辑输入框宽度等设置共用同一套滑块交互逻辑。支持的平台与适用范围该功能同时支持两个平台对应官方文档说明及源码中的平台判断逻辑Google GeminiGoogle AI Studio两个平台由弹窗层根据当前站点上下文自动区分在 usePopupLayoutSettings.ts 中通过isAIStudio标志选择不同的存储键与取值范围——Gemini 侧使用百分比的兼容式宽度AI Studio 侧使用独立的像素区间。因此同一套设置面板在不同站点上会呈现各自合理的宽度范围互不干扰。设置保存与生效机制自动保存拖动滑块完成调节后数值会立即写入chrome.storage.sync无需手动确认跨页面生效设置会被同步存储因此你在一次打开页面时调整的宽度会在下次打开页面时自动应用见 官方英文文档跨设备同步由于使用chrome.storage.sync而非local存储登录同一 Chrome 账号的其它设备也会继承该偏好即时响应内容脚本会监听存储变化chrome.storage.onChanged因此弹窗中拖动滑块后当前已打开的 Gemini 页面也会实时应用新宽度而不必刷新页面。源码级原理从滑块到 CSS 变量的完整链路1. Gemini 侧通过 CSS 变量接管原生宽度Gemini 的侧边栏bard-sidenav原生宽度由 CSS 变量--bard-sidenav-open-width控制。Voyager 的内容脚本 src/pages/content/sidebarWidth/index.ts 的做法是动态创建一个style idgv-sidebar-width-style注入页面ensureStyleEl将用户设定的宽度写入:root与bard-sidenav的--bard-sidenav-open-width变量并附带!important以确保覆盖站点默认值同时维护--bard-sidenav-open-closed-width-diff与--gv-sidenav-shift两个派生变量用于计算侧边栏展开/收起时的位移量保证顶栏的模式切换器mode switcher能跟随加宽后的侧边栏平移对齐不会出现错位。启用开关关闭或页面卸载时脚本会移除注入的样式元素removeStyles干净地恢复站点原始布局。2. 参数范围与默认值Gemini 与 AI Studio 两套宽度配置定义在 src/pages/popup/utils/layoutSettings.ts具体如下平台最小值最大值默认值滑块步长Google Gemini15%约 180px45%约 540px26%约 312px8pxGoogle AI Studio240px600px280px8px说明Gemini 侧内部以百分比为基准15%–45%并保留一个 1200px 的“历史基线”用于旧版本像素值的兼容换算LEGACY_BASELINE_PX 1200默认 26% 即 312px当从旧版本迁移时如果存储中是一个看起来像百分比的小数值normalizePercent/normalizeSidebarPx会先将其换算为像素再收敛到合法区间防止越界最终注入 Gemini 页面的实际宽度采用clamp(200px, {n}vw, 800px)形式既保留了早期vw百分比的行为又限制在 200px–800px 的物理区间内避免在超宽屏上失控AI Studio 侧则是纯像素区间240px–600px由AI_STUDIO_SIDEBAR_PX常量定义同样在写入前经过clampNumber收敛。3. 存储键、升级路径与旧数据兼容内容脚本启动时会读取geminiSidebarWidth与启用标志两个键具体键名定义在 src/core/types/common.ts 的StorageKeys中区分“从未设置”与“显式关闭”读取时特意不带默认值以便识别键是否存在。对于老用户从未见过启用开关、但此前已自定义过宽度会走自动启用的升级路径只要检测到自定义宽度且无启用标志就自动开启功能并把开关状态写回存储归一化回写若读取到的旧值超出新范围会先归一化再回写存储保证新旧版本数据一致存储变更监听chrome.storage.onChanged监听器负责在弹窗调整时实时重新注入样式或在该功能被关闭时移除样式。4. 兼容性细节点击穿透与侧边栏切换守卫加宽侧边栏会带来一个隐蔽问题Gemini 的top-bar-actions等顶部操作层在侧边栏位移后可能覆盖住真实控件。内容脚本在注入的样式中针对bard-mode-switcher、top-bar-actions等容器设置了精细的pointer-events白名单——容器整体穿透但其中的按钮、链接、输入框、search-nav-button、side-nav-sparkle-button、side-nav-menu-button等真实可交互控件仍保持可点击并用z-index保证它们位于顶层。此外脚本还实现了侧边栏切换点击守卫setupSidebarToggleHitGuard当用户在捕获阶段点击了侧边栏切换按钮的区域、却被覆盖层拦截时守卫会通过document.elementsFromPoint判断真实目标阻止默认行为并手动调用真实切换按钮的click()确保加宽后依然能正常展开/收起侧边栏。这些细节均有测试用例覆盖见 sidebarWidthCentering.test.ts。相关测试与持续维护该功能配套了完整的单元测试sidebarWidthCentering.test.ts与弹窗层测试PopupLayoutSettings.test.tsx、usePopupLayoutSettings.test.tsx覆盖样式注入的指针事件白名单不会波及所有mode-switcher后代顶部操作层保持透明的同时搜索按钮仍可点击被覆盖层拦截的侧边栏切换点击会正确转发到真实按钮常规侧边栏按钮如“新建对话”不会被误判为切换按钮。测试通过直接读取注入样式的源码文本断言关键选择器与!important规则存在这保证了后续维护时不会破坏与 Gemini 页面 DOM 结构的契约。常见问题与使用建议侧边栏宽度与“自动隐藏”类设置的关系弹窗的布局区域中还有“侧边栏自动隐藏”等行为开关见 PopupLayoutSettings.tsx它们与宽度调整互相独立、可叠加使用可按需组合出适合自己的布局宽度设置没生效请确认弹窗中侧边栏宽度的启用开关处于打开状态——若开关关闭内容脚本不会注入任何样式调整后新值会通过存储监听实时应用若遇到个别页面未即时刷新刷新一次页面即可关于各语言文档本指南基于阿拉伯语文档 docs/ar/guide/sidebar.md 与英文文档 docs/en/guide/sidebar.md 编写其余语言版本可在docs/{zh,ja,es,fr,pt,ru,ko,zh_TW}/guide/目录下找到对应译文。掌握侧边栏宽度调整后你可以在 Gemini 与 AI Studio 中自由权衡“信息密度”与“专注空间”让 Voyager 的文件夹管理、会话组织等功能在真正舒适的界面宽度下工作。赞分享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点击查看免费下载相关推荐快速上手flexivit_large.600ep_in1k5分钟实现Top-5图像分类预测快速上手flexivit_large.600ep_in1k5分钟实现Top 5图像分类预测 想要在5分钟内快速部署一个强大的图像分类模型吗flexivit_Lynx 侧边栏布局实战固定宽度侧栏 Flex 弹性主区的完整实现与原理剖析Lynx 侧边栏布局实战固定宽度侧栏 Flex 弹性主区的完整实现与原理剖析 本文以 Lynx API 文档中「侧边栏 主内容区」布局示例 side跨平台移动开发前端桌面应用Vidstack Player高级定制技巧从样式到交互的完全掌控Vidstack Player高级定制技巧从样式到交互的完全掌控 Vidstack Player是一款功能强大的现代化媒体播放器框架它提供了丰富的定制选项上一篇多目标优化终极指南用DEAP实现NSGA-II与NSGA-III算法下一篇FastAPI 用 TestClient 测 WebSocket 端点实战从最小例子到避坑指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Voyager 侧边栏宽度调整指南：为 Gemini 与 AI Studio 定制界面布局
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 的侧边栏宽度调整功能展开当 Gemini / AI Studio 侧边栏中的文件夹名称过长显示不全或侧边栏挤占了过多对话空间时你可以通过 Voyager 弹窗设置中的滑块自由调整宽度并将偏好自动保存、跨页面生效。读完本文你将掌握该功能的完整操作流程、支持的平台范围以及它从滑块到 CSS 变量注入的底层实现原理。功能概述为什么需要调整侧边栏宽度Gemini 与 AI Studio 的侧边栏默认宽度是固定的而不同用户的真实使用场景差异很大文件夹名太长显示不全使用 Voyager 的文件夹Folders功能整理会话后长文件夹名会被截断无法一眼看清归属侧边栏挤占聊天空间在窗口较窄或需要专注阅读对话时固定宽度的侧边栏会让内容区显得局促。Voyager 提供的侧边栏宽度调整功能正是为解决这两类痛点而设计既可以收窄以节省空间、聚焦对话也可以加宽以完整显示长文件夹名称。操作步骤三步完成宽度调整打开 Voyager 设置面板点击浏览器右上角的扩展图标打开 Voyager 的弹窗Popup界面找到侧边栏宽度选项在设置面板的布局Layout区域中找到Sidebar width侧边栏宽度选项它位于通用设置General Settings中与聊天宽度、输入框宽度等调整项属于同一组布局类设置拖动滑块选择宽度向左拖动收窄侧边栏向右拖动加宽侧边栏释放滑块后设置即刻生效。宽度两端对应的效果窄Narrow节省空间把注意力集中在对话内容上宽Wide一眼看清完整的文件夹名称减少因截断带来的误点。在弹窗中侧边栏宽度滑块还带有一个启用开关Switch关闭开关即可完全禁用自定义宽度并恢复站点默认布局。关闭时滑块区域会收起保持面板整洁数值徽标会实时显示当前选择的宽度以像素为单位。该交互由 WidthSlider.tsx 这个可复用组件实现它与聊天宽度、编辑输入框宽度等设置共用同一套滑块交互逻辑。支持的平台与适用范围该功能同时支持两个平台对应官方文档说明及源码中的平台判断逻辑Google GeminiGoogle AI Studio两个平台由弹窗层根据当前站点上下文自动区分在 usePopupLayoutSettings.ts 中通过isAIStudio标志选择不同的存储键与取值范围——Gemini 侧使用百分比的兼容式宽度AI Studio 侧使用独立的像素区间。因此同一套设置面板在不同站点上会呈现各自合理的宽度范围互不干扰。设置保存与生效机制自动保存拖动滑块完成调节后数值会立即写入chrome.storage.sync无需手动确认跨页面生效设置会被同步存储因此你在一次打开页面时调整的宽度会在下次打开页面时自动应用见 官方英文文档跨设备同步由于使用chrome.storage.sync而非local存储登录同一 Chrome 账号的其它设备也会继承该偏好即时响应内容脚本会监听存储变化chrome.storage.onChanged因此弹窗中拖动滑块后当前已打开的 Gemini 页面也会实时应用新宽度而不必刷新页面。源码级原理从滑块到 CSS 变量的完整链路1. Gemini 侧通过 CSS 变量接管原生宽度Gemini 的侧边栏bard-sidenav原生宽度由 CSS 变量--bard-sidenav-open-width控制。Voyager 的内容脚本 src/pages/content/sidebarWidth/index.ts 的做法是动态创建一个style idgv-sidebar-width-style注入页面ensureStyleEl将用户设定的宽度写入:root与bard-sidenav的--bard-sidenav-open-width变量并附带!important以确保覆盖站点默认值同时维护--bard-sidenav-open-closed-width-diff与--gv-sidenav-shift两个派生变量用于计算侧边栏展开/收起时的位移量保证顶栏的模式切换器mode switcher能跟随加宽后的侧边栏平移对齐不会出现错位。启用开关关闭或页面卸载时脚本会移除注入的样式元素removeStyles干净地恢复站点原始布局。2. 参数范围与默认值Gemini 与 AI Studio 两套宽度配置定义在 src/pages/popup/utils/layoutSettings.ts具体如下平台最小值最大值默认值滑块步长Google Gemini15%约 180px45%约 540px26%约 312px8pxGoogle AI Studio240px600px280px8px说明Gemini 侧内部以百分比为基准15%–45%并保留一个 1200px 的“历史基线”用于旧版本像素值的兼容换算LEGACY_BASELINE_PX 1200默认 26% 即 312px当从旧版本迁移时如果存储中是一个看起来像百分比的小数值normalizePercent/normalizeSidebarPx会先将其换算为像素再收敛到合法区间防止越界最终注入 Gemini 页面的实际宽度采用clamp(200px, {n}vw, 800px)形式既保留了早期vw百分比的行为又限制在 200px–800px 的物理区间内避免在超宽屏上失控AI Studio 侧则是纯像素区间240px–600px由AI_STUDIO_SIDEBAR_PX常量定义同样在写入前经过clampNumber收敛。3. 存储键、升级路径与旧数据兼容内容脚本启动时会读取geminiSidebarWidth与启用标志两个键具体键名定义在 src/core/types/common.ts 的StorageKeys中区分“从未设置”与“显式关闭”读取时特意不带默认值以便识别键是否存在。对于老用户从未见过启用开关、但此前已自定义过宽度会走自动启用的升级路径只要检测到自定义宽度且无启用标志就自动开启功能并把开关状态写回存储归一化回写若读取到的旧值超出新范围会先归一化再回写存储保证新旧版本数据一致存储变更监听chrome.storage.onChanged监听器负责在弹窗调整时实时重新注入样式或在该功能被关闭时移除样式。4. 兼容性细节点击穿透与侧边栏切换守卫加宽侧边栏会带来一个隐蔽问题Gemini 的top-bar-actions等顶部操作层在侧边栏位移后可能覆盖住真实控件。内容脚本在注入的样式中针对bard-mode-switcher、top-bar-actions等容器设置了精细的pointer-events白名单——容器整体穿透但其中的按钮、链接、输入框、search-nav-button、side-nav-sparkle-button、side-nav-menu-button等真实可交互控件仍保持可点击并用z-index保证它们位于顶层。此外脚本还实现了侧边栏切换点击守卫setupSidebarToggleHitGuard当用户在捕获阶段点击了侧边栏切换按钮的区域、却被覆盖层拦截时守卫会通过document.elementsFromPoint判断真实目标阻止默认行为并手动调用真实切换按钮的click()确保加宽后依然能正常展开/收起侧边栏。这些细节均有测试用例覆盖见 sidebarWidthCentering.test.ts。相关测试与持续维护该功能配套了完整的单元测试sidebarWidthCentering.test.ts与弹窗层测试PopupLayoutSettings.test.tsx、usePopupLayoutSettings.test.tsx覆盖样式注入的指针事件白名单不会波及所有mode-switcher后代顶部操作层保持透明的同时搜索按钮仍可点击被覆盖层拦截的侧边栏切换点击会正确转发到真实按钮常规侧边栏按钮如“新建对话”不会被误判为切换按钮。测试通过直接读取注入样式的源码文本断言关键选择器与!important规则存在这保证了后续维护时不会破坏与 Gemini 页面 DOM 结构的契约。常见问题与使用建议侧边栏宽度与“自动隐藏”类设置的关系弹窗的布局区域中还有“侧边栏自动隐藏”等行为开关见 PopupLayoutSettings.tsx它们与宽度调整互相独立、可叠加使用可按需组合出适合自己的布局宽度设置没生效请确认弹窗中侧边栏宽度的启用开关处于打开状态——若开关关闭内容脚本不会注入任何样式调整后新值会通过存储监听实时应用若遇到个别页面未即时刷新刷新一次页面即可关于各语言文档本指南基于阿拉伯语文档 docs/ar/guide/sidebar.md 与英文文档 docs/en/guide/sidebar.md 编写其余语言版本可在docs/{zh,ja,es,fr,pt,ru,ko,zh_TW}/guide/目录下找到对应译文。掌握侧边栏宽度调整后你可以在 Gemini 与 AI Studio 中自由权衡“信息密度”与“专注空间”让 Voyager 的文件夹管理、会话组织等功能在真正舒适的界面宽度下工作。赞分享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点击查看免费下载相关推荐快速上手flexivit_large.600ep_in1k5分钟实现Top-5图像分类预测快速上手flexivit_large.600ep_in1k5分钟实现Top 5图像分类预测 想要在5分钟内快速部署一个强大的图像分类模型吗flexivit_Lynx 侧边栏布局实战固定宽度侧栏 Flex 弹性主区的完整实现与原理剖析Lynx 侧边栏布局实战固定宽度侧栏 Flex 弹性主区的完整实现与原理剖析 本文以 Lynx API 文档中「侧边栏 主内容区」布局示例 side跨平台移动开发前端桌面应用Vidstack Player高级定制技巧从样式到交互的完全掌控Vidstack Player高级定制技巧从样式到交互的完全掌控 Vidstack Player是一款功能强大的现代化媒体播放器框架它提供了丰富的定制选项上一篇多目标优化终极指南用DEAP实现NSGA-II与NSGA-III算法下一篇FastAPI 用 TestClient 测 WebSocket 端点实战从最小例子到避坑指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考