'observe' on 'MutationObserver': parameter 1 is not of type 'Node'
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:
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.
- 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.
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.