Chrome Extension CSS injection with user stored values?

Question

I created an extension that injects/overrides coloring on a page. works great. I would like to add the ability for the user to enter there own coloring values. I have the dropdown, textboxes, etc... the question is.. Can you alter the css file somehow with variables? or do i have to javascript inject it.. which im not sure exactly how to do since the css is complex

like, i know document.body.style.backroundcolor = etc etc but this page im using css like this:

.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;}

so can i use variables inplace of the colors? or do I need to do some sort of code execute script and force it in with jss (what a pain! lol)

Thanks!

Edit Got it!!!

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

You can use chrome.tabs.insertCSS to insert CSS to the tab.

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