为什么 JavaScript 不更改 css 变量 google chrome 扩展？答案

【问题标题】：Why is JavaScript not changing css variable google chrome extension?为什么 JavaScript 不更改 css 变量 google chrome 扩展？
【发布时间】：2022-07-11 04:53:36
【问题描述】：

我正在制作一个 chrome 扩展，可以在 here 找到。正如您在其中看到的，我需要 javascript 来更改一个变量，这会更改网页上的另一个变量（这听起来很多余，但很有必要）。在我的websiteCss.css 文件中，我有

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


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

在我的 JavaScript 中，我有：

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)
}

我的网站/弹出窗口正在更改其颜色以匹配新的颜色，但我正在编辑的网站不是。谁能告诉我为什么？

【问题讨论】：

标签： javascript css google-chrome-extension

【解决方案1】：

这取决于您的 Javascript 在哪里运行。弹出窗口有自己的 HTML、JS 和 CSS；网页本身也是如此。

如果你在 popup 的上下文中运行它，它只会影响弹出样式。

如果你在 content 脚本中运行它，你会看到网页上的样式发生了变化。

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

【讨论】：

我实际上是在 manifest.json 文件中使用内容脚本。但是，我很好奇，是否允许弹出窗口和清单访问同一个 JS 文件。毕竟，我需要将值从弹出窗口转换为网站，并且对多个文件进行此操作将具有挑战性。你知道该怎么做吗？
我的弹出窗口中有一个输入框，我需要将变量从输入框传输到我网站的 css 中。我该怎么做？

【解决方案2】：

您是否设法找到解决方案？我很好奇这里的解决方案是什么。

【讨论】：