Почему у сайта такие странные классы?

Question

[salimov2292]

Привет!

У сайта имеются странные классы: SettingsPage__title, ___Tag___3ts3I __use--kind___3X81B __use--kind_body___16mdq

Скажите, пожалуйста, как обойти их, чтобы с помощью расширения стилизовать их? На каком-то другом сайте, где есть классы по БЭМ я могу с помощью JS стилизовать цвет, фон, а на таких сайтах, где есть такие классы нет.

const btnka = document.querySelector('.question__title');
btnka.style.backgroundColor = 'red';

На обычном сайте этот код окрашивает элемент, а на сайте с классами SettingsPage__title, ___Tag___3ts3I __use--kind___3X81B __use--kind_body___16mdq не трогает стилизацию.

Мне подсказали, что чтобы изменить цвет, то надо как-то приоритет настроить, но как? Я пишу расширение и оно должно окрашивать кнопку, а оно не окрашивает, ибо класс странный

Comments

[maksam07]

Классы, возможно, генерируются через какой-то фреймворк. И не факт, что при следующей компиляции, классы снова не изменятся.

[salimov2292]

maksam07, а как это обойти? чтобы стилизовать хоть что-то на сайте.

[maksam07]

salimov2292, наверное пытаться искать класс по вхождению слова, а не по названию класса целиком.

[salimov2292]

Александр Котов, я за сегодня столько решений уже перепробовал и ни одно не сработало, а потом я увидел почему - классы странно сгенерированы, никак БЭМ. Может в коде разрабов классы норм, но на продакшине и сайте - чушь какая-то, которая не меняется. Ни один стиль нельзя изменить(

[salimov2292]

Александр Котов, даже, если пробовать по тегу изменить что-либо, то не дает

[Александр]

salimov2292,
Можете скинуть ссылку на один из таких сайтов? и напишите какой именно стиль и где нужно изменить, попробуем решить проблему

[Вадим]

salimov2292, выбы ссылку дали. Потому что фраза "стиль не меняется" говорит только о том - что вы не достаточно хорошо понимаете что делаете.

[salimov2292]

Александр Котов,

Обычный сайт Яндекс почта

const btnka = document.querySelector('.mail-Layout-Aside-Background');
btnka.style.backgroundColor = 'red';

Например, классы Хабра я могу изменить с помощью расширения, а классы Яндекс Почты не изменяются и возникает ошибка:
Uncaught TypeError: Cannot read properties of null (reading 'style')

[Алексей Ярков]

salimov2292, так надо проверку добавить, типа console.log(btnka)
И будет видно, что код расширения выполняется ДО появления элемента на странице.

[salimov2292]

Алексей Ярков, но на других сайтах работает, как и задумано. При console.log выдается null :c

[Вадим]

salimov2292, так у вас и без консоль лога выдаёт null. Выше, в тексте ошибки.
То, что на других сайтах работает, не значит что везде будет работать. Значит на других сайтах блоки которые вы меняете не асинхронно подгружаемые или загружаются раньше чем расширение .
Тут можно посмотреть в сторону mutation observer, либо в head добавить кастомную секцию style где будет css меняющий стили этого блока с important

[salimov2292]

Вадим, а как в head будет правильно это сделать? через JS, т.к. я не имею доступа к коду сайта, но нужно будет получается через js добавить?

[Вадим]

salimov2292, да. Найти элемент head, создать элемент style, задать текстовое содержимое для style - css правило, добавить style в head.

[salimov2292]

Вадим,

let head = document.getElementsByTagName('head')[0];
let styleR = document.createElement('style');
head.appendChild(styleR);
styleR.innerHTML =
  '.amber-button_theme_accent { background-color: #FA8072 !important; }';
head.appendChild(styleR);

Получилось примерно так и все заработало))) спасибо большоеееееееее

Answer 1

[Вадим]

У вас querySelector выдаёт null. Выше, в тексте ошибки.
То, что на других сайтах работает, не значит что везде будет работать. Значит на других сайтах блоки которые вы меняете не асинхронно подгружаемые или загружаются раньше чем расширение .

Тут можно посмотреть в сторону mutation observer, либо в head добавить кастомную секцию style где будет css меняющий стили этого блока с important. То есть найти элемент head, создать элемент style, задать текстовое содержимое для style - css правило, добавить style в head.

Код от автора вопроса, решивший проблему по вышеописанному лагоритму:

let head = document.getElementsByTagName('head')[0];
let styleR = document.createElement('style');
head.appendChild(styleR);
styleR.innerHTML =
  '.amber-button_theme_accent { background-color: #FA8072 !important; }';
head.appendChild(styleR);