Задать вопрос

Как перенести и улучшить данный скрипт из Stylus в Tempermonkey?

Доброго времени суток товарищи.

Имеется такой скрипт из расширения для браузера Stylus
@-moz-document url("https://store.steampowered.com/account/history/") {
    #main_content > table > tbody > tr:has(td.wht_items[data-tooltip-text="Подробная история Торговой площадки"]) *
    {
        font-size: 0px;
        height: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

И он частично выполняет нужное мне задание. Этот скрипт применяет стиль к тегу, и ко всем вложенным тегам, если внутри одного из них есть искомый текст. А хотелось бы большего. Но если я правильно все понимаю, в CSS нет селектора который бы позволял извлекать содержимое тега. А именно это мне и нужно. По этому этот скрипт нужно воссоздать в расширении Tempermonkey или ему подобном. Я пришел к такому коду
(function() {
    'use strict';

    const parent = document.querySelector("#main_content > table");
    if (parent) {
        let divCount = 0;
        function processNewElements() {
            const divs = parent.querySelectorAll(':scope > tbody > tr > td.wht_items');
            const newDivCount = divs.length;
            if (newDivCount > divCount) {
                divCount = newDivCount;

                for (const div of divs) {
                    if (div.innerText.includes("Торговая площадка Steam")) {
                        div.style.fontSize = '0px';
                        div.style.height = '0px';
                        div.style.paddingTop = '0px';
                        div.style.paddingBottom = '0px';
                    }
                }
            }
        }
        const observer = new MutationObserver(function(mutations) {
            for (const mutation of mutations) {
                if (mutation.addedNodes.length) {
                    processNewElements();
                }
            }
        });
        observer.observe(parent, {
            childList: true,
            subtree: true
        });
        processNewElements();
    }
})();

Этот скрипт делает похожее но не тоже самое. Он находит нужный текст и применяет стиль к тому тегу в котором его нашел. А нужно на порядок выше. И я не знаю как это сделать. Я полный ноль в JS и в Tempermonkey. К слову CSS я тоже не изучал, но нулевых знаний в CSS достаточно для Stylus.

Что нужно изменить в данном коде что бы он заработал так как нужно?

Дополнение
Моя вторая попытка в код чуть более успешная
(function() {
    'use strict';
    const parent = document.querySelector("#main_content > table > tbody");
    if (parent) {
        let divCount = 0;
        function processNewElements() {
            const divs = parent.querySelectorAll(':scope > tr');
            const newDivCount = divs.length;
            if (newDivCount > divCount) {
                divCount = newDivCount;

                let num = 1;
                for (const div of divs) {
                                                                                  //тут строка не влезла -->
                    if (document.querySelector("#main_content > table > tbody > tr:nth-child(" + num + ") > td.wht_items").innerText.includes("Торговая площадка Steam")) {
                        div.style.fontSize = '0px';
                        div.style.height = '0px';
                        div.style.paddingTop = '0px';
                        div.style.paddingBottom = '0px';
                    }
                    num++
                }
            }
        }
        const observer = new MutationObserver(function(mutations) {
            for (const mutation of mutations) {
                if (mutation.addedNodes.length) {
                    processNewElements();
                }
            }
        });
        observer.observe(parent, {
            childList: true,
            subtree: true
        });
        processNewElements();
    }
})();

Этот код применяет стиль к тегу, если внутри одного из вложенных тегов есть искомый текст. А как сделать что бы стиль применялся не только к главному, но и всем вложенным тегам? В Stylus достаточно добавить * в конце селектора. А в JS как того же результата добиться?

Тут понял что я все еще мыслю в рамках CSS. Для скрытия нежелательного элемента уменьшаю его размеры. А ведь в JS наверно его просто удалить можно с концами? Только вот `div.remove();` почему то ничего не делает...
  • Вопрос задан
  • 68 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы