Why is JavaScript not changing css variable google chrome extension?

Question

I am making a chrome extension, which can be found here. As you can see in it, I need the javascript to change a variable, which changes another variable on the webpage (It sounds redundant but is necessary). In my websiteCss.css file, I have

:root{
  --bg: #00ff00;
}


body.replit-ui-theme-root.light{
  --background-default: var(--bg);
}

And in my JavaScript, I have:

document.addEventListener('DOMContentLoaded', documentEvents  , false);

try{
  document.getElementById('background').value = "#1BFFFF"
}catch (err){
  console.log(err)
}

  
function documentEvents(){
  var r = document.querySelector(':root');
  
  function reload(){
    var color = document.getElementById('background').value
    r.style.setProperty('--bg', color);


    
    document.body.style.backgroundImage = "linear-gradient(to right, #2E3192,  " + color + ")"

    //console.log(getComputedStyle(r).getPropertyValue('--bg'))
    
    if(Math.random(0,1) < .1){
      console.log(color)
    }
    window.requestAnimationFrame(reload)
  }
  
  window.requestAnimationFrame(reload)
}

My website/popup is changing its colors to match the new ones, but the website I am editing isn't. Can someone please tell me why?

Answer 1

It depends on where your Javascript is running. The popup has its own HTML, JS, and CSS; so does the webpage itself.

If you are running this in the context of the popup, it will only affect the popup styles.

If you run this in the content script, you will see the styles change on the webpage.

See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#functionality