Как заблокировать URL на стороне клиента, используя код на сайте?

Question

[kudrbudr]

Привет, сразу к сути: иконка Google Translate раздражает пользователей, и мне захотелось скрыть надоедливую иконку.

Коротко о чем речь

Сценарий: элемент body > div:nth-child(6) > div меняется после полной загрузки страницы, добавляется еще один рандомный класс и сразу исчезает, получается class="рандомный-класс-без-пробела рандомный-класс-без-пробела".

Далее скрипт Google выполняет запрос на https:\/\/www\.gstatic\.com\/_\/translate_http.*\/m=el_main_css$ загружая стили.

Я попросил GPT-4 заблокировать https:\/\/www\.gstatic\.com\/_\/translate_http.*\/m=el_main_css$ учитывая сценарий и он мне выдал такой код:

// Создаем экземпляр MutationObserver и передаем ему функцию обратного вызова
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Если изменение произошло в классе и класс содержит пробел, блокируем запрос
        if (mutation.attributeName === 'class') {
            var circle = mutation.target;
            if (circle.className.indexOf(' ') >= 0) {
                (function() {
                    var open = window.XMLHttpRequest.prototype.open;
                    function openReplacement(method, url, async, user, password) {
                        var regex = /^https:\/\/www\.gstatic\.com\/_\/translate_http.*\/m=el_main_css$/;
                        if (regex.test(url)) {
                            console.log('Blocked a request to: ' + url);
                            return;
                        }
                        return open.apply(this, arguments);
                    }
                    window.XMLHttpRequest.prototype.open = openReplacement;
                })();
            }
        }
    });
});

// Указываем, какие изменения мы хотим отслеживать
var config = { attributes: true, childList: false, characterData: false };

// Запускаем наблюдение за элементом и его дочерними элементами
var targetNode = document.querySelector('body > div:nth-child(6) > div');
if (targetNode) {
    observer.observe(targetNode, config);
}

Код использует MutationObserver для отслеживания изменений атрибута class элемента div и затем переопределяет метод open для объекта XMLHttpRequest, чтобы блокировать запросы к определенному URL. (gpt)

Но это не работает :(

Возможно ли как-то скрыть иконку Google Translate? Подскажите пожалуйста, хотя бы направление куда копать/

Answer 1

[kudrbudr]

Блокировать запрос не получилось, но вот решение

// Создаем экземпляр MutationObserver и передаем ему функцию обратного вызова
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var element = document.querySelector('body > div:nth-child(27) > div');
        if (element) {
            element.style.setProperty('display', 'none', 'important');
        }
    });
});

// Указываем, какие изменения мы хотим отслеживать
var config = { attributes: true, childList: true, subtree: true };

// Запускаем наблюдение за элементом и его дочерними элементами
var targetNode = document.querySelector('body');
if (targetNode) {
    observer.observe(targetNode, config);
}

Answer 2

[Камил]

Если ваша цель - просто скрыть иконку Google Translate, а не полностью блокировать функциональность перевода, возможно, вам будет проще использовать CSS для скрытия элемента. Если иконка находится в определенном элементе, вы можете просто применить к нему display: none.

Например:

#google-translate-element {
    display: none !important;
}

Где #google-translate-element - это id элемента, в котором находится иконка Google Translate. Этот способ будет работать, если вы можете точно идентифицировать элемент, содержащий иконку.

Если же иконка перевода появляется в результате работы JavaScript, и вы действительно хотите блокировать запросы, ваш подход с переопределением XMLHttpRequest.prototype.open может работать, но важно убедиться, что ваш код выполняется до того, как выполняются запросы. Возможно, вам придется использовать что-то вроде window.onload или document.addEventListener('DOMContentLoaded', ...), чтобы убедиться, что ваш код выполняется в нужное время.

Также стоит отметить, что переопределение XMLHttpRequest.prototype.open может не работать для всех запросов, особенно если используются новые API для выполнения HTTP-запросов, такие как fetch.

Comments

[kudrbudr]

Такое чувство будто вы сгенирили ответ с помощью ChatGPT))

CSS это конечно самое очевидное, но как применить правило для `body > div:nth-child(6) > div` не затрагивая элементы самого сайта? Привязать правила к статичным `id` и `class` не получится, так как эти данные у иконки динамически меняются.

И я конечно знаю что скрипт должен выполняться до "появление" иконки.