Pitch: Barra de busca para o Tabnews sem sair do Tabnews
Desde o começo da plataforma essa é uma das funcionalidades mais pedidas, então resolvi tentar cria-la e aproveitar para escrever o meu primeiro userscript.
Sobre o projeto
Como visto no gif acima, esse userscript adiciona apenas uma barra simples ao lado do ícone que abre as opções do perfil. Os posts são puxados do Google através de um fetch(), utilizando a API do serviço de proxy do All Origins para não ter problema de erro de CORS.
Devido o serviço ser grátis, possui algumas limitações, mas acredito ser o suficiente para fazer buscas simples. Entretanto, ainda há a opção de trocar o serviço de proxy pelo CorsAnywhere, que retorna mais resultados, porém como o serviço online é só para testes de desenvolvimento, eu coloquei somente a fim de testar, sendo a melhor opção você próprio hospedar o Cors Anywhere caso queira utilizar. Mais informações sobre isso aqui.
As instruções para trocar de proxy você encontra aqui.
Como Instalar
- Primeiro você precisa instalar um dos seguintes gerenciadores de userscripts:
- Greasemonkey (Firefox)
- Tampermokey (Firefox, Chrome, Safari e outros)
- Violentmonkey (Firefox, Chrome e Edge)
- Depois é só clicar em um dos links abaixo para instalar.
- Github (Recomendado)
- Greasy Fork
Desafio e maior aprendizado
Eu decidi colocar essa informação aqui porque pode ajudar outros devs que tiverem o mesmo problema que eu futuramente.
O maior desafio que tive foi o de adicionar a barra aqui no Tabnews, pois como a página não é atualizada quando algum link é clicado da forma tradicional, o evento load do window ou o DOMContentLoaded são acionados só uma vez, e não dá para adicionar a busca só uma vez, pois apesar da página em si não ser atualizada, alguns elementos são, dentre eles o #header, onde a busca é adicionada, fazendo com que o elemento que adicionei seja sobrescrito.
Minha primeira abordagem foi colocar um seTimeout que esperava o #header ser carregado (como você pode ver a partir da linha 26 aqui), mas era uma gambiarra bem estranha, além de gerar alguns bugs e não carregar caso a conexão do usuário fosse lenta, pois à página poderia demorar mais tempo para carregar do que o tempo definido no setTimeout.
Foi então que descobri o MutationObserver, uma interface que propicia observar mudanças no DOM. A partir disso foi só configurar para ficar de olho nas mudanças e adicionar a div da busca caso alguma mudança no #header fosse encontrada :)
Como disse, esse é o meu primeiro userscript, então caso tenham alguma dúvida, sugestões ou dicas de melhoria, passem lá no repositório do projeto: https://github.com/ludwiklejzer/TabBusca
Se você curte userscripts, dá uma olhada nesse outro post que fiz falando mais sobre eles: Melhorando os seus websites favoritos