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

Solution 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.

Solution 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.

Solution 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.