Отображение тегов текстом в посте на Boosty в одну строку
Скрипт предназначен для изменения способа отображения тегов к постам на сайте boosty.to. Стандартный интерфейс Boosty отображает теги в виде отдельных "плашек" или "пузырьков", которые могут занимать много места, особенно если тегов много.
Цель данного скрипта — заменить этот блочный вывод на компактную текстовую строку. Он сканирует посты, извлекает текст из всех тегов, объединяет их через запятую и вставляет в новый, единый текстовый блок, после чего скрывает оригинальный контейнер с тегами.
processPost(postElement):
[data-test-id="COMMON_POST:ROOT"]).data-tags-formatted = 'true'. Это предотвращает повторную обработку одного и того же поста при последующих срабатываниях MutationObserver.[class*="..."]), чтобы найти динамически генерируемые классы Boosty (стиль CSS Modules). Он находит контейнер тегов (PostTags-scss--module_root) и сами теги (PostTag-scss--module_title).Array.from().map().filter().join() скрипт собирает textContent из всех найденных тегов, очищает их от пробелов и объединяет в одну строку, разделенную запятыми (например, "art, wip, sketch").<div>, в который помещается строка с тегами (с префиксом "Теги:"). Этот новый блок вставляется в DOM перед оригинальным контейнером тегов. Сразу после этого оригинальный контейнер скрывается через style.display = 'none'.MutationObserver (Наблюдатель DOM):
MutationObserver для отслеживания изменений во всем document.body с опциями { childList: true, subtree: true }.MutationObserver обнаруживает эти добавления.[data-test-id="COMMON_POST:ROOT"]) или содержит ли он посты, и для каждого нового поста вызывает функцию processPost.Инициализация:
document.querySelectorAll для обработки всех постов, которые уже присутствуют на странице в момент загрузки (первая партия постов).MutationObserver для отслеживания всех постов, которые будут загружены позже.boosty.to, содержащую ленту постов (например, главную страницу блога автора).MutationObserver в сочетании с первичной обработкой querySelectorAll — это ключевая особенность, позволяющая скрипту корректно работать на динамических сайтах, подобных Boosty, где контент загружается асинхронно без перезагрузки страницы.[class*="..."]). Это делает его более устойчивым к обновлениям сайта, при которых меняются хэши в CSS-классах (например, PostTags-scss--module_root_a1b2c), но базовая часть имени (PostTags-scss--module_root) остается неизменной.data-атрибута в качестве флага, скрипт гарантирует, что каждый пост будет обработан только один раз, даже если MutationObserver по какой-либо причине сработает на нем повторно.display: none). Это более безопасный подход, который не нарушает работу других скриптов, потенциально ожидающих наличие этого блока в DOM.