“MutationObserver"上的“观察":参数 1 不是“节点"类型 [英] 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

问题描述

我正在创建一个 Chrome 扩展程序并尝试在 gMail 撰写框的发送按钮旁边添加一个小文本.

I am creating a Chrome extension and trying to include a small text beside the SEND button of the gMail compose box.

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

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

当用户单击撰写按钮并出现撰写框窗口时，我会使用 .after() 方法在 SEND 按钮旁边放置一个元素.SEND 按钮类名称为 .gU.Up.

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.

这些是 gMail 的真实类名，也很奇怪.

These are the real class names of gMail and pretty weird too.

以下是我使用的代码:

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.

这是我的 manifest.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" 
    ]
}

附言我已经尝试过插入查询库，但它有一些缺点.它不允许我具体说明特定元素的变化.我还没有尝试过 mutationsummary 库，但由于它使用了 MutationObserver，我认为这个问题会持续存在.

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.

但是，当我为所选元素添加 console.log 时，它显示为未定义.这意味着，在节点出现之前执行代码可能是正确的.你能告诉我如何确保延迟发生吗?setTimeout"会起作用吗?在 MutationObserver 的情况下它是如何工作的?

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?

推荐答案

正如我在评论中提到的，Xan 给出了答案，该错误清楚地表明 document.querySelectorAll(".no")[2] 不评估为 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:

1. 使用 setTimeout 循环进行轮询，直到检测到要放置 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 中存在后相对较短的时间内找到合适的节点.这种方法的可行性取决于插入目标节点后多久需要将观察者放置在其上.显然，您可以根据需要调整轮询尝试之间的延迟.

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.

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