Chrome 扩展 CSS 注入用户存储的值？

Question

我创建了一个 injects/overrides 在页面上着色的扩展程序。效果很好。我想添加让用户输入自己的着色值的功能。我有下拉菜单，文本框等... 问题是.. 你能用变量以某种方式改变 css 文件吗？还是我必须 javascript 注入它.. 由于 css 很复杂

我不确定具体该怎么做

喜欢，我知道 document.body.style.backroundcolor = 等等等等但是这个页面我使用 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 });

Answer 2

要添加到 maxpaj 的 post - 您还需要 manifest.json 文件中的 tabs 权限。

这里有一些关于此的更多文档：https://developer.chrome.com/extensions/tabs#method-insertCSS

Chrome 扩展 CSS 注入用户存储的值？

Chrome Extension CSS injection with user stored values?

css

google-chrome

code-injection

google-chrome-extension