Tampermonkey在Safari 18中的CSS样式污染问题分析与解决方案

问题现象

Tampermonkey作为一款流行的用户脚本管理器，近期在Safari 18浏览器（特别是macOS Sequoia 15 Beta 3及后续版本）中出现了一个严重的渲染问题。当Tampermonkey扩展被设置为"允许访问所有网站"时，其内部CSS样式表会意外泄漏到网页全局环境中，导致多个知名网站出现界面渲染异常。

受影响网站包括但不限于：

• Reddit：导航栏完全消失
• Google：搜索框异常放大，工具栏缺失
• WarcraftLogs：样式表错乱，导致布局对齐和颜色显示问题

问题根源

经过技术分析，该问题源于Safari 18浏览器的一个内部缺陷。当Tampermonkey扩展被授予全局网站访问权限时，浏览器错误地将扩展内部的CSS文件（如style.css和editor.css）注入到了网页的主渲染环境中。这些CSS文件中包含了许多常见类名（如".hide"），当网页恰好使用了相同的类名时，就会导致样式冲突和布局破坏。

临时解决方案

目前可以通过以下步骤暂时解决问题：

1. 打开Safari的扩展管理界面
2. 找到Tampermonkey扩展
3. 将"对于其他网站"的权限从"允许"改为"询问"
4. 对于确实需要运行用户脚本的网站，手动授予访问权限

这种设置方式既能保证Tampermonkey在特定网站上的正常功能，又能避免CSS样式污染其他网站。

技术背景

浏览器扩展通常应该运行在独立的沙盒环境中，其CSS和JavaScript不应影响网页本身的内容。Safari 18的这个bug打破了这一隔离原则，导致扩展资源泄漏到网页上下文中。这种类型的bug在浏览器开发中较为罕见，通常与浏览器内核的资源加载和隔离机制实现有关。

长期展望

苹果已在WebKit引擎中确认并修复了此问题，修复将包含在未来的Safari更新中。目前Safari Technology Preview Release 200版本已经解决了这个问题。建议开发者关注Safari的更新日志，及时升级到修复版本。

对于Tampermonkey开发团队而言，也可以考虑采取一些防御性措施，如为内部CSS类名添加特定前缀（如"tm-"），降低与其他网站样式冲突的可能性，即使未来再次出现类似的浏览器bug，也能减少影响范围。

用户建议

普通用户如果遇到类似问题，可以：

1. 优先尝试更新Safari到最新版本
2. 按照上述临时解决方案调整扩展权限
3. 对于关键业务网站，可暂时使用其他用户脚本管理器作为替代方案
4. 关注Tampermonkey官方渠道获取最新进展信息