Voyager 输入区自动折叠Input Collapse为 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 增强套件为 Gemini 提供的一项输入体验优化当输入框为空并失去焦点时整条输入区域会自动收缩成一个紧凑的药丸形按钮把宝贵的对话区域交还给正文阅读点击按钮或按下快捷键即可随时展开继续输入。读完本文你将掌握该功能的完整使用方法、设置面板中每一项开关的确切含义以及它背后的 DOM 定位、CSS 折叠与状态监听实现原理。功能概览在日常阅读或对比长回答时Gemini 页面底部常驻的输入区会占据不小的屏幕空间。Voyager 的 Input Collapse 功能通过“空输入即收起”的策略在你不打字时把输入区压缩为一条居中的小胶囊从而获得更大的阅读面积。其交互逻辑非常简洁当输入区为空且失去焦点时它会自动折叠为一条紧凑的药丸形按钮点击这条药丸按钮即可展开输入区立即开始输入也可以按下Ctrl/⌘I快速展开输入区macOS 使用 ⌘其他平台使用 Ctrl该功能默认关闭可在扩展的设置面板中手动开启或关闭。如何在设置面板中开启该功能在“输入选项”Input Options分组下配置对应设置界面由 src/pages/popup/components/InputSettingsCard.tsx 渲染包含两个开关开关说明默认值Enable input collapse启用输入区折叠开启后空输入区失去焦点会自动折叠关闭Allow collapse with content允许带内容折叠即使输入框内已有文字或附件也允许折叠仅在主开关开启后显示关闭第一个开关下方会附带快捷键提示“{modifier}I to expand”其中 {modifier} 在 macOS 上显示为 ⌘、在其他平台显示为 Ctrl由 getModifierKey 根据运行环境替换对应的界面文案定义在 src/locales/en/messages.json 的enableInputCollapseHint、inputCollapseShortcutHint与inputCollapsePlaceholder等条目中。存储与配置键该功能的开关状态保存在chrome.storage.sync中键名定义于 src/core/types/common.tsgvInputCollapseEnabled功能总开关默认falsegvInputCollapseWhenNotEmpty是否允许在输入非空时折叠默认false。startInputCollapse()在初始化时一次性读取这两个键src/pages/content/inputCollapse/index.ts并监听chrome.storage.onChanged开关被关闭时立即执行cleanup()移除样式与事件开关被打开时按当前子开关状态重新初始化子开关变化时则原地更新无需重新注入。源码实现原理输入区折叠并不是简单地把textarea藏起来而是围绕 Gemini 页面结构做的一次精细的 DOM 编排。实现集中在 src/pages/content/inputCollapse/index.ts主流程如下1. 定位输入区的“视觉根节点”Gemini 的输入框是一个自定义的rich-textarea。代码通过getInputContainer()src/pages/content/inputCollapse/index.ts从该元素沿父链向上遍历最多 8 层借助window.getComputedStyle判断每个祖先是否带有真实背景色非透明且为 flex 布局从而找到那个“带底色、撑满宽度”的视觉容器找不到候选时才回退到rich-textarea的父级或祖父级。2. 判断输入是否为空isInputEmpty()src/pages/content/inputCollapse/index.ts依次查找rich-textarea、textarea或[contenteditabletrue]将内容trim()后判断长度同时会检查是否存在附件区域uploader-file-preview或.file-preview-wrapper一旦有附件即使文本为空也视为“非空”避免误折叠导致附件入口消失。3. 折叠与展开的 CSS 实现injectStyles()src/pages/content/inputCollapse/index.ts注入带gemini-voyager-input-collapseid 的样式表。折叠态类名为gv-input-collapsed它会把容器锁定为48px高、min-width 200px / max-width 600px、border-radius 24px的药丸形状并隐藏除占位元素gv-collapse-placeholder之外的所有后代。占位元素默认display: none仅在折叠态下显示为居中的“Message Gemini”文本加一支铅笔图标同时针对prefers-color-scheme: dark及body[data-themedark]提供了深色配色使用 Material 3 的--gm3-sys-color-surface-container变量。折叠态还设置了cursor: pointer与z-index: 999保证可点击性。4. 时机判定焦点、防抖与页面排除折叠动作由focusout触发但并非立刻执行代码先清理旧定时器再检查焦点是否仍停留在容器内、新焦点是否落在输入相关 UI模型选择器、附件按钮、Material CDK 浮层等见isInputRelatedElement()的.cdk-overlay-container、[rolecombobox]、[data-test-id*attachment]等选择器清单确认无误后才在 100ms 延迟后调用tryCollapse()src/pages/content/inputCollapse/index.ts折叠tryCollapse内部还有 150ms 的二段延迟兜底。同时两个页面白名单避免自动折叠造成困扰shouldDisableAutoCollapse()src/pages/content/inputCollapse/index.ts首页或新建会话页/app、/u/num/app正则^\/(?:u\/\d\/)?app\/?$Gems 编辑器页/gems/create、/gems/edit/*。在这些页面上输入区保持展开状态。SPA 导航浏览器前进/后退的popstate与 DOM 变更则由MutationObserver100ms 防抖兜底监听每次重新渲染后自动重新绑定事件并追加占位元素。5. 快捷键与拖拽细节键盘处理位于捕获阶段capture: true确保优先于页面其他处理器Esc当焦点在输入区时立即折叠走collapseInput()的即时路径跳过延迟Ctrl/⌘I仅在输入区已折叠时生效展开后自动聚焦编辑器并把光标移到内容末尾moveCursorToEndOfElement使用 Range API 实现。此外监听dragenter事件当拖入的文件包含Files类型时若输入区处于折叠态会自动展开保证拖拽上传不被折叠状态阻断。6. 动态开关与资源清理所有事件监听都挂在同一个AbortController的signal上cleanup()src/pages/content/inputCollapse/index.ts会取消定时器、abort 全部监听、移除样式与折叠类、断开 MutationObserver实现零残留设置面板中的语言切换也会通过browser.storage.onChanged监听同步更新占位文本。测试与验证该功能配有完整的单元测试 src/pages/content/inputCollapse/tests/inputCollapse.test.ts覆盖以下行为功能关闭时不注入任何样式空输入失焦后折叠、带内容失焦不折叠默认行为“允许带内容折叠”开启后即使有内容也折叠且内容完整保留、点击可恢复折叠后点击即展开设置面板中关闭开关后功能动态失效不再触发折叠。测试通过 mockchrome.storage与webextension-polyfill并借助MutationObserver回调与假定时器fake timers精确推进 100ms/150ms 的防抖与延迟窗口验证了时机逻辑的正确性。使用建议与注意事项该功能针对 Gemini 页面设计getInputContainer()依赖rich-textarea这一 Gemini 专有元素因此在 Claude、ChatGPT 等站点上不会生效首页、新建会话页与 Gems 编辑器页会强制保持展开避免干扰起始体验若希望“连已有草稿也收起来”请同时开启“Allow collapse with content”否则输入非空时失焦不会折叠折叠后输入内容不会被清空占位元素只是视觉上的替身展开即可继续编辑。开启 Input Collapse 后阅读长回答时的可视面积显著提升而输入动作几乎不受影响——点击药丸或 ⌘/CtrlI 即可一键回到输入状态这正是 Voyager 在细节上提升 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考