Chrome扩展开发：无法访问YouTube的CSSStyleSheet获取颜色变量

你的代码存在两个核心错误，直接导致了rule.cssText返回undefined的问题：

1. 错误将CSS字符串当作CSSStyleSheet对象处理：fetch返回的是纯文本字符串，它并没有cssStyleSheet属性，直接访问会得到undefined，后续遍历逻辑自然无法执行。
2. 不存在cssVariables内置属性：CSSRule对象没有这个原生属性，无法直接通过它获取自定义变量，必须手动解析规则中的--开头的自定义属性。

修正后的代码 #

async function getColorVariables() {
  const colorVariables = {};
  const response = await fetch('https://www.youtube.com/s/desktop/7fca68b5/cssbin/www-main-desktop-watch-page-skeleton.css');
  const cssText = await response.text();

  // 将纯文本CSS解析为可操作的CSSStyleSheet对象
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(cssText);

  // 遍历所有样式规则
  for (const rule of sheet.cssRules) {
    // 仅处理普通样式规则，排除@media、@keyframes等特殊规则
    if (rule instanceof CSSStyleRule) {
      const style = rule.style;
      // 筛选出所有--开头的自定义变量
      const variableNames = Array.from(style).filter(name => name.startsWith('--'));
      
      for (const name of variableNames) {
        const value = style.getPropertyValue(name).trim();
        // 校验是否为颜色值并收集
        if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) {
          colorVariables[name] = value;
        }
      }
    }
  }

  return colorVariables;
}

关键修复点说明 #

• CSS文本转样式表对象：使用CSSStyleSheet构造函数搭配replaceSync方法，将纯文本CSS转换为可遍历操作的样式表对象。
• 过滤有效规则：通过instanceof CSSStyleRule过滤掉媒体查询、动画定义等非普通样式规则，避免无效遍历。
• 手动提取自定义变量：利用rule.style的可迭代特性，筛选出--开头的变量，再通过getPropertyValue获取对应的值。
• 保留颜色校验逻辑：沿用你原有的颜色值判断逻辑，确保只收集符合要求的颜色变量。

额外注意事项 #

• 若在Chrome扩展的content script中运行，需确保已在扩展清单中配置https://www.youtube.com/*的主机权限。
• YouTube的CSS文件路径可能会随版本更新，若后续出现404错误，需要重新获取最新的CSS文件URL。

内容的提问来源于stack exchange，提问作者Oliemanq