Manual - Stylebot

Primeiros passos

Clique no ícone do Stylebot na barra de ferramentas e depois em Estilizar esta página. Ou prima alt+shift+M em qualquer separador, ou clique com o botão direito num elemento e escolha Stylebot → Estilizar elemento.

O separador Básico, a escolher uma ligação num artigo da Wikipédia

Clique no seletor de elementos, passe o cursor pela página e clique num elemento. Prima ↑ antes de clicar para selecionar o elemento pai. Depois altere-o em Básico, ou escreva CSS em Código. As alterações são guardadas à medida que as faz e aplicadas sempre que visitar o site.

Tipos de letra: Pesquise entre 400 Google Fonts e o Stylebot carrega a que escolher, ou escreva o nome de qualquer tipo de letra instalado no seu computador.
Posição do editor: No Chrome e no Edge, o editor abre no painel lateral. Use Posição no menu ⋯ do editor para o abrir numa janela separada ou fixá-lo na página. O Firefox e o Safari não têm painel lateral.
Desativar um estilo: Use o interruptor no pop-up, ou alt+shift+S. O estilo é mantido, apenas deixa de ser aplicado.

Alguns sites usam nomes de classes gerados automaticamente, que mudam quando o site é atualizado. Se um estilo deixar de funcionar, escolha o elemento novamente para obter um seletor novo.

Perfis

Um perfil é uma folha de estilos separada para o mesmo site, para poder ter mais do que um aspeto e alternar entre eles. Só é aplicado um de cada vez, e todos os sites começam com Padrão.

Clique no nome do perfil ao lado do site, no cabeçalho do editor, para criar, renomear, duplicar ou eliminar perfis. Alterne entre eles aí ou no pop-up, onde Sem estilo desativa o estilo no site. Os perfis novos começam vazios.

Predefinições

O separador Predefinições tem duas, e ambas se combinam com as suas próprias alterações. O Modo legível transforma os artigos de um site numa vista de leitura limpa, com escolha de tema, tipo de letra, tamanho e largura; as páginas que não são artigos ficam como estão. A Escala de cinzentos remove a cor do site, com a intensidade que quiser.

O artigo da Wikipédia sobre Matemática no modo legível, com as definições de leitura abertas

Sincronização e histórico de versões

Opções, ligado ao Google Drive e sincronizado

Sincronização com o Google Drive: Ligue o Google Drive nas Opções. Os seus estilos, incluindo os perfis, são sincronizados a cada 30 minutos e logo após cada edição. O Stylebot só vê os ficheiros que cria no seu Drive, e não existe nenhum servidor do Stylebot.
Conflitos: Se um estilo tiver sido alterado em dois computadores, a sua edição mais recente é mantida e a outra versão fica guardada num comentário, para que nada se perca.
Backup: Exporte e importe todos os seus estilos em JSON a partir das Opções.
Histórico de versões: Todas as alterações feitas neste computador ficam guardadas nas Opções, incluindo as que chegam pela sincronização. Restaure qualquer versão anterior, para alguns sites ou para todos.

Histórico de versões nas Opções, com a alteração mais recente primeiro

Galeria

A Galeria reúne estilos que outras pessoas criaram com o Stylebot. Pré-visualize um no site a que se destina, leia o respetivo CSS e instale-o com um clique.

Publicar um estilo: Escolha Publicar na Galeria no menu ⋯ de um estilo no pop-up, ou no menu ⋯ do editor, e inicie sessão com o Google. As suas edições ficam no seu computador até publicar uma atualização.
Os seus estilos: Inicie sessão na Galeria para mudar o nome ou eliminar os estilos que publicou, e para alterar o seu nome de utilizador.

Regras de URL

Por predefinição, o Stylebot associa os estilos aos sites pelo nome de domínio. Edite o URL de um estilo nas Opções e use estes padrões para algo mais específico.

**Corresponde a qualquer sequência de caracteres.

*Corresponde a qualquer sequência de caracteres até encontrar uma /.

,Separa uma lista de padrões. Um URL corresponde se algum dos padrões corresponder.

^No início de um URL, transforma-o numa expressão regular.

Exemplos

docs.google.com: O domínio docs.google.com ou qualquer um dos seus subdomínios.
docs**: Qualquer URL que comece por docs.
docs*.google.com: docs.google.com, docs1.google.com, docs2.google.com e assim por diante.
*.ycombinator.com: news.ycombinator.com e apps.ycombinator.com.
docs.google.com, spreadsheets.google.com: Qualquer um dos domínios, ou qualquer um dos seus subdomínios.
^http://www.reddit.com/$: Apenas a página inicial do Reddit.
*: Todos os sites. Útil para estilos que quer em todo o lado.

CLI

O comando stylebot permite que um agente de programação como o Claude Code, o Codex ou o Cursor altere o estilo dos sites diretamente no seu navegador, com a sua própria subscrição em vez de uma chave de API. Também pode executar os comandos.

Configuração: Instale a CLI, ligue-a aos seus navegadores e depois ative Permitir acesso pela linha de comandos nas Opções. A página da CLI explica cada passo. Por agora, apenas no Chrome e no Edge.
Claude Code: Adicione o plugin do Stylebot e peça uma alteração com /stylebot, como um tema escuro para um site.
Privacidade: O acesso à CLI está desativado até o ativar. O Stylebot e a CLI só comunicam um com o outro, neste computador; um agente envia o que lê ao seu próprio fornecedor.

Atalhos de teclado

Os atalhos globais funcionam em qualquer página que o Stylebot consiga estilizar; altere-os nas definições de atalhos do navegador, às quais pode aceder a partir das Opções. Para ver os atalhos do próprio editor, prima ? no editor.

Globais

Ativar/desativar editoralt+shift+M

Ativar/desativar estiloalt+shift+S

Ativar/desativar modo legívelNão definido; atribua-o no navegador

Ativar/desativar escala de cinzentosNão definido; atribua-o no navegador

Ao escolher um elemento

Selecionar o elemento pai↑ou←

Voltar ao elemento filho↓ou→

Selecionar o elemento realçadoenter

Ajuda e suporte

Encontrou um erro ou tem uma ideia? Abra uma issue no GitHub. O Stylebot é gratuito e de código aberto, mantido desde 2011. Se lhe for útil, pode apoiá-lo oferecendo-me um café.