在 Chrome 扩展中将 CSS 属性作为 javascript 注入而不覆盖之前的属性

Question

所以我试图在 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");}'
  });

问题是，每一行都会覆盖最后一行的 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");}'
  });
}

我该怎么做？

Answer 1

在应用之前将样式更改收集到一处。

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 + '");' +
    '}'
});

或者，您可以直接操作 .style property 而不是属性。例如：

elements[i].style.setProperty("font-family", "Courier", "important");

在不覆盖的情况下一条一条地操作规则。

在 Chrome 扩展中将 CSS 属性作为 javascript 注入而不覆盖之前的属性

Injecting CSS attributes as javascript in a Chrome Extension without overriding the previous ones

javascript

css

google-chrome

google-chrome-extension