Блокування банерів Google

У мене є пропозиція щодо використання Google-перекладача (звісно, якщо ви його використовуєте у CMS).

Після перекладу сторінки, коли ви наводите курсор миші на абзац, то він підсвічується, і з'являється спливаючий банер з пропозицією оцінити сервіс. Так от, наступна пропозиція полягає в тому, щоб його прибрати, як тільки Google-перекладач завершить свою роботу.

Знайшов лише два шляхи:

• Дочекатися завантаження ДОМ і спробувати його хакнути JS-скриптом.
• Додати стилі, які просто блокують цю всю історію.

Скажу відразу, що тільки зі скриптом і DOMом у мене нічого не вийшло, хоча покликаний на допомогу Copilot обіцяв, що це легко. А от стилі в голові сторінки - працюють на ура, хоча й теж не самостійно.

Приклад CSS на розгляд:

<style>
#goog-gt-tt,
.goog-tooltip.skiptranslate,
.activity-root,
.status-message,
.started-activity-container {
    display: none !important;
    visibility: hidden !important;
    top: 0px !important;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
	margin-top: 0 !important;
}
font {
    background-color: transparent !important;
    box-shadow: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
</style>

Все добре, але залишається зверху пустота після фрейму з банером Google, хоча самого банера уже й не видно. Тому, тут уже діємо скриптом:

<script>
function removeBanner() {
    const banner = document.querySelector('iframe[src*="translate.goog"]');
    if (banner) {
        banner.remove();	// Видалити iframe, якщо є
    }
}

// Cлідкуємо за змінами в DOM і видаляємо iframe щоразу, як він з'являється
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            removeBanner();
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

window.addEventListener('load', removeBanner); // Видалити банер при завантаженні сторінки
</script>

З плюсів - перезапуску DOM немає, але він відслідковується. Замість простого видалення iframe після завантаження сторінки, використовується MutationObserver. Він слідкує за змінами в DOM і видаляє iframe щоразу, коли той з'являється. Може, є ще способи, але я кращого не придумав.

Для порівняння можна переглянути оригінальна сторінка, і з урахуванням змін - виправлена версія.

Ну й на цьому все сьогодні.