掌握CSS样式表：在Web页面和Chrome扩展中高效访问与修改样式规则

// 获取页面上所有样式表
const styleSheets = document.styleSheets;

console.log(`页面共有 ${styleSheets.length} 个样式表。`);

// 遍历并打印每个样式表的URL或标题
for (let i = 0; i < styleSheets.length; i++) {
  const sheet = styleSheets[i];
  console.log(`样式表 ${i}:`);
  console.log(`  href: ${sheet.href || '内联/无链接'}`);
  console.log(`  title: ${sheet.title || '无标题'}`);
}

/**
 * 遍历所有样式表和规则，提取CSS变量。
 * @returns {Object} 包含所有CSS变量名称和值的对象。
 */
async function getColorVariablesFromDocument() {
  const colorVariables = {};
  const styleSheets = document.styleSheets;

  for (let i = 0; i < styleSheets.length; i++) {
    const sheet = styleSheets[i];

    // 尝试访问cssRules，可能会因跨域安全限制而失败
    try {
      const ruleList = sheet.cssRules;
      for (let j = 0; j < ruleList.length; j++) {
        const rule = ruleList[j];

        // 检查是否为CSSStyleRule (例如：div { color: red; })
        if (rule instanceof CSSStyleRule) {
          const styleDeclaration = rule.style;

          // 遍历样式声明中的所有属性
          for (let k = 0; k < styleDeclaration.length; k++) {
            const propertyName = styleDeclaration[k]; // 获取属性名
            // 检查是否为CSS变量 (以'--'开头)
            if (propertyName.startsWith('--')) {
              const propertyValue = styleDeclaration.getPropertyValue(propertyName);
              // 进一步筛选颜色变量 (可选)
              if (propertyValue.startsWith('#') || propertyValue.startsWith('rgb') || propertyValue.startsWith('hsl')) {
                colorVariables[propertyName] = propertyValue;
              }
            }
          }
        }
        // 也可以处理其他类型的规则，例如CSSMediaRule
        // if (rule instanceof CSSMediaRule) {
        //   // 递归处理媒体查询内的规则
        // }
      }
    } catch (e) {
      // 捕获因跨域样式表访问cssRules引起的SecurityError
      console.warn(`无法访问样式表 ${sheet.href || '内联'} 的规则:`, e.message);
    }
  }
  return colorVariables;
}

// 示例调用
getColorVariablesFromDocument().then(variables => {
  console.log("提取到的颜色变量:", variables);
});

/**
 * 查找并修改页面中的CSS变量。
 * @param {string} variableName - 要修改的CSS变量名 (例如 '--primary-color')。
 * @param {string} newValue - 变量的新值。
 * @param {HTMLElement} [targetElement=document.documentElement] - 变量定义的目标元素，默认为文档根元素。
 */
function setCssVariable(variableName, newValue, targetElement = document.documentElement) {
  if (!variableName.startsWith('--')) {
    console.warn(`CSS变量名应以'--'开头。尝试修改: ${variableName}`);
    variableName = `--${variableName}`; // 尝试修正
  }
  targetElement.style.setProperty(variableName, newValue);
  console.log(`已将 ${variableName} 设置为 ${newValue}。`);
}

// 示例：将YouTube的主题颜色从深色切换为浅色（假设存在这些变量）
// 首先，尝试从页面中获取当前的CSS变量
getColorVariablesFromDocument().then(variables => {
    console.log("当前页面颜色变量:", variables);

    // 假设YouTube使用类似--yt-spec-brand-background的变量
    // 这只是一个示例，实际变量名可能不同
    if (variables['--yt-spec-brand-background']) {
        console.log("发现YouTube品牌背景变量，尝试修改...");
        setCssVariable('--yt-spec-brand-background', '#f0f0f0'); // 浅灰色背景
        setCssVariable('--yt-spec-text-primary', '#333333'); // 深色文字
        // 刷新页面或等待DOM更新，观察效果
    } else {
        console.log("未发现预期的YouTube颜色变量，可能需要进一步分析或手动插入样式。");
        // 如果没有找到现有变量，也可以直接在:root上设置新的变量
        // 或者通过chrome.scripting.insertCSS注入新的样式规则
    }
});