Пример кода Tampermonkey для смены оформления текста

Итак, вы зашли на интересующую вас страницу, открыли меню расширения Tampermonkey, и выбрали пункт "Создать новый скрипт..." Tampermonkey открывает для вас редактор, в котором уже находится заготовка для вашего будущего скрипта:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2025-05-23
// @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';

    // Your code here...
})();

Вы хотите решить простую задачу, по заданному селектору поменять оформление элемента, если его текст включает в себя подстроку 2024. Вы совершенно правы, это очень простая задача, которая решается с помощью следующего, достаточно простого скрипта (для сокращения объёма ответа в дальнейших примерах я опускаю "шапку" нашего скрипта, потому что она останется неизменной):

(function() {
    'use strict';

    const spans = document.querySelectorAll("#responsive_page_template_content > div.page_content_ctn > div > div > div > div> div > div > div > div > div > span");
    for (const span of spans) {
        if (span.innerText.includes('2024')) {
            span.style.backgroundColor = '#FF0000';
        }
    }
})();

Сохраняем скрипт, обновляем нашу страницу, и... ничего не происходит. Наверное, в нашем скрипте какая-то ошибка? Нет, никакой ошибки в нашем скрипте нет. Дело в том, что на момент вызова нашего скрипта ни одного из интересующих нас элементов <span> на нашей веб-странице ещё нет. Все они будут созданы позже динамически, с помощью javascript'ов на этой странице. Часть этих элементов будет создана уже через несколько секунд, другие будут создаваться по мере прокрутки нашей страницы вниз. И в этом месте ваш "простой" вопрос превращается уже в не настолько простой. Оказывается, вместо того, чтобы просто быстренько поменять оформление нескольких элементов, нам надо будет следить за динамическими изменениями содержимого нашей страницы, и реагировать на них. Наверное, на каком-то "продвинутом" с вашей точки зрения языке программирования эта задача и решается в несколько строк, но на "отсталом" JavaScript в несколько строк это уже не решить. Вот вам пример скрипта, который уже не настолько прост, но зато справляется с этой задачей:

(function() {
    'use strict';

    const parent = document.querySelector('div[data-featuretarget="event-calendar"]');
    if (parent) {
        let spanCount = 0;
        function processNewElements() {
            const spans = parent.querySelectorAll(':scope > div > div > div> div > div > div > div > div > span');
            const newSpanCount = spans.length;
            if (newSpanCount > spanCount) {
                spanCount = newSpanCount;
                for (const span of spans) {
                    if (span.innerText.includes('2024')) {
                        span.style.backgroundColor = '#FF0000';
                    }
                }
            }
        }
        const observer = new MutationObserver(function(mutations) {
            for (const mutation of mutations) {
                if (mutation.addedNodes.length) {
                    processNewElements();
                }
            }
        });
        observer.observe(parent, {
            childList: true,
            subtree: true
        });
        processNewElements();
    }
})();