Проще всего это делается через css селектор атрибутов вида
[class^="chat__root__"] . Заметьте я использовал не полное имя класса, а только начало и модификатор
^= указывающий сверять только начало(если класс не первый, то можно использовать
*=). Почему? Потому что "непонятные буковки" в конце - это генерируемый при сборке хэш, который поменяется при выпуске следующей версии фронта и если вы к нему привяжитесь - ваш скрипт очень скоро перестанет работать.
Если фрейм с другого адреса, то надо создать этот userscript именно для этого адреса и уже применять там:
// @run-at document-start
function addCss(css, root = window) {
const style = root.document.createElement('style');
style.innerHTML = css;
(root.document.head || root.document.documentElement).append(style);
return style;
}
const css = `
[class^="chat__root__"] {
dislpay: none !important;
}
`;
addCss(css);
Если с этого же, то придётся заморочиться:
// @run-at document-start
const css = `
[class^="chat__root__"] {
dislpay: none !important;
}
`;
// отлавливаем загрузку фреймов
new MutationObserver(() => {
document.querySelectorAll('iframe:not([us-processed]').forEach((iframe) => {
if (isAccessibleFrame(iframe)) {
// добавляем наш css
addCss(css, iframe.contentWindow);
// на случай если содержимое фрейма перепишут позднее
iframe.addEventListener('load', () => addCss(css, iframe.contentWindow));
}
// помечаем что обработали этот фрем, чтоб не повторять
iframe.setAttribute('us-processed', true);
});
}).observe(document, {childList: true, subtree: true});
// проверяем что содержимое фрейма доступно
function isAccessibleFrame(iframe) {
try {
iframe.contentWindow.test
return true
} catch (e) {
return false
}
}
