浏览器扩展开发：正确访问和修改网页CSS样式表

// 遍历文档中所有的CSSStyleSheet对象
for (let i = 0; i < document.styleSheets.length; i++) {
  const sheet = document.styleSheets[i];
  console.log(`样式表 ${i}:`, sheet.href || '内联样式表');

  // 进一步处理每个样式表
  // ...
}

function processStyleSheet(sheet) {
  try {
    const ruleList = sheet.cssRules; // 获取样式表中的所有CSS规则
    if (!ruleList) {
      console.warn('无法访问样式表规则或样式表为空:', sheet.href || '内联样式表');
      return;
    }

    for (let j = 0; j < ruleList.length; j++) {
      const rule = ruleList[j];
      console.log(`规则 ${j}:`, rule.cssText); // 打印规则的完整CSS文本

      // 根据规则类型进行处理
      if (rule instanceof CSSStyleRule) {
        // 这是一个普通的样式规则，如 'div { color: red; }'
        console.log('选择器:', rule.selectorText);
        console.log('样式声明:', rule.style.cssText);
        // 进一步处理CSS自定义属性
        findAndLogCssVariables(rule.style);
      } else if (rule instanceof CSSMediaRule) {
        // 这是一个媒体查询规则，如 '@media screen {}'
        console.log('媒体查询:', rule.media.mediaText);
        // 可以递归处理媒体查询内的规则
        for (let k = 0; k < rule.cssRules.length; k++) {
          const innerRule = rule.cssRules[k];
          if (innerRule instanceof CSSStyleRule) {
            console.log('  媒体查询内选择器:', innerRule.selectorText);
            findAndLogCssVariables(innerRule.style);
          }
        }
      }
      // 其他规则类型如 CSSKeyframesRule, CSSFontFaceRule 等
    }
  } catch (e) {
    // 捕获可能出现的SecurityError
    console.error('处理样式表时出错:', sheet.href || '内联样式表', e);
  }
}

// 示例：处理第一个样式表
if (document.styleSheets.length > 0) {
  processStyleSheet(document.styleSheets[0]);
}

/**
 * 查找并记录CSSStyleDeclaration中的所有CSS自定义属性（变量）
 * @param {CSSStyleDeclaration} styleDeclaration
 */
function findAndLogCssVariables(styleDeclaration) {
  for (let i = 0; i < styleDeclaration.length; i++) {
    const propName = styleDeclaration[i];
    // CSS自定义属性以 '--' 开头
    if (propName.startsWith('--')) {
      const propValue = styleDeclaration.getPropertyValue(propName).trim();
      console.log(`  CSS变量: ${propName} = ${propValue}`);

      // 示例：如果变量是颜色，可以进一步处理或修改
      // if (propValue.startsWith('#') || propValue.startsWith('rgb') || propValue.startsWith('hsl')) {
      //   console.log(`    这是一个颜色变量！`);
      //   // 修改变量示例：
      //   // styleDeclaration.setProperty(propName, 'red');
      // }
    }
  }
}

// 完整示例函数：获取所有颜色变量
async function getColorVariablesFromDocument() {
  const colorVariables = {};

  for (let i = 0; i < document.styleSheets.length; i++) {
    const sheet = document.styleSheets[i];
    try {
      const ruleList = sheet.cssRules;
      if (!ruleList) continue;

      for (let j = 0; j < ruleList.length; j++) {
        const rule = ruleList[j];

        // 只处理CSSStyleRule和CSSMediaRule（递归）
        if (rule instanceof CSSStyleRule) {
          extractVariablesFromStyleDeclaration(rule.style, colorVariables);
        } else if (rule instanceof CSSMediaRule) {
          for (let k = 0; k < rule.cssRules.length; k++) {
            const innerRule = rule.cssRules[k];
            if (innerRule instanceof CSSStyleRule) {
              extractVariablesFromStyleDeclaration(innerRule.style, colorVariables);
            }
          }
        }
      }
    } catch (e) {
      // 捕获SecurityError等
      console.warn(`无法完全处理样式表 ${sheet.href || '内联样式表'}:`, e);
    }
  }
  return colorVariables;
}

/**
 * 从CSSStyleDeclaration中提取颜色变量
 * @param {CSSStyleDeclaration} styleDeclaration
 * @param {Object} targetObject 存储变量的对象
 */
function extractVariablesFromStyleDeclaration(styleDeclaration, targetObject) {
  for (let i = 0; i < styleDeclaration.length; i++) {
    const propName = styleDeclaration[i];
    if (propName.startsWith('--')) {
      const propValue = styleDeclaration.getPropertyValue(propName).trim();
      // 检查是否为颜色值（简单判断）
      if (propValue.startsWith('#') || propValue.startsWith('rgb') || propValue.startsWith('hsl')) {
        targetObject[propName] = propValue;
      }
    }
  }
}

// 运行示例
(async () => {
  const allColorVariables = await getColorVariablesFromDocument();
  console.log('提取到的所有颜色变量:', allColorVariables);
})();