YouTube - Pesquisa no Menu de Salvar Playlist

[Mato Memo]

Ola!
Não manjo em nada em script, mas tentei criar com as IAs um script que adicione um campo de pesquisa quando for adicionar um vídeo nas minhas playlists, como tenho muitas, às vezes tenho que ficar rolando a barra por um bom tempo até encontrar a ideal para o conteúdo conforme o assunto, mas nenhum deu certo.
Estou usando a extensão Tampermonkey (Firefox). Segue o script que a IA criou e a imagem como desejo que fique esse projeto.

Se alguém conseguir ajudar com essa ideia, fico grato.

 

 

// ==UserScript==
// @name         YouTube - Pesquisa no Menu de Salvar Playlist
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adiciona um campo de pesquisa no menu "Salvar em..." para filtrar playlists rapidamente.
// @author       Voce
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // --- Configurações de CSS ---
    // Usamos variáveis nativas do YouTube para que o estilo se adapte automaticamente ao tema Escuro/Claro
    const SEARCH_STYLES = `
        #yt-playlist-search-container {
            padding: 8px 16px;
            border-bottom: 1px solid var(--yt-spec-10-percent-layer);
            display: flex;
            align-items: center;
        }

        #yt-playlist-search-input {
            width: 100%;
            background-color: var(--yt-spec-general-background-a);
            border: 1px solid var(--yt-spec-10-percent-layer);
            color: var(--yt-spec-text-primary);
            padding: 8px 10px;
            border-radius: 2px;
            font-size: 1.4rem;
            font-family: "Roboto","Arial",sans-serif;
            outline: none;
        }

        #yt-playlist-search-input:focus {
            border-color: var(--yt-spec-call-to-action);
        }

        /* Ícone de lupa (opcional, para ficar igual à imagem de exemplo) */
        .search-icon-wrapper {
            position: absolute;
            right: 30px;
            pointer-events: none;
            color: var(--yt-spec-text-secondary);
            display: flex;
             align-items: center;
        }
    `;

    // Injeta os estilos na página
    const styleSheet = document.createElement("style");
    styleSheet.innerText = SEARCH_STYLES;
    document.head.appendChild(styleSheet);


    // --- Função principal de filtragem ---
    function filterPlaylists(searchText) {
        // Seleciona todos os itens de playlist na lista
        const playlistItems = document.querySelectorAll('ytd-add-to-playlist-renderer ytd-playlist-add-to-option-renderer');

        searchText = searchText.toLowerCase();

        playlistItems.forEach(item => {
            // Tenta encontrar o elemento que contém o texto do título da playlist
            // O seletor pode variar ligeiramente, #checkbox-label ou #label-text costumam funcionar
            const titleElement = item.querySelector('#checkbox-label, #label-text');

            if (titleElement) {
                const titleText = titleElement.textContent.trim().toLowerCase();

                // Se o texto da pesquisa estiver contido no título, mostra, senão, esconde
                if (titleText.includes(searchText)) {
                   item.style.display = ''; // Reseta para o padrão (geralmente flex ou block)
                } else {
                   item.style.display = 'none';
                }
            }
        });
    }


    // --- Função para criar e inserir a barra de pesquisa ---
    function insertSearchBar(container) {
        // Verifica se já não inserimos a barra antes para evitar duplicatas
        if (container.querySelector('#yt-playlist-search-container')) return;

        // O elemento que contém a lista real de playlists
        const listContainer = container.querySelector('#playlists');
        if (!listContainer) return;

        // Cria o container da pesquisa
        const searchWrapper = document.createElement('div');
        searchWrapper.id = 'yt-playlist-search-container';

        // Cria o input
        const inputField = document.createElement('input');
        inputField.id = 'yt-playlist-search-input';
        inputField.type = 'text';
        inputField.placeholder = 'Pesquisar playlist...';
        inputField.autocomplete = 'off';

        // Adiciona o evento de digitação
        inputField.addEventListener('input', (e) => {
            filterPlaylists(e.target.value);
        });


        // (Opcional) Adiciona ícone de lupa para ficar igual à imagem
        const iconWrapper = document.createElement('div');
        iconWrapper.className = 'search-icon-wrapper';
        iconWrapper.innerHTML = '<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 20px; height: 20px;" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" class="style-scope yt-icon"></path></g></svg>';


        // Monta a estrutura
        searchWrapper.appendChild(inputField);
        searchWrapper.appendChild(iconWrapper);

        // Insere o campo de pesquisa logo ANTES da lista de playlists
        listContainer.parentNode.insertBefore(searchWrapper, listContainer);

        // Tenta focar no input automaticamente quando abre
        setTimeout(() => inputField.focus(), 100);
    }


    // --- O Observador (Vigia) ---
    // Como o menu do YouTube abre dinamicamente, precisamos vigiar o DOM
    const observerCallback = function(mutationsList, observer) {
        for(const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // Verifica se nós foram adicionados
                mutation.addedNodes.forEach(node => {
                    // O container principal do menu de playlists geralmente é este:
                    if (node.tagName && node.tagName.toLowerCase() === 'ytd-add-to-playlist-renderer') {
                         // Encontrou o menu, hora de inserir a barra
                        insertSearchBar(node);
                    }
                    // Em algumas versões do layout, pode ser necessário procurar dentro de um container maior
                    else if (node.nodeType === 1 && node.querySelector('ytd-add-to-playlist-renderer')) {
                         insertSearchBar(node.querySelector('ytd-add-to-playlist-renderer'));
                    }
                });
            }
        }
    };

    // Inicia o observador no corpo da página
    // Usamos subtree: true para detectar mudanças profundas na estrutura
    const observer = new MutationObserver(observerCallback);
    observer.observe(document.body, { childList: true, subtree: true });

})();

 

[Frank K Hosaka]

Eu sou péssimo com vídeos, mas acredito que o problema é casar a página principal com o código java script, no exemplo abaixo coloquei o código dentro da página principal:

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Miniaturas do YouTube</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
  <!-- Campo de busca -->
  <div class="mb-6">
    <input 
      id="searchInput"
      type="text" 
      placeholder="Digite o título do vídeo..." 
      class="w-full p-3 border border-gray-300 rounded shadow focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
  </div>

  <div id="videoList" class="space-y-4">
    <!-- Vídeo 1 -->
    <div class="flex items-center gap-4 bg-white p-3 rounded shadow video-item">
      <a href="https://www.youtube.com/watch?v=-voTX2owmjM" target="_blank">
        <img class="w-48 rounded" 
             src="https://img.youtube.com/vi/-voTX2owmjM/hqdefault.jpg" 
             alt="Vídeo 1">
      </a>
      <div>
        <h2 class="text-lg font-semibold">Vídeo 1</h2>
      </div>
    </div>

    <!-- Vídeo 2 -->
    <div class="flex items-center gap-4 bg-white p-3 rounded shadow video-item">
      <a href="https://www.youtube.com/shorts/_X07A6BA8OM" target="_blank">
        <img class="w-48 rounded" 
             src="https://img.youtube.com/vi/_X07A6BA8OM/hqdefault.jpg" 
             alt="Vídeo 2">
      </a>
      <div>
        <h2 class="text-lg font-semibold">Vídeo 2</h2>
      </div>
    </div>
  </div>

  <script>
    const input = document.getElementById('searchInput');
    const videos = document.querySelectorAll('.video-item');

    input.addEventListener('input', () => {
      const query = input.value.toLowerCase();

      videos.forEach(video => {
        const title = video.querySelector('h2').textContent.toLowerCase();

        // Remove destaque anterior
        video.classList.remove('ring-4', 'ring-blue-500');

        // Se o título contém o texto buscado, aplica destaque
        if (query && title.includes(query)) {
          video.classList.add('ring-4', 'ring-blue-500');
        }
      });
    });
  </script>
</body>
</html>