Chrome Extension: Removing all styles using Javascript

Question

I'm admittedly a bit new to this; I know HTML/CSS more then I know Javascript. I know enough to code an extension, but I'm having problems that I believe may be specific to Chrome. I don't want to be too specific, but as part of my extension I'd like to remove styles from all webpages.

Here's what I have:

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();

I've tried multiple different scripts, none of which have worked. Strangely the extension loads fine, but the Javascript doesn't work and I can still see styles on all webpages. Any help?

See this SO [answer](https://stackoverflow.com/a/9252908/3091398) — CodeIt, Jan 25 '18 at 01:15
This does not work. According to the top reply, it would seem that this only affects styles applied to elements, and not CSS. — , Jan 25 '18 at 01:49
You may want to do this instead: window.addEventListener("load", lolxd, false); if you don't want to override other onload JS logic — Anthony McGrath, Jan 26 '18 at 06:16

score 0 · Answer 1 · answered Jan 25 '18 at 03:56

like this:

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

score 0 · Accepted Answer · answered Jan 26 '18 at 05:37

You can recursively iterate through all elements and remove the style attribute, remove all linked (external) stylesheets and embedded stylesheets.

BEFORE

<!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>

AFTER

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>

Chrome Extension: Removing all styles using Javascript

2 Answers2