Removing DOM elements before displaying the page on the screen (in the Chrome extension)

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?

+4
1

MutationObserver script, document-start, HTML DOM , , .

  • manifest.json:

    {
        "name": "Delete elements",
        "version": "1.0",
        "content_scripts": [
            {
                "matches": ["http://somesite.com/*"],
                "run_at": "document_start",
                "all_frames": true,
                "js": ["content.js"]
            }
        ],
        "manifest_version": 2
    }
    
  • content.js:

    deleteElements('.header-nav-item, #topchapter, #wrapper_header');
    
    function deleteElements(selector) {
        // in case the content script was injected after the page is partially loaded
        doDelete(document.querySelectorAll(selector));
    
        var mo = new MutationObserver(process);
        mo.observe(document, {subtree:true, childList:true});
        document.addEventListener('DOMContentLoaded', function() { mo.disconnect() });
    
        function process(mutations) {
            for (var i = 0; i < mutations.length; i++) {
                var nodes = mutations[i].addedNodes;
                for (var j = 0; j < nodes.length; j++) {
                    var n = nodes[j];
                    if (n.nodeType != 1) // only process Node.ELEMENT_NODE
                        continue;
                    doDelete(n.matches(selector) ? [n] : n.querySelectorAll(selector));
                }
            }
        }
        function doDelete(nodes) {
            [].forEach.call(nodes, function(node) { node.remove() });
        }
    }
    
    // Chrome pre-34
    if (!Element.prototype.matches)
        Element.prototype.matches = Element.prototype.webkitMatchesSelector;
    

:

  • , , for , forEach .
  • , , .
  • ,
  • mutations . , nodeType Node.ELEMENT_NODE 1.
  • addedNodes , , , DIV, , , , . querySelector querySelectorAll.
  • childNode.remove() Chrome 23
+7

Source: https://habr.com/ru/post/1607036/


All Articles