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、Claude 与 ChatGPT 的浏览器增强套件其中聊天字体大小功能允许用户将 Gemini 对话区域的字体在80% 到 150%之间自由缩放满足不同阅读偏好。本文基于官方文档 chat-font-size.md 并深入仓库源码完整讲解该功能的使用方法、CSS 注入原理、代码块等比缩放机制、存储与实时同步链路帮助读者既会操作、也懂原理。功能简介每个人的阅读习惯不同有人喜欢紧凑的小字号以提升信息密度有人偏好更大的字号以缓解长时间阅读的眼部疲劳。Voyager 的聊天字体大小功能正是为此设计——用户可以在80% 到 150%的范围内调节 Gemini 聊天区域的字体大小让文字大小与个人视觉习惯精确匹配。该功能的定位与聊天宽度CHAT_PERCENT、聊天间距chatLineHeight等一同归属于 Voyager 弹窗设置中的布局类目PopupLayoutSettings.tsx是聊天界面自定义能力的一部分。注意官方文档中标注该功能为Coming Soon即将上线将在下一个版本中提供请留意版本更新公告。核心特性根据文档描述该功能包含四大核心特性特性说明灵活范围支持 80%–150% 的字体大小调节覆盖绝大多数阅读需求全面覆盖同时作用于用户消息与模型回复涵盖正文、列表、表格与代码块代码块优化代码块字体自动按比例缩小正文 × 0.875保持代码与正文之间的视觉层级即时生效调整立即生效无需刷新页面这些特性并非文档宣传语而是可以在源码中找到一一对应的实现证据详见下文。使用方法操作入口与步骤非常简单全部在 Voyager 的弹窗popup设置面板中完成打开 Voyager 设置面板弹窗。找到Chat font size聊天字体大小设置项并开启开关enabled。拖动滑块调整字体大小百分比——页面会实时预览变化。在弹窗 UI 中该设置项通过WidthSlider组件渲染PopupLayoutSettings.tsx滑块步进为5%两端标签分别显示 Small小与 Large大对应的国际化文案定义在 en/messages.jsonchatFontSize、chatFontSizeSmall、chatFontSizeLarge并同步翻译至 zh、ru、ja、ko 等全部 10 种语言。参数范围与默认值滑块的范围、步长与默认值定义在弹窗侧的配置常量中layoutSettings.tsexport const CHAT_FONT_SIZE { min: 80, max: 150, defaultValue: 100 };参数值说明min80最小缩放百分比80%max150最大缩放百分比150%defaultValue100默认值即保持 Gemini 原始字体大小滑块step5每次拖动的最小刻度见 PopupLayoutSettings.tsx滑块的每一次变化都会经由useWidthAdjuster的onApply回调写入浏览器同步存储usePopupLayoutSettings.tsconst chatFontSizeAdjuster useWidthAdjuster({ storageKey: StorageKeys.CHAT_FONT_SIZE, // gvChatFontSize defaultValue: CHAT_FONT_SIZE.defaultValue, // 100 normalize: (v) clampNumber(v, CHAT_FONT_SIZE.min, CHAT_FONT_SIZE.max), onApply: useCallback((value: number) { const clamped clampNumber(value, CHAT_FONT_SIZE.min, CHAT_FONT_SIZE.max); chrome.storage?.sync?.set({ [StorageKeys.CHAT_FONT_SIZE]: clamped }); }, []), });存储键在 common.ts 的StorageKeys枚举中集中定义// UI customization CHAT_WIDTH: geminiChatWidth, CHAT_WIDTH_ENABLED: gvChatWidthEnabled, CHAT_FONT_SIZE: gvChatFontSize, CHAT_FONT_SIZE_ENABLED: gvChatFontSizeEnabled,底层实现CSS 动态注入聊天气泡内的字体调整由一个独立的内容脚本模块负责src/pages/content/chatFontSize/index.ts。该模块在页面加载时通过 content/index.tsx 中的startChatFontSizeAdjuster()启动。1. 边界钳制Clamp模块内定义了完整的边界常量与归一化逻辑chatFontSize/index.tsconst STYLE_ID gemini-voyager-chat-font-size; const DEFAULT_PERCENT 100; const MIN_PERCENT 80; const MAX_PERCENT 150; const clampPercent (value, min, max) Math.min(max, Math.max(min, Math.round(value))); const normalizePercent (value, fallback) { if (!Number.isFinite(value)) return fallback; return clampPercent(value, MIN_PERCENT, MAX_PERCENT); };任何来源的数值包括存储中的脏数据都会先经过 80–150 的钳制与四舍五入再生成 CSS。2. 生成样式规则applyFontSize(percent)动态创建一个style idgemini-voyager-chat-font-size元素注入页面head并按三大类选择器分组写入规则用户消息Gemini 会在这些元素上直接设置字体大小因此需要!important覆盖.query-text, .query-text-line, user-query-content .gds-body-l, user-query .gds-body-l, .user-query-bubble-with-background .gds-body-l, div[aria-labelUser message] .gds-body-l, [data-message-author-roleuser] .gds-body-l { font-size: percent% !important; line-height: 1.6 !important; }模型回复覆盖多套 Markdown 容器类名兼顾新旧页面结构message-content, .response-content, model-response .markdown, model-response .markdown-main-panel, .model-response .markdown, .response-container .markdown, .presented-response-container .markdown, [data-message-author-roleassistant] .markdown, [data-message-author-rolemodel] .markdown { font-size: percent% !important; line-height: 1.6 !important; }正文块级元素段落、列表项、表格单元格可能自带字号需一并覆盖model-response p, model-response li, model-response td, model-response th, .model-response p, .model-response li, .model-response td, .model-response th, message-content p, message-content li, message-content td, message-content th { font-size: percent% !important; line-height: 1.6 !important; }可以看到与文档全面覆盖正文、列表、表格的描述完全对应。3. 代码块等比缩放× 0.875文档强调的代码块自动缩小特性在源码中体现为calc(percent% * 0.875)chatFontSize/index.tsmodel-response code, model-response pre, .model-response code, .model-response pre, message-content code, message-content pre, .code-container, .formatted-code-block-internal-container pre, .formatted-code-block-internal-container code { font-size: calc(percent% * 0.875) !important; line-height: 1.5 !important; }举例当正文设置为 120% 时代码块字号为120% × 0.875 105%始终略小于正文从而在缩放的同时维持代码 正文的视觉层级避免大字号下代码反客为主。这也是文档中 0.875 系数body font × 0.875的精确实现。实时同步从弹窗到页面的完整链路即时生效、无需刷新由 storage 监听机制保障。其完整链路为弹窗滑块拖动 → onApply 写入 chrome.storage.sync (gvChatFontSize) → chrome.storage.onChanged 触发内容脚本回调 → 重新调用 applyFontSize() 更新 style 文本 → 页面即时刷新关键代码位于 chatFontSize/index.ts 的startChatFontSizeAdjuster()启动时读取gvChatFontSize与gvChatFontSizeEnabled两个键若已启用则立即注入样式若存储值超出范围还会回写归一化结果运行期间注册chrome.storage.onChanged监听器仅响应sync区域当gvChatFontSizeEnabled切换为关闭时调用removeStyles()移除样式节点、完全还原 Gemini 原始外观当gvChatFontSize变化时重新生成样式页面卸载时通过beforeunload清理样式节点与监听器避免资源泄漏。关闭功能时会执行 removeStyles直接删除#gemini-voyager-chat-font-size样式节点实现零残留还原。测试验证该模块配套了完整的 Vitest 单元测试chatFontSize.test.ts覆盖了文档承诺的全部行为测试用例验证内容applies font-size styles when enabled启用时注入font-size: 120% !important样式does not inject styles when disabled关闭时不注入任何样式updates font size when storage value changes存储值 120→140 时样式实时更新为 140%removes styles when toggled off开关关闭后样式节点被移除clamps values to min/max range存储值 200 被钳制为最大值 150targets inner text elements for user and model responses用户消息与模型回复的选择器均被注入例如边界钳制用例当存储中写入 200 时测试断言最终生成的样式为font-size: 150% !importantchatFontSize.test.ts证明 80–150 的硬边界在内容脚本侧同样生效与弹窗侧clampNumber构成双保险。常见问题Q1调节后没有生效请先确认弹窗中的 Chat font size 开关已开启该功能依赖gvChatFontSizeEnabled为true才注入样式对应测试 does not inject styles when disabled。同时确认当前页面为 Gemini 聊天页样式选择器面向 Gemini 的query-text、model-response .markdown等 DOM 结构。Q2为什么代码块看起来比正文小这是有意设计。代码块字号始终为正文的 0.875 倍calc(percent% * 0.875)目的是在任意缩放比例下维持代码与散文的视觉层级。Q3为什么最小只能调到 80%、最大只能到 150%因为内容脚本的MIN_PERCENT/MAX_PERCENT与弹窗侧CHAT_FONT_SIZE.min/max都定义为 80/150超出范围的存储值会被钳制并归一化回写因此不会出现越界字号。Q4调整会影响哪些页面元素用户消息正文.query-text等、模型回复 Markdown 正文.markdown/.markdown-main-panel、段落/列表/表格以及代码块均被覆盖输入框、侧边栏等其他区域不受影响。延伸阅读功能总览与更多聊天布局调节项详见 布局设置源码包含聊天宽度、聊天间距、段落间距等同类滑块存储键定义StorageKeys 枚举国际化文案en/messages.json及 ru/messages.json、zh/messages.json 等 10 种语言官方使用指南即将上线功能的说明chat-font-size.md英文、chat-font-size.md俄文。赞分享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 对话自定义 80%–150% 阅读字号Voyager 聊天区字体大小调节全指南为 Gemini 对话自定义 80%–150% 阅读字号 Voyager Gemini 增强套件 https://lAI 应用前端Gemini Voyager 文件夹功能完全指南为 AI 对话构建专属组织体系Gemini Voyager 文件夹功能完全指南为 AI 对话构建专属组织体系 Gemini Voyager 为 Gemini 与 AI Studio 带来了AI 应用前端Kimchi网络配置终极教程从NAT到桥接网络的完整方案Kimchi网络配置终极教程从NAT到桥接网络的完整方案 Kimchi作为一款基于HTML5的KVM管理界面提供了直观的网络配置功能支持从简单NAT到复杂虚拟化后端上一篇终极macOS光标定制指南Mousecape让鼠标指针个性化变得简单快速下一篇C开发者成长路线图全解析从入门到进阶的系统指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Voyager 聊天字体大小调节功能全解析：80%–150% 灵活缩放 Gemini 对话文本
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、Claude 与 ChatGPT 的浏览器增强套件其中聊天字体大小功能允许用户将 Gemini 对话区域的字体在80% 到 150%之间自由缩放满足不同阅读偏好。本文基于官方文档 chat-font-size.md 并深入仓库源码完整讲解该功能的使用方法、CSS 注入原理、代码块等比缩放机制、存储与实时同步链路帮助读者既会操作、也懂原理。功能简介每个人的阅读习惯不同有人喜欢紧凑的小字号以提升信息密度有人偏好更大的字号以缓解长时间阅读的眼部疲劳。Voyager 的聊天字体大小功能正是为此设计——用户可以在80% 到 150%的范围内调节 Gemini 聊天区域的字体大小让文字大小与个人视觉习惯精确匹配。该功能的定位与聊天宽度CHAT_PERCENT、聊天间距chatLineHeight等一同归属于 Voyager 弹窗设置中的布局类目PopupLayoutSettings.tsx是聊天界面自定义能力的一部分。注意官方文档中标注该功能为Coming Soon即将上线将在下一个版本中提供请留意版本更新公告。核心特性根据文档描述该功能包含四大核心特性特性说明灵活范围支持 80%–150% 的字体大小调节覆盖绝大多数阅读需求全面覆盖同时作用于用户消息与模型回复涵盖正文、列表、表格与代码块代码块优化代码块字体自动按比例缩小正文 × 0.875保持代码与正文之间的视觉层级即时生效调整立即生效无需刷新页面这些特性并非文档宣传语而是可以在源码中找到一一对应的实现证据详见下文。使用方法操作入口与步骤非常简单全部在 Voyager 的弹窗popup设置面板中完成打开 Voyager 设置面板弹窗。找到Chat font size聊天字体大小设置项并开启开关enabled。拖动滑块调整字体大小百分比——页面会实时预览变化。在弹窗 UI 中该设置项通过WidthSlider组件渲染PopupLayoutSettings.tsx滑块步进为5%两端标签分别显示 Small小与 Large大对应的国际化文案定义在 en/messages.jsonchatFontSize、chatFontSizeSmall、chatFontSizeLarge并同步翻译至 zh、ru、ja、ko 等全部 10 种语言。参数范围与默认值滑块的范围、步长与默认值定义在弹窗侧的配置常量中layoutSettings.tsexport const CHAT_FONT_SIZE { min: 80, max: 150, defaultValue: 100 };参数值说明min80最小缩放百分比80%max150最大缩放百分比150%defaultValue100默认值即保持 Gemini 原始字体大小滑块step5每次拖动的最小刻度见 PopupLayoutSettings.tsx滑块的每一次变化都会经由useWidthAdjuster的onApply回调写入浏览器同步存储usePopupLayoutSettings.tsconst chatFontSizeAdjuster useWidthAdjuster({ storageKey: StorageKeys.CHAT_FONT_SIZE, // gvChatFontSize defaultValue: CHAT_FONT_SIZE.defaultValue, // 100 normalize: (v) clampNumber(v, CHAT_FONT_SIZE.min, CHAT_FONT_SIZE.max), onApply: useCallback((value: number) { const clamped clampNumber(value, CHAT_FONT_SIZE.min, CHAT_FONT_SIZE.max); chrome.storage?.sync?.set({ [StorageKeys.CHAT_FONT_SIZE]: clamped }); }, []), });存储键在 common.ts 的StorageKeys枚举中集中定义// UI customization CHAT_WIDTH: geminiChatWidth, CHAT_WIDTH_ENABLED: gvChatWidthEnabled, CHAT_FONT_SIZE: gvChatFontSize, CHAT_FONT_SIZE_ENABLED: gvChatFontSizeEnabled,底层实现CSS 动态注入聊天气泡内的字体调整由一个独立的内容脚本模块负责src/pages/content/chatFontSize/index.ts。该模块在页面加载时通过 content/index.tsx 中的startChatFontSizeAdjuster()启动。1. 边界钳制Clamp模块内定义了完整的边界常量与归一化逻辑chatFontSize/index.tsconst STYLE_ID gemini-voyager-chat-font-size; const DEFAULT_PERCENT 100; const MIN_PERCENT 80; const MAX_PERCENT 150; const clampPercent (value, min, max) Math.min(max, Math.max(min, Math.round(value))); const normalizePercent (value, fallback) { if (!Number.isFinite(value)) return fallback; return clampPercent(value, MIN_PERCENT, MAX_PERCENT); };任何来源的数值包括存储中的脏数据都会先经过 80–150 的钳制与四舍五入再生成 CSS。2. 生成样式规则applyFontSize(percent)动态创建一个style idgemini-voyager-chat-font-size元素注入页面head并按三大类选择器分组写入规则用户消息Gemini 会在这些元素上直接设置字体大小因此需要!important覆盖.query-text, .query-text-line, user-query-content .gds-body-l, user-query .gds-body-l, .user-query-bubble-with-background .gds-body-l, div[aria-labelUser message] .gds-body-l, [data-message-author-roleuser] .gds-body-l { font-size: percent% !important; line-height: 1.6 !important; }模型回复覆盖多套 Markdown 容器类名兼顾新旧页面结构message-content, .response-content, model-response .markdown, model-response .markdown-main-panel, .model-response .markdown, .response-container .markdown, .presented-response-container .markdown, [data-message-author-roleassistant] .markdown, [data-message-author-rolemodel] .markdown { font-size: percent% !important; line-height: 1.6 !important; }正文块级元素段落、列表项、表格单元格可能自带字号需一并覆盖model-response p, model-response li, model-response td, model-response th, .model-response p, .model-response li, .model-response td, .model-response th, message-content p, message-content li, message-content td, message-content th { font-size: percent% !important; line-height: 1.6 !important; }可以看到与文档全面覆盖正文、列表、表格的描述完全对应。3. 代码块等比缩放× 0.875文档强调的代码块自动缩小特性在源码中体现为calc(percent% * 0.875)chatFontSize/index.tsmodel-response code, model-response pre, .model-response code, .model-response pre, message-content code, message-content pre, .code-container, .formatted-code-block-internal-container pre, .formatted-code-block-internal-container code { font-size: calc(percent% * 0.875) !important; line-height: 1.5 !important; }举例当正文设置为 120% 时代码块字号为120% × 0.875 105%始终略小于正文从而在缩放的同时维持代码 正文的视觉层级避免大字号下代码反客为主。这也是文档中 0.875 系数body font × 0.875的精确实现。实时同步从弹窗到页面的完整链路即时生效、无需刷新由 storage 监听机制保障。其完整链路为弹窗滑块拖动 → onApply 写入 chrome.storage.sync (gvChatFontSize) → chrome.storage.onChanged 触发内容脚本回调 → 重新调用 applyFontSize() 更新 style 文本 → 页面即时刷新关键代码位于 chatFontSize/index.ts 的startChatFontSizeAdjuster()启动时读取gvChatFontSize与gvChatFontSizeEnabled两个键若已启用则立即注入样式若存储值超出范围还会回写归一化结果运行期间注册chrome.storage.onChanged监听器仅响应sync区域当gvChatFontSizeEnabled切换为关闭时调用removeStyles()移除样式节点、完全还原 Gemini 原始外观当gvChatFontSize变化时重新生成样式页面卸载时通过beforeunload清理样式节点与监听器避免资源泄漏。关闭功能时会执行 removeStyles直接删除#gemini-voyager-chat-font-size样式节点实现零残留还原。测试验证该模块配套了完整的 Vitest 单元测试chatFontSize.test.ts覆盖了文档承诺的全部行为测试用例验证内容applies font-size styles when enabled启用时注入font-size: 120% !important样式does not inject styles when disabled关闭时不注入任何样式updates font size when storage value changes存储值 120→140 时样式实时更新为 140%removes styles when toggled off开关关闭后样式节点被移除clamps values to min/max range存储值 200 被钳制为最大值 150targets inner text elements for user and model responses用户消息与模型回复的选择器均被注入例如边界钳制用例当存储中写入 200 时测试断言最终生成的样式为font-size: 150% !importantchatFontSize.test.ts证明 80–150 的硬边界在内容脚本侧同样生效与弹窗侧clampNumber构成双保险。常见问题Q1调节后没有生效请先确认弹窗中的 Chat font size 开关已开启该功能依赖gvChatFontSizeEnabled为true才注入样式对应测试 does not inject styles when disabled。同时确认当前页面为 Gemini 聊天页样式选择器面向 Gemini 的query-text、model-response .markdown等 DOM 结构。Q2为什么代码块看起来比正文小这是有意设计。代码块字号始终为正文的 0.875 倍calc(percent% * 0.875)目的是在任意缩放比例下维持代码与散文的视觉层级。Q3为什么最小只能调到 80%、最大只能到 150%因为内容脚本的MIN_PERCENT/MAX_PERCENT与弹窗侧CHAT_FONT_SIZE.min/max都定义为 80/150超出范围的存储值会被钳制并归一化回写因此不会出现越界字号。Q4调整会影响哪些页面元素用户消息正文.query-text等、模型回复 Markdown 正文.markdown/.markdown-main-panel、段落/列表/表格以及代码块均被覆盖输入框、侧边栏等其他区域不受影响。延伸阅读功能总览与更多聊天布局调节项详见 布局设置源码包含聊天宽度、聊天间距、段落间距等同类滑块存储键定义StorageKeys 枚举国际化文案en/messages.json及 ru/messages.json、zh/messages.json 等 10 种语言官方使用指南即将上线功能的说明chat-font-size.md英文、chat-font-size.md俄文。赞分享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 对话自定义 80%–150% 阅读字号Voyager 聊天区字体大小调节全指南为 Gemini 对话自定义 80%–150% 阅读字号 Voyager Gemini 增强套件 https://lAI 应用前端Gemini Voyager 文件夹功能完全指南为 AI 对话构建专属组织体系Gemini Voyager 文件夹功能完全指南为 AI 对话构建专属组织体系 Gemini Voyager 为 Gemini 与 AI Studio 带来了AI 应用前端Kimchi网络配置终极教程从NAT到桥接网络的完整方案Kimchi网络配置终极教程从NAT到桥接网络的完整方案 Kimchi作为一款基于HTML5的KVM管理界面提供了直观的网络配置功能支持从简单NAT到复杂虚拟化后端上一篇终极macOS光标定制指南Mousecape让鼠标指针个性化变得简单快速下一篇C开发者成长路线图全解析从入门到进阶的系统指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考