Javascript : Observer les modifications d'une page Web

Bonsoir à tous,

Je programme actuellement une extension pour un tchat en ligne qui doit compter le nombre de nouveaux messages envoyés depuis que l'utilisateur est entré dans le tchat. Je cherche donc une fonction JavaScript qui puisse analyser en permanence le contenu de la page du tchat (spécifiquement la div qui contient tous les messages) et ensuite exécuter une fonction. Cette fonction modifiera le badge du logo de l'extension et mettra le nombre de nouveaux messages à la place. J'ai déjà essayé avec MutationObserver, mais ça ne marche pas (sûrement parce qu'il y a des erreurs dans mon script, ou que le comportement par défaut du script n'est pas celui que j'attends, je ne sais pas). Voici mon manifest.json :

{
"manifest_version":2,
"name":"Tchat",
"description":"test",
"version":"0.0.2",
"permissions": [
    "tabs"
],

"background": {
    "scripts": ["page-reader.js"],
    "persistent": true
},

"commands":{
  "_execute_browser_action":{
    "suggested_key":{
      "default":"Ctrl+Q"
    }
  }
},

"browser_action": {
    "default_popup":"index.html",
    "default_icon": {               
      "16": "images/favicon-16x16.png",
      "32": "images/favicon-32x32.png", 
      "144": "images/android-icon-144x144.png"
    }
},

"icons": {
    "16": "images/favicon-16x16.png",
    "32": "images/favicon-32x32.png", 
    "144": "images/android-icon-144x144.png"            
}
}

Voici le script page-reader.js :

var targetNode = null;
var config = {
attributes: true,
childList: true,
subtree: true
};
var MutationObserver = window.MutationObserver;
var numberOfTchatMessages = 0;
var observer = null;

function tchatAnalyser(){
chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;

    if (url == "here is the tchat url") {
        chrome.browserAction.setBadgeBackgroundColor({color: "red"});
        chrome.browserAction.setBadgeText({text: "ON"});

        targetNode = document.getElementById('zone_tchat');


        var callback = function(){
            numberOfTchatMessages++;
            chrome.browserAction.setBadgeText({text: numberOfTchatMessages.toString()});
        };


        if (targetNode && MutationObserver) {
            observer = new MutationObserver(callback);
            observer.observe(targetNode, config);
        }
    }

    else {
        chrome.browserAction.setBadgeBackgroundColor({color:"dodgerblue"});
        chrome.browserAction.setBadgeText({text:"OFF"});
    }
});
}

chrome.tabs.onActivated.addListener(tchatAnalyser);

Le logo devient bien rouge quand je passe à l'onglet tchat, mais le texte reste à ON... Y a-t-il une erreur dans mon code ? Je pense que cela vient du fait que le DOM analysé n'est pas celui de la page Web du navigateur mais celui de l'arrière-plan de l'extension…

Merci par avance pour votre aide,
Bonne soirée,