css - 带有用户存储值的 Chrome 扩展 CSS 注入(inject)？

Question

我创建了一个在页面上注入(inject)/覆盖着色的扩展。效果很好。我想添加让用户输入自己的着色值的功能。我有下拉菜单，文本框等...问题是..你能用变量以某种方式改变 css 文件吗？还是我必须用 javascript 注入(inject)它.. 由于 css 很复杂，我不确定具体该怎么做

比如，我知道 document.body.style.backroundcolor = etc 等等但是这个页面我使用的是这样的 css:

.chat_msgs li.chat_msg.msg-chat-message.msg-info-message{
color: yellowgreen !important;
border-radius: 10px !important;
background-color: #202020 !important;
border-bottom: 2px solid yellowgreen !important;
border-top: 2px solid yellowgreen !important;}

那么我可以使用变量代替颜色吗？还是我需要执行某种代码执行脚本并用 jss 强制执行它(真痛苦!大声笑)

谢谢!

编辑明白了!!!

L60C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_60 .icon {color: #35a6dd !important;}"});
    });
  };

Answer 1

您可以使用 chrome.tabs.insertCSS将 CSS 插入选项卡。

const color = getColor();
const code = '.xp_40 .icon .color = "' + color + '";';
chrome.tabs.insertCSS(tabs[0].id, { code: code });