“MutationObserver”上的“观察”：参数 1 不是“Node”类型

我正在创建一个 Chrome 扩展程序，并尝试在 gMail 撰写框的"发送"按钮旁边包含一个小文本。

我正在使用 MutationObserver 来了解撰写框窗口何时出现。no因为撰写框元素是作为该元素的子元素创建的（类no）。

当用户单击撰写按钮并出现撰写框窗口时，我使用以下命令在"发送"按钮旁边放置一个元素.after()方法。 .gU.Up。

这些是 gMail 的真实类名，而且也很奇怪。

下面是我正在使用的代码：

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);

问题是我不断收到以下错误：

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

有人可以帮忙吗？

这是我的清单.json文件：

{
    "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" 
    ]
}

附：

从评论中添加：
确实，选择器没有给我一个节点。

但是，当我添加console.log对于所选元素，它显示为未定义。

答案

正如我在评论中提到的，Xan 给出了答案，该错误清楚地表明document.querySelectorAll(".no")[2]不评估为节点。

从您在评论中提供的信息来看，问题很明显是您的代码执行时您想要观察的节点不存在。

使用 setTimeout 循环进行轮询，直到检测到要放置的元素变异观察者可用：

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();

当节点存在于 DOM 中后，这将很快找到合适的节点。

创建另一个 MutationObserver 来监视 DOM 中较高的祖先节点，以插入要在其上放置主要观察者的节点。

来自: stackoverflow.com

答案#

答案