'观察''MutationObserver'：参数1不是'Node'类型的， [英] 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

问题描述

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

我使用MutationObserver来了解出现撰写框窗口。我通过观察类 no 的元素来实现这一点，因为compose box元素是作为此元素的子元素创建的（class no >。.after（）方法。 SEND按钮的类名是 .gU.Up 。

这些是真正的gMail类名，也很奇怪。

以下是我使用的代码：

  var composeObserver = new MutationObserver（function（mutation）{
 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：未能在'MutationObserver'上执行'observe'：参数1不是'Node'类型
  

任何人都可以帮忙吗？我已经尝试了很多东西，并在这里查看了其他答案，但仍然无法摆脱此错误。

这是我的 manifest.json

文件：

  {
manifest_version：2，
name： Gmail扩展名，
版本：1.0，
 
browser_action：{
default_icon：icon19.png，
default_title ：Sales Analytics Sellulose
}，
 
background：{
scripts：[eventPage.js]，
persistent：false 
}，
 
content_scripts：[
 {
符合：[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
] 
} 
  

PS我已经尝试过插入查询库，但它有一些缺点。它没有让我对具体元素的变化具体说明。我还没有尝试突变总结库，但由于它使用了MutationObserver，我认为这个问题将持续存在。

从评论添加：

它是真的，选择器没有给我一个节点。我检查了控制台，它提供了一个对象。我也检查了控制台，并选择了我想要观察的适当元素。 然而，当我为所选元素添加 console.log 时，它显示为未定义。这意味着，在代码执行之前执行代码可能是正确的。你能告诉我如何确保延迟发生？ 'setTimeout'会工作吗？如何在MutationObserver的情况下工作？

解决方案

正如我在评论中提到的，Xan提出了一个答案，很明显， document.querySelectorAll（。no）[2] 的结果不会计算为 Node 。

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

1. 使用setTimeout循环进行轮询，直到您检测到要将 MutationObserver 可用：

     function addObserverIfDesiredNodeAvailable（）{
    var composeBox = document.querySelectorAll（。no）[2]; 
    if（！composeBox）{
    //我们需要的节点还不存在。 
    //等待500ms并重试
    window.setTimeout（addObserverIfDesiredNodeAvailable，500）; 
    return; 
   } 
    var config = {childList：true}; 
    composeObserver.observe（composeBox，config）; 
   } 
    addObserverIfDesiredNodeAvailable（）; 
     

   这会在DOM存在之后不久找到合适的节点。这种方法的可行性取决于插入目标节点之后需要将观察者放置在目标节点上多长时间。显然，您可以根据需要调整轮询尝试之间的延迟时间。
   

2. 创建另一个MutationObserver以观察DOM中较高的祖先节点，以便插入节点你想放置你的主要观察者。虽然这会在插入时立即找到合适的节点，但这可能会占用相当多的资源（CPU），具体取决于DOM必须观察的高度以及DOM更改的活动量。

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?

解决方案

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.

这篇关于'观察''MutationObserver'：参数1不是'Node'类型的，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！