Блог

Главная - Вопросы по программированию - Манипулирование состоянием в Tampermonkey

Манипулирование состоянием в Tampermonkey

#javascript #tampermonkey #userscripts

#javascript #tampermonkey #пользовательские скрипты

Вопрос:

У меня необычная проблема с управлением состоянием пользовательских скриптов. Я хочу, чтобы мой скрипт нажимал кнопку, когда счетчик будет ниже 50 секунд, но я совершенно не представляю, как это сделать. Я думаю, что мне нужно добавить какой-то тип прослушивателя событий, но я не знаю, какой и как это сделать.

 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:

 // ==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()
    }

})();

Я вижу проблему, но я не могу справиться с ней в одиночку. Если что-то неясно, не стесняйтесь спрашивать 🙂

Ответ №1:

Для этой цели вы могли бы использовать MutationObserver, подобный этому:

 // 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>

Комментарии:

1. Большой плюс для ответа с помощью наблюдателя мутаций, а не setInterval опроса. Хороший ответ!

2. @ZerobyeHD могу я задать вам несколько вопросов в личном сообщении?

3. @Stairss Конечно, но как? В StackOverflow нет PMs.