0

Im trying to do something when a new chat message appears on a youtube live stream in a tampermonkey script.

Im using a DOMNodeInserted event on a div with the id "chat-messages"

The problem is: im not able to get the id of the element (undefined) but it's getting printed in the console correctly. Its also not possible to get the class attribute using jquery.

Code:

$("#chat-messages").on('DOMNodeInserted', function(e) {

  var VanillaElement = e.target;
  var JqueryElement = $(VanillaElement);


  if(JqueryElement.is("yt-live-chat-text-message-renderer")){

    console.log("added chat message");
    console.log(VanillaElement);
    console.log(VanillaElement.id);
    console.log(JqueryElement.attr("class"));

  }



});

Here is a screenshot for better understanding:

output

  • 1
    Maybe try `console.dir` instead of `console.log` so you can see the element as an object. That helps sometimes to understand what is really going on. – edu Mar 24 '20 at 21:31
  • 1
    Have you tried `JqueryElement.id`? – Tamas Szoke Mar 24 '20 at 21:31
  • So if the code you posted with the `console.log()` calls is *working*, where is the code that *doesn't* work? – Pointy Mar 24 '20 at 21:32
  • 1
    @Pointy im just want the id. I dont want to print the element into the console :) –  Mar 24 '20 at 21:33
  • Well if `console.log(VanillaElement.id)` works then you are getting the id. Your question doesn't make much sense unless you explain how it is that you think you "can't get" the id value. – Pointy Mar 24 '20 at 21:34
  • 1
    console.log(VanillaElement.id) -> undefined –  Mar 24 '20 at 21:35
  • Because it's not a standard DOM element, it may be the case that you'll have to use `VanillaElement.getAttribute("id")` – Pointy Mar 24 '20 at 21:35
  • VanillaElement.getAttribute("id") -> null –  Mar 24 '20 at 21:37
  • I suspect the ID is being added dynamically later. The console is lazy about displaying objects, so you're seeing the full element after the ID is added. – Barmar Mar 24 '20 at 21:42
  • 1
    Why do you need the ID? You have a reference to the element, just use that. – Barmar Mar 24 '20 at 21:43
  • The basic problem is that the node is being inserted, then the `id` and `class` attributes are being added. Your code runs after the insert, but before the attributes. – Barmar Mar 24 '20 at 21:46
  • @Barmar That could be. If i had the id i could use $(id) to get information out of the element. For Example i need to find a div inside the message like this: JqueryElement.find("#content").html() but that is undefined too –  Mar 24 '20 at 21:51
  • Your code is running before anything has been added to the node, that's why everything is undefined. You need to save the variable and use it later. – Barmar Mar 24 '20 at 21:55

1 Answers1

0

Your code is running before the ID and class are added to the element. The YouTube code must be inserting the element and then adding the attributes, so your code runs in between. See Is Chrome's JavaScript console lazy about evaluating arrays? for the reason why you see the attributes when you log VanillaElement.

The best solution is to not use the id, just save VanillaElement and jqueryElement for later use. If you want to see the ID, you could add a delay before showing it.

$("#chat-messages").on('DOMNodeInserted', function(e) {
  var VanillaElement = e.target;
  var JqueryElement = $(VanillaElement);
  if (JqueryElement.is("yt-live-chat-text-message-renderer")) {
    console.log("added chat message");
    console.log(VanillaElement);
    setTimeout(function() {
      console.log(VanillaElement.id);
      console.log(JqueryElement.attr("class"));
    }, 100);
  }
});
Barmar
  • 741,623
  • 53
  • 500
  • 612