Já visitou um site e pensou: «Porque é que este botão não está onde devia?», «Quem escolheu este fundo verde tóxico?», «Onde está o modo escuro, programadores?!». E depois abriu as DevTools e começou a editar o CSS diretamente no inspetor, só para ver como poderia ficar.

Faço isto constantemente. Ao longo dos anos a trabalhar com sites, reuni um arsenal de cinco ferramentas que me permitem remodelar quase qualquer site ao meu gosto. Isto não é hacking, as alterações só são visíveis para si, na sua máquina. Essencialmente, é modding, como nos jogos: muda-se um modelo, pinta-se a interface, removem-se elementos irritantes. O site permanece igual para todos os outros, mas para si torna-se exatamente aquilo que quer ver.

💡 Visão geral rápida:

• Instale o Stylish e escolha um tema pronto no Userstyles.org, o site muda antes de carregar
• Domine o Bloquear Elemento no uBlock Origin, remova qualquer elemento irritante de um site em dois cliques
• Adicione um script de utilizador através do Tampermonkey, automatize ações nas suas plataformas favoritas
• Abra as DevTools (F12) e edite o site como se fosse texto, todas as alterações desaparecem após recarregar
• Configure o Burp Suite como um proxy HTTP, intercete e substitua dados em tempo real

1. Stylish, mudança instantânea da aparência do site

Stylish, a minha extensão de browser cosmética favorita. Aplica estilos personalizados a uma página antes de esta ser renderizada. Sem o flash do design original que acontece com scripts de utilizador: abre o YouTube e vê imediatamente o seu Hello Kitty cor-de-rosa, não o tema padrão branco e vermelho.

A extensão tem mais de dez anos, é atualmente propriedade da Similarweb e tem 2 milhões de utilizadores. A biblioteca Userstyles.org contém mais de meio milhão de temas prontos, desde modos escuros para o Google Docs até retro-wave para o YouTube.

Porque é que o Stylish é fundamentalmente melhor do que edições manuais nas DevTools? Porque os estilos são persistentes: fecha o browser, abre-o amanhã, o tema continua lá. Além disso, é conveniente alternar entre temas com um clique, se um site tiver vários temas.

O que pode fazer:

• Ativar o modo escuro em qualquer site que não tenha um
• Restaurar o design antigo do site após um redesenho (sim, provavelmente alguém já escreveu esse estilo)
• Aumentar o tamanho da fonte ou o contraste para legibilidade
• Ocultar elementos de distração, como cabeçalhos fixos ou pop-ups de subscrição

Criar o seu próprio estilo requer CSS. A sintaxe básica é simples: seletor, propriedade, valor. Para estilos complexos, recomendo uma alternativa, o Stylus, um gestor de estilos de código aberto sem telemetria.

2. UBlock Origin, bloqueio cirúrgico de elementos

uBlock Origin, este é principalmente um bloqueador de anúncios, mas a sua função «Bloquear Elemento» merece um lugar à parte nesta lista. Permite-lhe remover qualquer coisa de um site: um banner irritante, um avatar de utilizador que o incomoda, um contador de «só restam 3 lugares», um widget de meteorologia que ocupa meia página.

Sempre que vejo a internet sem um bloqueador, por exemplo no computador de outra pessoa, não acredito na quantidade de lixo que existe. Será que as pessoas veem realmente o YouTube com cinco inserções de anúncios num vídeo de dez minutos?

Como funciona o Bloquear Elemento: clique com o botão direito num elemento → «Bloquear elemento» → o uBlock destaca o alvo e sugere um seletor CSS. Pode subir na árvore DOM e expandir os critérios, por exemplo, bloquear não um banner específico, mas todo o contentor com o iframe de publicidade. O filtro é guardado permanentemente.

Técnica avançada, o separador «Os Meus Filtros» nas definições. Pode introduzir filtros de URL com caracteres universais para proibir o carregamento de categorias inteiras de recursos. Usei isto para desativar ficheiros JS problemáticos de plugins e temas do WordPress ao procurar conflitos de compatibilidade em sites de clientes.

3. Tampermonkey, scripts para todas as ocasiões

Tampermonkey, a ferramenta mais poderosa desta lista. É um gestor de userscripts com 12 milhões de instalações que lhe permite executar o seu próprio JavaScript em qualquer site. Se o Stylish altera a aparência e o uBlock remove o excesso, o Tampermonkey acrescenta novos comportamentos.

O meu cenário número um: a guerra contra os pop-ups anti-adblock. Conhece o esquema: visita um site, o bloqueador remove os anúncios e o site deteta isso e exibe um banner «Por favor, desative o seu bloqueador». O uBlock às vezes resolve, mas se o site usar classes e IDs aleatórios (para escapar aos filtros), o Tampermonkey entra em ação. Escrevo um script que procura um elemento com um texto específico ou uma imagem e remove todo o contentor pai. Rudimentar, mas funciona.

Cenários mais pacíficos:

• Adicionar um botão «Descarregar tudo» a uma página de ficheiros
• Preencher formulários automaticamente com dados padrão
• Ativar a qualidade HD no YouTube por predefinição (embora já existam extensões dedicadas para isto)
• Expandir a funcionalidade de administração de um site adicionando atalhos de teclado ou um painel de ações rápidas

Encontre scripts prontos a usar no Greasy Fork e no OpenUserJS. Há milhares de scripts para todas as ocasiões, desde o descarregamento de vídeos a melhorias na interface do GitHub. Para operações sensíveis (palavras-passe, pagamentos), recomendo desativar o Tampermonkey ou adicionar sites à lista negra nas definições da extensão.

4. Ferramentas de programador, parque de diversões para experiências

Passo mais tempo nas Ferramentas de Programador do Chrome do que em qualquer IDE. A programar plugins para WordPress, isto é sobretudo tentativa e erro: imaginei → ajustei no inspetor → gostei → codifiquei. Sem as DevTools, seria muito mais lento.

Para não programadores, as ferramentas de programador são uma caixa de areia onde pode alterar temporariamente um site e ver o resultado instantaneamente. Abra as DevTools (F12), vá ao separador Elementos, selecione Inspecionar (seta no canto do painel) e clique em qualquer parte da página. Edite texto, mude cores, mova blocos, elimine elementos. Após recarregar a página, tudo volta ao normal.

O cenário mais comum para não programadores: preparar uma captura de ecrã ou versão para impressão. Antes de capturar, remova tudo o que for desnecessário da página: blocos de anúncios, pop-ups, widgets de chat, colunas extra. Exporte com o botão Print Screen e obterá uma imagem limpa e concisa, como se o site tivesse sido originalmente concebido dessa forma.

No separador Rede há outra funcionalidade interessante: clique com o botão direito em qualquer pedido → «Bloquear URL do pedido» ou «Bloquear domínio do pedido». Uso isto quando preciso de verificar como um site funciona sem um script ou tipo de letra específico, por exemplo, para localizar a origem de um conflito num projeto de um cliente.

5. Burp Suite Community Edition, interceção de tráfego

O método mais hardcore dos cinco. Burp Suite, isto é um proxy HTTP interativo: fica entre o seu browser e o servidor e pode intercetar, parar e modificar qualquer pedido ou resposta. A Community Edition, a versão gratuita da PortSwigger, é mais do que suficiente para fazer «modding» de sites.

Porque é que isto é necessário? Há situações em que nem o CSS nem o JavaScript do lado do cliente conseguem dar o resultado desejado porque os dados já vêm do servidor na forma «errada». O Burp interceta a resposta do servidor antes de o browser a processar e permite-lhe substituir JSON, HTML ou cabeçalhos em tempo real. O site renderiza como se o servidor tivesse enviado exatamente aquilo que substituiu.

Caso real: num projeto, a API devolvia uma lista de produtos com o campo "available": false para as posições que não estavam em stock. Eu precisava de verificar o layout do cartão de produto para diferentes estados. Em vez de mexer na base de dados ou pedir ao programador de backend para gerar dados de teste, intercetei a resposta no Burp, mudei alguns false para true e, num segundo, vi o layout do produto «disponível».

A parte mais difícil no Burp é a configuração inicial. Tem de indicar o endereço do proxy (localhost:8080) nas definições do browser e instalar o certificado SSL do Burp para trabalhar com sites HTTPS. Sem o certificado, o browser vai queixar-se de uma «ligação insegura». Na documentação oficial da PortSwigger, este processo está descrito passo a passo.

⁉️🤔 Perguntas frequentes

É legal alterar sites desta forma?

Sim, porque as alterações ocorrem exclusivamente no seu dispositivo. Não está a piratear o servidor, a roubar dados, nem a contornar uma paywall. É equivalente a mudar o papel de parede num apartamento: as paredes são as mesmas, o aspeto é diferente. A única exceção são os scripts automatizados que criam uma carga excessiva no servidor (por exemplo, parsing em ciclo sem pausa). Seja razoável.

Que ferramenta devo escolher se não sou programador?

Comece pelo Stylish: instale a extensão, vá a Userstyles.org, escolha um tema, está feito. Para bloquear elementos irritantes, o uBlock Origin com a função Block Element não requer código. O Tampermonkey e o Burp Suite são para quem está pronto a escrever ou, pelo menos, a ler código.

É possível partir um site com estas edições?

Para si, sim, é possível. Parte da página pode deixar de funcionar se apagou o elemento errado ou cobriu um botão importante com o seu estilo. Mas isso resolve-se desativando a extensão ou repondo os filtros. Para os outros utilizadores, o site permanecerá intacto, as suas alterações são locais.

O que fazer se um site detetar o Tampermonkey e bloquear o conteúdo?

Alguns sites verificam a existência de extensões via JavaScript. Experimente um gestor alternativo, o Violentmonkey, que é menos conhecido e menos vezes apanhado pela deteção. Ou execute o script através de um snippet nas DevTools (separador Sources → Snippets), uma função integrada do Chrome que não é monitorizada pelo site.

Existe o risco de a própria extensão estar a espiar-me?

A pergunta é razoável. O Stylish até 2017 pertencia a um proprietário diferente e, de facto, recolhia dados. Agora, a extensão é propriedade da Similarweb, com uma política de privacidade publicada, a recolha é anonimizada e pode ser desativada nas definições. Se quiser uma ferramenta completamente aberta, sem telemetria, instale o Stylus (alternativa open-source). O mesmo para scripts: o Tampermonkey recolhe estatísticas anónimas (versão, idioma, SO), desativáveis nas definições com a opção «Anonymous statistics».

Como funcionam estas ferramentas em dispositivos móveis?

No Android, no Firefox, pode instalar o uBlock Origin e o Tampermonkey como extensões, é um método legítimo. No iOS, a situação é pior: a Apple restringe as extensões. Uma alternativa parcial é o navegador Orion, que suporta extensões do Chrome e do Firefox no iOS. O Stylish em mobile funciona através de uma aplicação separada.

Vale a pena alterar os sites à nossa medida?

Se leu até aqui, a resposta é provavelmente «sim». A web não é um produto acabado, mas sim matéria-prima. Alguém desenhou a interface para um utilizador médio, e você não é um utilizador médio. Tem os seus próprios hábitos, o seu próprio gosto, os seus próprios gatilhos de irritação.

O meu top pessoal por relação esforço-resultado: comece com o uBlock Origin (5 minutos no Block Element e o site já está limpo), adicione o Stylish para as suas plataformas favoritas (mais 10 minutos e tem um tema escuro onde nunca existiu um) e, quando quiser automação, abra o Greasy Fork e procure um script pronto para a sua tarefa. As DevTools e o Burp ficam para os casos em que as três primeiras ferramentas não resolvem.

Pode começar em cinco minutos com uma extensão e, num mês, não reconhecerá o seu navegador, depois de reunir uma coleção de temas, scripts e filtros para duas dezenas de sites. Isto é um hobby com uma barreira de entrada baixa e um teto infinito. Como a personalização do ambiente de trabalho do Windows nos anos 2000, só que dimensionado para toda a internet.