将CSS属性作为javascript注入到Chrome扩展中,而不覆盖以前的属性

将CSS属性作为javascript注入到Chrome扩展中,而不覆盖以前的属性,javascript,css,google-chrome,google-chrome-extension,Javascript,Css,Google Chrome,Google Chrome Extension,因此,我尝试在chrome扩展中执行以下代码行: chrome.tabs.executeScript({ code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-family: Courier !important");}' }); chrome.t

因此,我尝试在chrome扩展中执行以下代码行:

  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-family: Courier !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size: 18pt !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "backgrond-color: #fbfbfb !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "line-height: 1.5 !important");}'
  });
chrome.tabs.executeScript({
代码:'var elements=document.getElementsByTagName(“*”);for(var i=0;i
问题是,每一行都会覆盖最后一行的CSS更改。我可以通过将所有CSS更改放在一行中来解决这个问题。但是,我希望根据变量的状态使每一行工作。例如:

if (var_a === "true") {
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-family: Courier !important");}'
  });
}
if (var_b === "true) {
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size: 18pt !important");}'
  });
}
if(变量a==“true”){
chrome.tabs.executeScript({
代码:'var elements=document.getElementsByTagName(“*”);for(var i=0;i

我该如何做到这一点?

在应用样式更改之前,在一个地方收集样式更改

var style = "";
if (var_a === "true") style += "font-family: Courier !important;";
if (var_b === "true") style += "font-size: 18pt !important;";
/* ... */
chrome.tabs.executeScript({
  code:
    'var elements = document.getElementsByTagName("*");' +
    'for (var i=0; i < elements.length; i++) {' + 
      'elements[i].setAttribute("style", "' + style + '");' +
    '}'
});

一个接一个地操作规则而不被覆盖。

谢谢!虽然true可能不应该用引号引。@CyrusRoshan我在这里引用了你的代码。如果你是指布尔值,我就把
If(var_a)
哦,我明白了。我当时犯了一个错误。
elements[i].style.setProperty("font-family", "Courier", "important");