Diminuindo a procrastinação no Youtube com CSS

A procrastinação no Youtube pode ser um problema muito sério. Apesar de ser uma ferramenta muito poderosa para estudos, onde é possível encontrar uma infinidade de conteúdos sobre os mais variados assuntos, a plataforma de vídeos também pode te prender por algumas horas seguidas e fazer com que você nem perceba o tempo passar.

Através dos algoritmos, a página inicial e a barra lateral das páginas dos vídeos recomendam vídeos semelhantes com o que você se identifica para que você clique no próximo, e no próximo, e no próximo, e passe o maior tempo possível dentro da plataforma.

Para resolver este problema, não precisamos tomar nenhuma medida drástica como parar de usar o serviço. Existe uma extensão para navegadores chamada Stylus, que permite customizar qualquer página da web.

Derivado de um fork da extensão Stylish, o Stylus permite através de códigos CSS modificar qualquer página da web. Com isso, é possível remover informações indesejadas, alterar cores, fontes e até adicionar um Nyan Cat na barra de vídeo do Youtube.

Tá na mão

Se você não está afim de fazer o código, eu disponibilizei o código no Github, e instalando através dele é possível receber todas as possíveis atualizações de maneira automática.

Para realizar a instalação, basta ter o Stylus instalado no seu navegador e clicar neste link. Será aberta uma página da extensão exibindo o código e no canto esquerdo terá um botão “Install style”. Clique nele e o código já estará aplicado.

Criando o código

Caso você queira entender como o código foi feito, é bem simples. Primeiramente devemos abrir a página em que removeremos a informação, e através da ferramenta de inspeção do navegador (F12), procuramos por uma classe, id ou tag em que iremos utilizar para aplicar o CSS.

No caso do Youtube, a tag utilizada para exibir os vídeos na página inicial é “ytd-rich-grid-renderer”, e os resultados na página do vídeo é “ytd-watch-next-secondary-results-renderer”. Para remover a informação dentro delas, basta passarmos o atributo “display: none;”, como no exemplo abaixo.

ytd-watch-next-secondary-results-renderer, 
ytd-rich-grid-renderer {
	display: none;
}

E pronto! Feito isso, a página inicial do Youtube deve aparecer completamente vazia. Dessa maneira, você só acessa as Inscrições, e só assiste os vídeos que realmente te interessam, ou os que você pesquisar.

Tem alguma sugestão para melhorar este estilo? Deixe nos comentários!