I can't access and change the values of the CSSStyleSheet of a website

Question

I'm making a chrome extension to adapt the colors of the youtube website to the browser colors, and I am getting stuck on the CSSStyleSheet of the website. This is the function I have at this moment, sorry if its completely wrong, this is 4 different tutorials mashed together

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 stylesheet = await response.text();
  alert(stylesheet);
  // Get all style sheets
  const ruleList = stylesheet.cssStyleSheet;
  for (let j = 0; j < ruleList.length; j++) {
    const rule = ruleList[j];
    alert(rule.cssText);
    const variables = rule.cssVariables;
    for (let k = 0; k < variables.length; k++) {
      const variable = variables[k];
      alert(variable.value + " : " + variable.name);
      // Check if the variable is a color
      if (variable.value.startsWith('#') || variable.value.startsWith('rgb') || variable.value.startsWith('hsl')) {
        colorVariables[variable.name] = variable.value;
      }
    }
  }

  return colorVariables;
}

I am pretty sure this would be the right style sheet for what I am trying to do, but when I run this function, the alert(rule.cssText) returns undefined which stops the rest of the function from running. Any help would be greatly appreciated!

Answer 1

For obtaining the CSSStyleSheet object, I think you should be using document.styleSheets rather than doing a web request.

Once you have the CSSStyleSheet object, surely you need to use the cssRules property before you start iterating through each rule. As per this example:

const ruleList = document.styleSheets[0].cssRules;
for (let i = 0; i < ruleList.length; i++) {
  console.log(ruleList[i]);
}