YouTube ImprovedTube扩展中进度条颜色自定义失效的技术分析

问题背景

近期YouTube正在进行A/B测试的新UI界面中，部分用户账户被随机选中体验包含渐变进度条的新设计。该设计采用红-品红渐变样式，导致ImprovedTube浏览器扩展中自定义进度条颜色的功能失效（仅保留进度条圆点可自定义）。此问题属于YouTube服务端变更引发的兼容性问题，需要从实验性标志和CSS覆盖两个维度进行技术修复。

技术原理分析

实验性标志影响

通过对比登录/未登录状态的yt.config_.EXPERIMENT_FLAGS配置，确认以下实验标志与UI变更强相关：

• enable_cairo_refresh_web
• enable_cairo_refresh_signature_moments_web
• enable_cairo_refresh_ringo2_web
• ab_det_apb_b

这些标志激活后会注入新的CSS样式表，其中包含对进度条的渐变定义。值得注意的是，该特性仅对登录用户生效，说明YouTube通过账户系统控制实验分组。

CSS样式覆盖层级

新UI采用CSS渐变属性重构了进度条样式，例如：

.ytp-play-progress {
  background: linear-gradient(to right, #FF0000, #FF00FF);
}

由于YouTube样式表加载顺序晚于扩展注入的样式，导致自定义颜色被覆盖。但进度条圆点(.ytp-scrubber-button)因选择器特殊性保留扩展设置。

解决方案建议

临时应对措施

1. 实验标志覆写
   通过uBlock Origin等工具注入JS代码强制关闭实验标志：

   Object.defineProperty(yt.config_, 'EXPERIMENT_FLAGS', {
     writable: true,
     value: { ...yt.config_.EXPERIMENT_FLAGS, enable_cairo_refresh_web: false }
   });
   

2. CSS优先级提升
   在扩展中增加!important声明覆盖YouTube默认样式：

   .ytp-play-progress {
     background: var(--custom-color) !important;
     background-image: none !important;
   }
   

长期兼容方案

建议ImprovedTube扩展实现以下改进：

1. 动态检测实验标志状态
2. 根据标志状态切换CSS注入策略
3. 增加对渐变进度条的样式支持（如允许用户自定义渐变颜色）

影响范围

该问题同时影响：

• 视频播放页进度条
• 已观看视频的缩略图进度条
• 全屏模式下的控制条

目前YouTube尚未全面推送该UI变更，但开发者应提前做好兼容性适配。对于普通用户，建议暂时通过CSS注入工具手动覆盖样式，或等待扩展官方更新。