Расширение YouTube не может прокрутить за пределы определённой точки

На чтение 3 мин Опубликовано 21.09.2024

Вопрос или проблема

Я создаю расширение для YouTube (аналог unhook), которое скрывает определенные видео, отфильтрованные по ключевым словам. Проблема, с которой я сталкиваюсь, заключается в том, что после фильтрации главной страницы на экране появляется только 3-4 видео. Я подозреваю, что расширение проверяет всю главную страницу и возвращает только отфильтрованные, но не прокручивается, чтобы перейти за пределы точки прокрутки по умолчанию (у YouTube бесконечное количество видео на главной странице, поэтому невозможно получить только 3-4 из них). Я хочу узнать, как мы можем сделать расширение таким образом, чтобы можно было прокручивать так, чтобы расширение снова начало фильтровать, и видео продолжали фильтроваться и появляться?

Сначала я думал, что расширение должно работать непосредственно для всей главной страницы, но это не так, и оно фильтрует главную страницу лишь до определенной длины.

Ответ или решение

Для решения проблемы с вашим расширением для YouTube, которое фильтрует видео на главной странице, вам необходимо учесть, что YouTube использует бесконечный скроллинг для загрузки новых видео по мере прокрутки вниз. Ваша задача заключается в автоматизации этого процесса, чтобы ваше расширение могло фильтровать видео динамически по мере загрузки новых.

Вот пошаговое руководство, которое поможет вам добиться желаемого эффекта:

Наблюдение за прокруткой: Используйте метод Intersection Observer или отслеживайте события скроллинга через window.onscroll. Это позволит вашему расширению отслеживать, когда пользователь прокручивает страницу до конца и загружает новые видео.
Фильтрация загруженных видео: После каждой прокрутки, когда новые видео загружаются, добавьте логику для фильтрации загруженных элементов. Вы можете сделать это, добавив функцию, которая проверяет каждый загруженный элемент на наличие ключевых слов, и скрывает или удаляет их при необходимости.
Реализация автоматической прокрутки: Если скроллинг по событию не срабатывает, вы можете создать программу, которая будет автоматически прокручивать страницу вниз через заданные интервалы времени. Это можно сделать с использованием setInterval, который будет вызывать window.scrollTo для прокрутки на фиксированное расстояние.
Обновление списка видео: После каждой прокрутки убедитесь, что ваше расширение обновляет список отображаемых видеороликов и применяет фильтры. Это можно реализовать через функцию, которая будет повторно вызывать вашу фильтрацию после каждой загрузки новых элементов.
Оптимизация производительности: Помните, что работа с большим количеством видео и частые вызовы функций могут замедлить работу вашего расширения. Поэтому стоит рассмотреть возможность использования механизма дебаунса или троттлинга для оптимизации выполнения фильтров.

Пример кода:

let lastScrollHeight = 0;

const filterVideos = () => {
    const videos = document.querySelectorAll('ytd-rich-item-renderer');
    videos.forEach(video => {
        const title = video.querySelector('h3.title-and-badge>a').innerText;
        // Замените 'ключевое слово' на ваши условия фильтрации
        if (title.includes('ключевое слово')) {
            video.style.display = 'none'; // Скрыть видео
        }
    });
};

const checkScroll = () => {
    if (document.body.scrollHeight !== lastScrollHeight) {
        lastScrollHeight = document.body.scrollHeight;
        filterVideos();  // Примените фильтрацию после загрузки новых видео
    }
};

const autoScroll = () => {
    window.scrollTo(0, document.body.scrollHeight);
    setTimeout(checkScroll, 1000);  // Проверять обновления каждую секунду
};

// Запускаем автоматический скроллинг
setInterval(autoScroll, 2000); // Прокрутка каждые 2 секунды

Таким образом, ваше расширение будет автоматически прокручивать страницу, позволяя загружать дополнительные видео и фильтровать их в реальном времени. Надеюсь, это поможет вам решить вашу проблему с фильтрацией видео на главной странице YouTube.