How do I add an button to the DOM once it is completely load (Chrome Extension)?

Question

I am building a chrome extension, and I want to add a button to every element in the DOM that belongs to a certain class. However, my code is executing before the DOM completely loads. How do I fix this? Below is my code:

    $(document).ready(function() {
    
        // var div = document.getElementsByClassName("collection-list__page"); //[0];
        var divImg = document.getElementsByClassName("product-tile__badges");
        var button = CreateButton();
    
        for (i = 0; i < divImg.length; i++) {
          console.log(divImg);
          console.log(divImg[i].appendChild(button));
        }
    
        button.addEventListener('mouseenter', e => {
          button.childNodes[1].style.display = "block"; // Makes the dropdown appear
        });
    
        button.addEventListener('mouseleave', e => {
          button.childNodes[1].style.display = "none"; // Makes the dropdown disappear
        });
    });

Here is my manifest:

    {
      "name": "Withizze",
      "version": "1.0",
      "manifest_version": 2,
      "content_scripts": [
          {
            "matches": ["https://www.fashionnova.com/collections/*"],
            "js": ["jquery-3.5.1.min.js", "content.js"],
            "all_frames": true,
            "run_at": "document_end"
        }
      ],
       "web_accessible_resources": ["dropDownButton.html"]
    }

The dom is loaded when `ready` fires so problem is more likely that elements are inserted by javascript asynchronously after it has loaded. take a look at using Mutation Observer — charlietfl, Oct 19 '20 at 03:52
The element is loading after the Mutation Observer. Is. There away to get around that? — user3697597, Oct 19 '20 at 06:02
If the code is using MutationObserver properly then the observer observes all subsequent changes. It's what MutationObserver does by definition. — wOxxOm, Oct 19 '20 at 12:18
There tons of them, use google search. Here's [an example in my answer](https://stackoverflow.com/a/39334319). — wOxxOm, Oct 19 '20 at 16:47
I got the mutation observer working! However, it is inconsistent with appending new elements to the document. — user3697597, Oct 19 '20 at 22:13

How do I add an button to the DOM once it is completely load (Chrome Extension)?

0 Answers0