'observe' em 'MutationObserver': o parâmetro 1 não é do tipo 'Node'

Question

Nov 03, 2016, 10:35 AM

gmail-api javascript gmail mutation-observers google-chrome-extension

'observe' em 'MutationObserver': o parâmetro 1 não é do tipo 'Node'

Estou criando uma extensão do Chrome e tentando incluir um texto pequeno ao lado do botão ENVIAR da caixa de composição do gMail.

Estou usando um MutationObserver para saber quando a janela da caixa de composição é exibida. Estou fazendo isso observando um elemento com classeno desde que o elemento da caixa de composição seja criado como filho desse elemento (classeno)

Quando o usuário clica no botão de composição e a janela da caixa de composição aparece, coloco um elemento ao lado do botão ENVIAR usando o.after() método. O nome da classe do botão ENVIAR é.gU.Up.

Estes são os nomes reais das classes do gMail e muito estranhos também.

Abaixo está o código que estou usando:

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

O problema é que eu constantemente recebo o seguinte erro:

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

Alguém pode ajudar? Eu tentei algumas coisas e também procurei outras respostas aqui, mas ainda não consigo me livrar desse erro.

Aqui está o meumanifest.json Arquivo:

{
    "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. Eu já tentei a biblioteca inserttionquery, mas ela tem algumas falhas. Não me deixa ser específico quanto às mudanças no elemento específico. Ainda estou para tentar a biblioteca de resumo de mutações, mas como ele usa o MutationObserver, achei que o problema persistiria.

Adicionado a partir do comentário:
É verdade que o seletor não está me dando um nó. Eu verifiquei no console, está dando um objeto. Também verifiquei no console e ele está selecionando o elemento apropriado que quero observar.

No entanto, quando adicionoconsole.log para o elemento selecionado, é exibido como indefinido. O que significa que você provavelmente está certo sobre a execução de código antes da existência de nós. Você pode me dizer como garantir que o atraso aconteça? 'setTimeout' funcionará? Como isso funciona no caso de MutationObserver?

leaveComments