JavaScript动态管理CSS：获取与修改CSSStyleSheet规则

async function getColorVariablesWrong() {
  // 错误示范：通过fetch获取CSS文本
  const response = await fetch('https://www.youtube.com/s/desktop/7fca68b5/cssbin/www-main-desktop-watch-page-skeleton.css');
  const stylesheetText = await response.text();
  console.log('Fetched CSS text:', stylesheetText.substring(0, 200) + '...'); // 打印部分文本内容
  // 错误：stylesheetText是一个字符串，不具备cssStyleSheet属性
  const ruleList = stylesheetText.cssStyleSheet; // 这将是undefined
  console.log('Attempted access stylesheetText.cssStyleSheet:', ruleList); // 结果为 undefined
  // 后续操作将因ruleList为undefined而失败
}

// 调用错误示范函数
// getColorVariablesWrong();

/**
 * 获取当前文档中所有可访问的CSSStyleSheet对象
 * @returns {CSSStyleSheet[]} 可访问的样式表数组
 */
function getAccessibleStyleSheets() {
  const accessibleSheets = [];
  for (let i = 0; i < document.styleSheets.length; i++) {
    const sheet = document.styleSheets[i];
    try {
      // 尝试访问cssRules以检查是否可访问。
      // 对于跨域样式表，直接访问cssRules会抛出SecurityError。
      // 对于同源样式表或通过<style>标签定义的样式，这是正确的入口。
      // 我们可以先尝试访问，然后捕获错误。
      if (sheet.cssRules) { // 检查cssRules是否存在且可访问
        accessibleSheets.push(sheet);
      }
    } catch (e) {
      // 捕获跨域安全错误，跳过不可访问的样式表
      if (e.name === 'SecurityError') {
        console.warn('Skipping cross-origin stylesheet due to SecurityError:', sheet.href || 'inline style');
      } else {
        console.error('Error accessing stylesheet:', sheet.href || 'inline style', e);
      }
    }
  }
  return accessibleSheets;
}

const styleSheets = getAccessibleStyleSheets();
console.log('Found accessible stylesheets count:', styleSheets.length);
// 例如，访问第一个样式表并打印其href
if (styleSheets.length > 0) {
  console.log('First accessible stylesheet href:', styleSheets[0].href || 'inline style');
}

/**
 * 遍历指定CSSStyleSheet中的所有CSS规则并打印
 * @param {CSSStyleSheet} styleSheet 要遍历的样式表
 */
function iterateCssRules(styleSheet) {
  try {
    const rules = styleSheet.cssRules;
    if (!rules || rules.length === 0) {
      console.warn('No rules found or accessible for this stylesheet:', styleSheet.href || 'inline style');
      return;
    }
    console.log(`Iterating rules for stylesheet: ${styleSheet.href || 'inline style'}`);
    for (let i = 0; i < rules.length; i++) {
      const rule = rules[i];
      console.log(`  Rule ${i} (Type: ${rule.constructor.name}):`, rule.cssText.substring(0, 100) + '...'); // 打印规则文本

      // 根据规则类型进行进一步处理
      if (rule instanceof CSSStyleRule) {
        // 这是一个普通的CSS样式规则，如 'body { color: red; }'
        console.log('    Selector:', rule.selectorText);
        console.log('    Style Declaration:', rule.style.cssText);
        // 访问和修改具体的样式属性
        // console.log('    Color property:', rule.style.color);
        // rule.style.setProperty('color', 'blue'); // 示例：修改颜色
      } else if (rule instanceof CSSMediaRule) {
        // 这是一个@media规则
        console.log('    Media query:', rule.media.mediaText);
        // 可以递归遍历媒体查询内部的规则
        // console.log('    Inner rules count:', rule.cssRules.length);
        // for (let j = 0; j < rule.cssRules.length; j++) {
        //   console.log('      Inner rule:', rule.cssRules[j].cssText.substring(0, 50) + '...');
        // }
      }
      // 还有其他类型的规则，如CSSKeyframesRule, CSSFontFaceRule等
    }
  } catch (e) {
    if (e.name === 'SecurityError') {
      console.warn('Cannot access rules of cross-origin stylesheet:', styleSheet.href || 'inline style');
    } else {
      console.error('Error iterating rules for stylesheet:', styleSheet.href || 'inline style', e);
    }
  }
}

// 示例：遍历所有可访问样式表的规则
const accessibleSheets = getAccessibleStyleSheets();
if (accessibleSheets.length > 0) {
  accessibleSheets.forEach(sheet => iterateCssRules(sheet));
} else {
  console.log('No accessible stylesheets found to iterate.');
}

/**
 * 查找并尝试修改网页中的CSS变量
 * @param {string} variableName 要查找的CSS变量名（如'--primary-color'）
 * @param {string} newValue 要设置的新值
 * @returns {boolean} 如果至少一个变量被修改，则返回true
 */
function findAndModifyCssVariable(variableName, newValue) {
  let modified = false;
  const