Pesquisar na Comunidade

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 }); })();