I'm making a web extension and I want a message to be sent to my content script when the following button of my popup.html is clicked.

<button class="button" type="button" id="stop">Stop</button>
<script src="stopCount.js"></script>

Here's stopCount.js :

let button = document.getElementById('stop');

button.addEventListener('click', function(event){
if (button.textContent == "Stop") {
    button.textContent = "Resume";
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       chrome.tabs.sendMessage(
           tabs[0].id,
           {msg: "stop"});
    });
}

else if (button.textContent == "Resume") {     
    button.textContent = "Stop";
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(
            tabs[0].id,
            {msg: "resume"});
    });
  }    
})

And here's the part of my content script that intercepts messages :

chrome.runtime.onMessage.addListener(function(request, sender, response) {
if (request.msg == "stop") {
    observer.disconnect();
  }
else if (request.msg == "resume") {
    observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }
})

My problem is the part of my content script described just above is never reached, even if I click on the button.

Do you know what is the problem ?

Thanks in advance,