State manipulation in Tampermonkey

Question

I've got an unusual problem with managing the state of user scripts. I want that my script will press the button when the counter will be below 50 seconds, but I have totally no idea how to do it. I think I have to add some type of event listener, but I don't know which one and how to do it.

let time = 60;
const counter = document.querySelector('.counter');
const result = document.querySelector('.result');

result.addEventListener('click', () => {
    console.log('done')

})

window.setInterval(function () {
    if (time > 0)
        time--;
    counter.innerHTML = time + " seconds";
    if (time <= 0)
        time = 60;
}, 1000);

 <span class="counter">60 seconds </span>
    <button class="result">Console log</button>

Tampermonkey script:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:5500/index.html
// @icon         https://www.google.com/s2/favicons?domain=0.1
// @grant        none
// ==/UserScript==

(function() {
const result = document.querySelector('.result');
const counter = document.querySelector('.counter');

      if (counter.textContent === '50 seconds') {
        result.click()
    }

})();

I can see the problem, but I can't deal with it alone. If something is unclear feel free to ask :)

Answer 1

For this purpose you could use a MutationObserver like this:

// Your code for the counter
let time = 60;
const counter = document.querySelector('.counter');
const result = document.querySelector('.result');

result.addEventListener('click', () => {
    console.log('done')
})

window.setInterval(function () {
    if (time > 0)
        time--;
    counter.innerHTML = time + " seconds";
    if (time <= 0)
        time = 60;
}, 1000);

// The userscript:
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:5500/index.html
// @icon         https://www.google.com/s2/favicons?domain=0.1
// @grant        none
// ==/UserScript==

function main() {
    const result = document.querySelector(".result");
    const counter = document.querySelector(".counter");

    // the observer
    var observer = new MutationObserver((e) => {
        if (counter.textContent === "50 seconds") {
            result.click();
        }
    });
    observer.observe(counter, {
        childList: true
    });
}
// wait until the document has finished loading
// You could also set @run-at to "document-end"
if (["interactive", "complete"].includes(document.readyState)) main();
else document.addEventListener("DOMContentLoaded", main);

<span class="counter">60 seconds </span>
<button class="result">Console log</button>