Question

我创建了一个扩展，该扩展可以注入/覆盖页面上的颜色。效果很好。我想为用户添加在其中输入自己的着色值的功能。我有下拉菜单，文本框等... 问题是.. 您可以使用变量以某种方式更改CSS文件吗？还是我必须用JavaScript注入它。.由于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 });

Answer 2

要添加到maxpaj的帖子中，您还需要DebuggerDisplay文件中的tabs权限。

这方面还有更多文档：https://developer.chrome.com/extensions/tabs#method-insertCSS

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

2 个答案: