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

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

我正在使用 MutationObserver 来了解撰写框窗口何时出现。我通过观察带有类的元素来做到这一点no因为撰写框元素是作为该元素的子元素创建的（类no).

当用户单击撰写按钮并出现撰写框窗口时，我使用以下命令在“发送”按钮旁边放置一个元素.after()方法。 SEND 按钮类名称为.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 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" 
    ]
}

附：我已经尝试过 insertquery 库，但它有一些缺点。它不允许我具体说明特定元素的变化。我还没有尝试mutationsummary库，但由于它使用MutationObserver，我认为问题将持续存在。

从评论中添加：
确实，选择器没有给我一个节点。我检查了控制台，它给出了一个对象。我还检查了控制台，它正在选择我想要观察的适当元素。

但是，当我添加console.log对于所选元素，它显示为未定义。这意味着，您关于在节点存在之前执行代码的说法可能是正确的。你能告诉我如何确保延迟发生吗？ “setTimeout”会起作用吗？ MutationObserver 的情况下它是如何工作的？

正如我在评论中提到的，Xan 给出了答案，该错误清楚地表明document.querySelectorAll(".no")[2]不评估为Node https://developer.mozilla.org/en-US/docs/Web/API/Node.

从您在评论中提供的信息来看，问题很明显是您的代码执行时您想要观察的节点不存在。有很多方法可以延迟代码的执行，直到该节点可用。一些可能性是：

1. 使用 setTimeout 循环进行轮询，直到检测到要放置的元素变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver可用：

   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 中后，这将很快找到合适的节点。此方法的可行性取决于插入目标节点后多长时间需要将观察者放置在其上。显然，您可以根据需要调整轮询尝试之间的延迟。

2. 创建另一个 MutationObserver 来监视 DOM 中较高的祖先节点，以插入要在其上放置主要观察者的节点。虽然这会在插入时立即找到合适的节点，但它可能会占用大量资源 (CPU)，具体取决于您必须观察的 DOM 的高度以及 DOM 更改的活动量。