Доброго времени суток
Обратите внимание на этот кусок кода
<div id="main_content" class="page_content">
<table>
<tbody>
<tr data-panel="{"focusable":true,"clickOnActivate":true}" ...бля бля бля многа текста...>
<td class="wht_date">8 июн. 2025 г.</td>
<td data-tooltip-text="Подробная история Торговой площадки" class="wht_items " "="" aria-describedby="tooltip-3">
Торговая площадка Steam </td>
<td class="wht_type ">...<div>
<td class="wht_total ">...<div>
<td class="wht_wallet_change wallet_column" ...бла бла бла очень много чего не важного для меня...>...</td>
<td class="wht_wallet_balance wallet_column" ...бла бла бла все еще много не важного для меня...>...</td>
</tr>
<tr data-panel="{"focusable":true,"clickOnActivate":true}" ...бля бля бля многа текста...>
<td class="wht_date">28 авг. 2024 г.</td>
<td data-tooltip-text="Получить помощь по поводу этой покупки" class="wht_items " "="" aria-describedby="tooltip-69">
На кошелёк переведено 15 000₸ </td>
<td class="wht_type ">...</td>
<td class="wht_total ">...</td>
<td class="wht_wallet_change wallet_column" ...бла бла бла очень много чего не важного для меня...>...</td>
<td class="wht_wallet_balance wallet_column" ...бла бла бла все еще много не важного для меня...>...</td>
</tr>
<tr>и так далее</tr>
<tr>и тому подобное</tr>
<tr>повторение</tr>
Мне нужен скрипт который бы скрывал, или полностью удалял теги селектора
#main_content > table > tbody > tr, если в теге селектора
#main_content > table > tbody > tr > td.wht_items встречается текст:
- "Подробная история Торговой площадки"
- "Торговая площадка Steam"
- "На кошелёк переведено N сумму в валюте X"
Три варианта. Я смог реализовать первый вариант используя CSS и расширение браузера 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;
}
}
И то этот скрипт не удаляет, а скрывает (уменьшает размеры) элементов внутри тега селектора
#main_content > table > tbody > tr, если в теге селектора глубже есть искомый текст
#main_content > table > tbody > tr > td.wht_items[data-tooltip-text="Подробная история Торговой площадки"
Но работает это только если текст внутри атрибута, в данном случае внутри "data-tooltip-text"
<td data-tooltip-text="Подробная история Торговой площадки">
А что если текст это элемент тега? Например
<td>Торговая площадка Steam</td>, или более того, если нужно добавить регулярное выражение или что-то в этом роде. Тут ведь Stylus и CSS уже не поможет, верно?
Я переключился на Tempermonkey, там скрипты уже пишутся на JS, в котором я полный ноль. Я лишь немного изучал CS. К слову и в CSS я полный ноль но это не мешало создавать скрипты для Stylus.
Так вот, на Tempermonkey есть такой скрипт
(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();
}
})();
Этот скрипт находит все вхождения
#main_content > table > tbody > tr, а затем циклом через пень колоду проверяет каждое вхождение в котором содержится искомый текст. После чего применяет стиль.
НО. Текст ищется в селекторе
#main_content > table > tbody > tr > td.wht_items, а стиль применяется только к селектору
#main_content > table > tbody > tr. От чего элемент не пропадает полностью как в случае с Stylus. Там достаточно было добавить символ "*" в конце селектора, что бы заставить применятся стиль во всех вложенных тегах.
#main_content > table > tbody > tr:has(td.wht_items[data-tooltip-text="Подробная история Торговой площадки"]) *
А вот как сделать это в Tempermonkey я пока не знаю. Я пытался заменить все
div.style. на один единственный
div.remove();, что б не скрывать от глаз, а совсем удалить эти элементы. Но это работает не так как я ожидал, оно почему то удаляет даже то что не нужно, а то что нужно удаляет не все.
***
В общем мне нужна помощь с созданием скрипта Tempermonkey который будет искать текст элемента и атрибута внутри тегов
#main_content > table > tbody > tr > td.wht_items, и при нахождении скрывать/удалять родительский тег, а именно
#main_content > table > tbody > tr
Надеюсь я достаточно подробно все описал?
Простой
