Overleaf Server Pro项目中浏览器扩展导致空白页面的技术分析

问题现象

在Overleaf Server Pro 4.2.8版本环境中，部分MacOS用户使用Chrome浏览器（版本128.0.6613.120 arm64架构）访问项目时出现空白页面现象。值得注意的是，该问题具有明显的浏览器特异性：

• 仅发生在Chrome浏览器
• Firefox和Safari浏览器工作正常
• 同版本Chrome在其他Apple设备上无法复现

技术排查

通过Chrome开发者工具分析，控制台显示关键错误信息：

1. jQuery 3.4.1.min.js报错：<path> attribute d数值格式异常
2. 过时的meta标签警告：apple-mobile-web-app-capable已被弃用

深入分析发现：

• Overleaf Server Pro 4.2.8实际并未使用jQuery 3.4.1版本
• 错误提示表明有第三方代码注入并干扰了页面渲染

根本原因

经过验证，问题源于Chrome扩展程序"Translate - Translator, Dictionary, TTS"(版本1.4.6)。该扩展存在以下兼容性问题：

1. 注入过时的jQuery版本（3.4.1）
2. 与Overleaf的SVG渲染逻辑产生冲突
3. 导致页面核心JavaScript执行中断

解决方案

1. 临时解决方案：

   • 在Chrome中禁用或移除翻译类扩展
   • 使用浏览器隐身模式（默认不加载扩展）访问

2. 长期建议：

   • 扩展开发者应更新jQuery依赖版本
   • 实现更严格的沙箱隔离机制
   • 避免与富文本编辑类网站的DOM操作冲突

技术启示

该案例典型地展示了浏览器扩展可能带来的副作用：

• 扩展拥有修改页面DOM的高权限
• 老旧的第三方库可能引发兼容性问题
• 错误可能表现出设备/环境特异性 建议开发者在遇到类似问题时：

1. 优先排查浏览器扩展干扰
2. 对比不同浏览器的执行环境差异
3. 关注控制台报错的库版本信息

对于Overleaf这类复杂Web应用，推荐采用以下防御性措施：

• 使用隔离DOM技术保护核心功能区域
• 检测并警告过时的jQuery版本
• 实现扩展冲突时的优雅降级机制