removeChild在Chrome扩展程序中不起作用

Question

I'm trying to remove all the link elements with a rel tag of "stylesheet" using node.removeChild from a webpage but it will not work. I know chrome extensions have some limitations for security reasons but I don't seem to find if this problem is caused by these limitations or not.

If I log styles[i].parentElement it gives me the body element so that's working correctly.

Any help would be greatly appreciated.

manifest.json:

{
"manifest_version": 2,
"name": "Leho Styler",
"description": "This extension gives leho a whole new styling to better please the eye.",
"version": "0.1.0",
"content_scripts": [
  {
    "matches": [
      "https://leho.howest.be/*",
      "https://leho.howest.be/*/*",
      "http://leho.howest.be/*",
      "http://leho.howest.be/*/*"
    ],
    "css": [
      "reset.css",
      "leho.css"
    ],
    "js": ["leho.js"]
  }
]

}

leho.js (content script)

var styles = document.getElementsByTagName('link');

function init() {
    for (var i = 0; i < styles.length; i++) {
        if (styles[i].rel == "stylesheet") {
            styles[i].parentElement.removeChild(styles[i]);
        }
    }
}

init();

Answer 1

First of all, change the Query to var styles = document.querySelectorAll ("link[rel='stylesheet']") - this gets rid of the unnecessary if-block. Second, are you sure the DOM is loaded when init() is called? For this, instead of calling init directly, try adding this line: document.addEventListener ("DOMContentLoaded", init); - this calls init once the DOM is available. As far as I know, this can also be done inside the manifest file, though I do not know what the default is.