浏览器扩展开发问题：访问网站的功能？

如何解决浏览器扩展开发问题：访问网站的功能？

我正在制作一个 Firefox 扩展，它在特定网站的顶部显示一个秒表。我还有一个按钮可以将秒表重置为 00:00:00。我希望扩展程序在调用该网站中的任何函数时自动重置计时器。

例如，如果一个网站有一个按钮可以改变网站的背景颜色，那么每次点击该按钮时，计时器都应该重置。

如何在我的扩展中访问各个网站的功能？我还必须更改 manifest.json 文件（权限和内容）吗？一旦我访问了它们，我该如何为它们中的每一个制作一个事件监听器？

这是我的 manifest.json 文件

{
  "name": "timer","version": "1.0","permissions": [
    "activeTab"
  ],"content_scripts": [
    {
      "matches": ["<all_urls>"],"js": ["content-script.js"],"css":["style.css"]
    }
  ],"manifest_version": 2
}

我的 JavaScript

var tim = document.createElement('time');
var button = document.createElement("button");
button.innerHTML = "RESET";

tim.innerText = "00:00:00"

document.body.insertAdjacentElement('beforebegin',tim);
document.body.insertAdjacentElement('beforebegin',button);

button.addEventListener ("click",function() {
tim.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
});
//when anything in body changes
let Par = document.body,options = {
    attributes: true
  },observer = new MutationObserver(restart);

  
var h1 = document.getElementsByTagName('time')[0],seconds = 0,minutes = 0,hours = 0,t;
    
    
    

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

    tim.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add,1000);
}
timer();

//restart method that resets timer
function restart() {
tim.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

  observer.observe(Par,options);

谢谢！

编辑：按照@wOxxOm 的建议，我尝试使用 MutationObserver 跟踪身体的任何变化。我这样做的方式一定是错误的，因为它无法正常工作。重申一下，我想要的是当身体发生任何变化时，计时器会重置。知道为什么我这样做的方式是错误的吗？我对 javascript 很陌生，之前没有使用过 MutationObserver 所以我真的不知道