Вопрос разработки расширения для браузера: доступ к функциям веб-сайтов?

Я делаю расширение для 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, поэтому понятия не имею


person mg236    schedule 12.03.2021    source источник
comment
Чтобы определить, что делает сайт, вам не нужно обращаться к его функциям JavaScript, поэтому я предлагаю использовать MutationObserver. Если вы действительно хотите получить доступ к функциям JavaScript или перехватить их, см. этот пример.   -  person wOxxOm    schedule 12.03.2021
comment
интересно .. я изменил положение секундомера и кнопки, чтобы они были перед телом, и я сделал мутационный наблюдатель, чтобы, когда что-то происходит в теле, он сбрасывал таймер .. но я не уверен, что сделал правильно, так как это не работает правильно. в чем моя ошибка? Я поместил отредактированный код в исходный вопрос   -  person mg236    schedule 12.03.2021
comment
Ничего себе, разобрался! Большое спасибо!!   -  person mg236    schedule 12.03.2021