'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

Question

I am creating a Chrome extension and trying to include a small text beside the SEND button of the gMail compose box.

I am using a MutationObserver to know when the compose box window appears. I am doing this by observing an element with class no since the compose box element is created as child of this element (class no).

When the user clicks on the compose button and the compose box window appears, then I place an element beside the SEND button using the .after() method. SEND button class name is .gU.Up.

These are the real class names of gMail and pretty weird too.

Below is the code I am using:

var composeObserver = new MutationObserver(function(mutations){ 
    mutations.forEach(function(mutation){
        mutation.addedNodes.forEach(function(node){
            $(".gU.Up").after("<td> <div> Hi </div> </td>");
        });
    });
});

var composeBox = document.querySelectorAll(".no")[2];
var config = {childList: true};
composeObserver.observe(composeBox,config);

The problem is that I constantly get following error:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

Can anyone help? I have tried quite a few things and also looked at other answers here, but still am unable to get rid of this error.

Here is my manifest.json file:

{
    "manifest_version": 2,
    "name": "Gmail Extension",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon19.png",   
        "default_title": "Sales Analytics Sellulose"    
    },

    "background": {
        "scripts": ["eventPage.js"],
        "persistent": false
    },

    "content_scripts": [
    {
        "matches": ["https://mail.google.com/*"],
        "js": ["jquery-3.1.1.js", "insQ.min.js", "gmail_cs.js"]
    }
],

    "web_accessible_resources":[
        "compose_icon.png",
        "sellulosebar_icon.png" 
    ]
}

P.S. I have already tried the insertionquery library, but it has a few shortcomings. It doesn't let me be specific as to the changes in the specific element. I am yet to try the mutationsummary library, but since it uses MutationObserver, I figured the issue will persist.

Added from comment:
It is true that the selector is not giving me a node. I checked in the console, it's giving a object. I also checked in the console and it's selecting the appropriate element that I want to be observed.

However, when I add console.log for the element selected, it's showing as undefined. Which means, you are probably right about code executing prior to nodes coming into existence. Can you tell me how to make sure the delay happens? will 'setTimeout' work? How does it work in case of MutationObserver?

Answer 1

As I mentioned in a comment, and Xan stated an answer, the error makes it clear that the result of document.querySelectorAll(".no")[2] does not evaluate to a Node.

From the information you provided in a comment, it is clear that the issue is that the node you desire to observe does not exist when your code executes. There are many ways to delay the execution of your code until that node is available. Some possibilities are:

1. Using a setTimeout loop to poll until you detect that the element on which you want to put the MutationObserver is available:

   function addObserverIfDesiredNodeAvailable() {
       var composeBox = document.querySelectorAll(".no")[2];
       if(!composeBox) {
           //The node we need does not exist yet.
           //Wait 500ms and try again
           window.setTimeout(addObserverIfDesiredNodeAvailable,500);
           return;
       }
       var config = {childList: true};
       composeObserver.observe(composeBox,config);
   }
   addObserverIfDesiredNodeAvailable();
   

   This will find the appropriate node relatively shortly after it exists in the DOM. The viability of this method depends on how long after the insertion of the target node do you need the observer to be placed on it. Obviously, you can adjust the delay between polling attempts based on your needs.

2. Create another MutationObserver to watch an ancestor node higher in the DOM for the insertion of the node on which you want to place your primary observer. While this will find the appropriate node immediately when it is inserted, it may be quite resource (CPU) intensive, depending on how high in the DOM you have to observe and how much activity there is with respect to DOM changes.

Answer 2

Try to use this with jQuery.

If you are developing a Chrome Extension and you are getting HTML element(Node) from the page or DOM in the content_script, then you will get Object and Node will be returned as property of the Object. You can then get Node from the Object to pass into observe(Node,config) method.

Example

var node = $("#elementId");  //this is wrong because if you logged this in the console you will get Object

var node = $("#elementId")[0];  //This gives the first property of the Object returned, and this is correct because if you logged this in the console you will get the Node element for which you want to detect changes in the DOM.

Answer 3

This error means that document.querySelectorAll(".no")[2] is not a Node.

Most likely this means there isn't such an element; querySelectorAll will always return a NodeList, even if it's empty; accessing non-existent members of the list succeeds without a runtime error, but returns undefined: in this sense, NodeList acts like an array.

"Wait, but it does! I run this code in the console and it works!" you may exclaim dramatically. That's because at the time you execute it, long after the document finishes loading, those elements exist.

So, you need to wait for this root element to be added; likely, with another MutationObserver to do the job.

Answer 4

If you use jQuery, put this code in

$(document).ready(function(){ // your code });