Using content script to remove a dom element

Question

I'm creating a fairly simple chrome extension. All it needs to do is remove two dom element whenever I visit a specific website.

The problem is that my script runs when $(document).ready and checks if the two elements I'm looking for exist. The two elements don't exist and then my script does not perform it's required task. After the script runs is when the website actually inserts the elements to the html. So my script essentially ran too early.

It doesn't seem like document.ready is actually waiting for all elements to be present. Is there a solution to this?

I'm not sure. It's not my website. I'm creating an extension to get around these two elements that are loaded. I can do it manually using inspect element but that gets tedious — zms6445, Dec 13 '13 at 16:39
Let's assume it is loaded via ajax. What can I do about that? — zms6445, Dec 13 '13 at 16:42
instead of document ready, you can try `$( document ).ajaxComplete(function() {` this event? [More info](http://api.jquery.com/ajaxComplete/) — Venkata Krishna, Dec 13 '13 at 16:56
A not-so-good solution would be to delay your function's execution using setTimeout. — zambrey, Dec 13 '13 at 19:02
You can also look into this http://stackoverflow.com/questions/13420811/document-ready-vs-document-onload — zambrey, Dec 13 '13 at 19:50
@zms6445: Did you try my proposed solution below ? Did it work for you ? — gkalpak, Dec 18 '13 at 12:24

score 3 · Answer 1 · edited May 23 '17 at 10:28

The best approach (imo) is to use a MutationObserver to "observe" the DOM (e.g. the body or better yet, the direct parent of the two elements you want to remove - if you know it beforehand) until those elements are inserted. As soon as you detect each element, you can remove it (and when both have been detected (and removed) you can cancel ("disconnect") the observer to save on resources).

E.g.:

var elem1removed = false;
var elem2removed = false;
var elemParent = document.body; /* or whatever */

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
            var node1 = mutation.target.querySelector(<selectorForElem1>);
            if (node1) {
                node1.parentNode.removeChild(node1);
                elem1removed = true;
            }

            var node2 = mutation.target.querySelector(<selectorForElem2>);
            if (node2) {
                node2.parentNode.removeChild(node2);
                elem2removed = true;
            }

            if (elem1removed && elem2removed) {
                observer.disconnect();
            }
        }
    });
});

observer.observe(elemParent, {
    childList: true,
    subtree: true
});

For a fairly complex example of manipulating dynamically added elements (and how to incorporate the technique into a Chrome Extension), see this other answer.

score 0 · Answer 2 · answered Dec 14 '13 at 03:23

0

If you just want a quick solution without dealing with observers, just use setTimeout so your code runs later. Even safer use setInerval until you find the dom and hide/delete them.

answered Dec 14 '13 at 03:23

Zig Mandel

19,571
5
26
36

Using content script to remove a dom element

2 Answers2

Linked