Как заставить скрипт tampermonkey работать?

Question

[Константин Мельников]

Доброго времени суток. Простейший вопрос, как заставить скрипт tampermonkey работать?

При поиске в интернете о том как писать эти скрипты, прочитал простейшую фразу. Сначала проверьте код в консоли, если работает то добавляйте его в скрипт. Но в том то и дело что если код работает в консоли, он НЕ работает в скрипте

Речь об этой странице store.steampowered.com/news/app/550
И о моим попытках научиться писать хотя бы простые скрипты. Начал с я этого:

const element = document.querySelector("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");

Этот скрипт меняет цвет текста первого вхождения. А нужно меня все. Вторая попытка

var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });

Уже меняются все вхождения, но оба кода работают ТОЛЬКО В КОНСОЛИ! Я вставляю их в скрипт после строки
// Your code here...
Но ничего не происходит, обновляю страницу, включаю/выключаю скрипт после загрузки страницы. Ни в какую скрипт не хочет работать.

Пробовал директиву // @run-at в мета данные скрипта добавлять, все значения перепробовал, «document-start», «document-body», «document-end», «document-idle», «context-menu». Ни одно не помогло

Пробовал так:

document.addEventListener("DOMContentLoaded", ready);

    function ready() {
        var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });
    }

Пробовал этак

window.onload = function() {
        var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });
    };

Тоже не помогает...

Answer 1

[dim5x]

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-05-24
// @description  try to take over the world!
// @author       You
// @match        https://store.steampowered.com/news/app/550
// @icon         https://www.google.com/s2/favicons?sz=64&domain=steampowered.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    function redOctober() {
        var textElements1 = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
        textElements1.forEach(function(element) {
            element.style.color = 'red';
        });
    }
    const observer = new MutationObserver(redOctober);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

Answer 2

[Alexandroppolus]

Судя по всему, элементы не присутствуют в html изначально, а добавляются (создаются скриптом) по факту загрузки некоторых данных. Это обычная ситуация в современном web. Тебе надо дождаться их появления - например, попробовать через MutationObserver, или, например, поставить setInterval и в нем проверять наличие элементов (как только появятся - отменять таймер)