Chrome 扩展：使用 Javascript 删除所有样式答案

【问题标题】：Chrome Extension: Removing all styles using JavascriptChrome 扩展：使用 Javascript 删除所有样式
【发布时间】：2018-07-04 04:25:43
【问题描述】：

诚然，我对此有点陌生；我对 HTML/CSS 的了解比对 Javascript 的了解更多。我知道足以编写扩展程序，但我遇到了我认为可能特定于 Chrome 的问题。我不想太具体，但作为我扩展的一部分，我想从所有网页中删除样式。

这是我所拥有的：

manifest.json

{
"manifest_version": 2,
    "name": "[redacted]",
    "description": "[redacted]",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
                "run_at": "document_start"
        }
    ]
}

script.js

function lolxd() {
    var hs = document.getElementsByTagName('style');
    for (var i=0, max = hs.length; i < max; i++) {
        hs[i].parentNode.removeChild(hs[i]);
}

window.onload = lolxd();

我尝试了多种不同的脚本，但都没有奏效。奇怪的是，扩展加载得很好，但是 Javascript 不起作用，我仍然可以在所有网页上看到样式。有什么帮助吗？

【问题讨论】：

看到这个 SO answer
这不起作用。根据最高回复，这似乎只影响应用于元素的样式，而不影响 CSS。
您可能想要这样做：window.addEventListener("load", lolxd, false);如果您不想覆盖其他 onload JS 逻辑

标签： javascript google-chrome

【解决方案1】：

您可以递归地遍历所有元素并删除样式属性，删除所有链接的（外部）样式表和嵌入的样式表。

之前

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
  <style>
    p {
      font-size: 150%;
    }
  </style>
</head>

<body>

  <h1>This is a heading</h1>
  <p style="font-weight: bold;">This is a paragraph.</p>

</body>

</html>

之后

function removeStyles(el) {
  // code to remove inline styles 
  el.removeAttribute('style');

  if (el.childNodes.length > 0) {
    for (var child in el.childNodes) {
      /* filter element nodes only */
      if (el.childNodes[child].nodeType == 1)
        removeStyles(el.childNodes[child]);
    }
  }

  // code to remove embedded style sheets 

  var styletag = document.getElementsByTagName('style');
  var i = 0;
  for (; i < styletag.length; i++) {
    styletag[i].remove();
  }

  // code to remove external stylesheets
  var stylesheets = document.getElementsByTagName('link'),
    sheet;

  for (i = 0; i < stylesheets.length; i++) {
    sheet = stylesheets[i];

    if (sheet.getAttribute('rel').toLowerCase() == 'stylesheet')
      sheet.parentNode.removeChild(sheet);
  }
}

removeStyles(document.body);

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
  <style>
    p {
      font-size: 150%;
    }
  </style>
</head>

<body>

  <h1>This is a heading</h1>
  <p style="font-weight: bold;">This is a paragraph.</p>

</body>

</html>

【讨论】：

【解决方案2】：

像这样：

function removeCSS() {
    // remove `link`
    var links = document.getElementsByTagName('link');
    for(var i = 0, len = links.length; i < len; i++) {
        links[i].parentNode.removeChild(links[i]);
    }

    // remove `style`
    var styles = document.getElementsByTagName('style');
    for(var j = 0, len = styles.length; j < len; j++) {
        styles[j].parentNode.removeChild(styles[j]);
    }

    // remove inline style
    var nodes = document.querySelectorAll('[style]');
    for(var h = 0, len = nodes.length; h < len; h++) {
        nodes[h].removeAttribute('style');
    }
}

【讨论】：