Home / Questions / 277686
Accepted
Aritzbn
Asked: 2020-07-10 00:26:40 +0800 CST 2020-07-10 00:26:40 +0800 CST

How to make a mutationobserver work

  • 772

I'm trying to make a script that changes the background color of messages that include certain words ,

var palabras = ["Test1","Test2","Test3"];
var mirador = new MutationObserver(async (records, _) => {
    Tratar();
})
mirador.observe($('#content')[0], { childList: true, subtree: true });
function Tratar(){
    var content =  $(this).parent();

for(var i=0;i<palabras.length;i++){
    if(content.indexOf(palabras[i])>=0){
        content.backgroundColor("#4287f5");
    }
}
}

The idea is to apply this to the StackExchange chat, I'm using this room to test it, but it gives me that I'm doing something wrong when doing the.Observe()

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

I don't have much idea of ​​web development and I was using this script as a base that allows you to hide pics from stackexchange chat: https://stackapps.com/questions/8211/minimize-pics-in-chat

jquery

2 Answers

  1. The error itself is telling you:

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

    If we go to the google console we can see that $('#content')[0] returns null, and if we see in the html of sale there is no id that has the content value, but checking if we see the content class for what I understand that you want to make use of it. Changing # for ., since for class in jquery use is made of "."

    var palabras = ["Test1","Test2","Test3"];
var mirador = new MutationObserver(async (records, _) => {
    Tratar();
})
mirador.observe($('.content')[0], { childList: true, subtree: true });
function Tratar(){
    var content =  $(this).parent();

    for(var i=0;i<palabrasReportables.length;i++){
        if(content.indexOf(palabras[i])>=0){
            content.backgroundColor("#4287f5");
        }
    }
}
    • 4
  2. Best Answer

    The first parameter of mirador.observeshould be the target, so it should be the entire chat container and not the $(".content")(which, as @lDanny7 comments, being a class, is with .):

    MutationObserver.observe()

    mirador.observe($('#chat')[0],{opciones});

    So when changing the target you have to change the one var contentof the treat function:

    var content =  $(".content").last();

    either

    var content =  $(this).children(".content").last();

    It .indexOfhas to be done from String/array and not from the element, so it is extracted using .text()and so that it works better and detects the words regardless of case, you can add .toUpperCase()it if you add .toUpperCaseyou will also have to have the words in your array in uppercase (what you can initialize already in uppercase or doing .toUpperCase()it in the same check)

    function Tratar(){
    var content =  $(".content").last();
    console.log("::::TRATAR::::" +content.text());
    for(let x=0;x<palabras.length;x++){
        if(content.text().toUpperCase().indexOf(palabras[x].toUpperCase())>=0){
            content.css("background-color","#4287f5");
        }
    }
}
mirador.observe($('#chat')[0], { childList: true, subtree: true });
    • 3