I am trying to create an extension that will get rid of certain elements of the page (by identifier or class) before the page is displayed on the screen. I tried using the event listener in the document with "DOMContentLoaded" as the event, but javascript seems to be executed after the page is displayed to the user and then deletes it so that it is not as smooth as I want (without displaying inappropriate content at all )
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("header-nav-item");
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
var element = document.getElementById("topchapter");
element.parentNode.removeChild(element);
element = document.getElementById("wrapper_header");
element.parentNode.removeChild(element);
});
This is the contents of the script that uses my extension, which is deleted after the page loads. What do I need to use to change the DOM before the pages are visible to the user?