Ich erstelle eine Chrome-Erweiterung und versuche, einen kleinen Text neben der SENDEN-Schaltfläche der gMail-Erstellungsbox einzufügen.

Ich verwende einen MutationObserver, um zu erfahren, wann das Fenster zum Erstellen einer Box angezeigt wird. Ich mache dies, indem ich ein Element mit der Klasse @ beobachtno da das compose box-Element als untergeordnetes Element dieses Elements erstellt wird (Klasseno).

Wenn der Benutzer auf die Schaltfläche "Verfassen" klickt und das Fenster "Verfassen" angezeigt wird, platziere ich mit der Taste "@" ein Element neben der Schaltfläche "Senden".after() Methode. SENDEN-Schaltfläche Klassenname ist.gU.Up.

Dies sind die echten Klassennamen von gMail und auch ziemlich seltsam.

Below ist der Code, den ich verwende:

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

Das Problem ist, dass ich ständig folgende Fehlermeldung bekomme:

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

Kann jemand helfen? Ich habe schon einige Dinge ausprobiert und auch andere Antworten hier angeschaut, bin aber immer noch nicht in der Lage, diesen Fehler loszuwerden.

Hier ist mein manifest.json Datei

{
    "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. Ich habe die Insertionquery-Bibliothek bereits ausprobiert, sie weist jedoch einige Mängel auf. Es lässt mich nicht spezifisch bezüglich der Änderungen in dem spezifischen Element sein. Ich habe die Bibliothek mit der Zusammenfassung der Mutationen noch nicht ausprobiert, aber da sie MutationObserver verwendet, habe ich angenommen, dass das Problem weiterhin besteht.

Von Kommentar hinzugefügt:
Es ist wahr, dass der Selektor mir keinen Knoten gibt. Ich habe in der Konsole nachgesehen, es gibt ein Objekt. Ich habe auch die Konsole eingecheckt und sie wählt das entsprechende Element aus, das ich beobachten möchte.

Allerdings, wenn ich @ hinzufügconsole.log für das ausgewählte Element wird als undefiniert angezeigt. Das heißt, Sie haben wahrscheinlich Recht damit, dass Code ausgeführt wird, bevor Knoten entstehen. Können Sie mir sagen, wie ich sicherstellen kann, dass die Verzögerung eintritt? funktioniert 'setTimeout'? Wie funktioniert es bei MutationObserver?