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.
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 não tem painel lateral.
- Desativar um estilo
- Use o interruptor no pop-up, ou alt+shift+S. O estilo é mantido, apenas deixa de ser aplicado.
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.
Linha de comandos
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. É a melhor forma de pôr um agente a estilizar um site, e também pode executar os comandos.
- Configuração
- Instale a CLI, ligue-a aos seus navegadores e depois ative Permitir que as aplicações deste computador controlem o Stylebot nas Opções. A página da linha de comandos 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 por linha de comandos 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.
Chat
O Chat é ideal para ajustes rápidos. Descreva a alteração que quer no separador Chat e o Stylebot escreve o CSS. Pode escolher um elemento para indicar algo concreto, ou anexar uma captura de ecrã para mostrar o que quer dizer. Para alterações maiores, como um tema totalmente novo, use a linha de comandos.
- Use a sua própria chave
- Ligue uma chave de API do Claude, OpenAI ou Gemini. As chaves ficam guardadas apenas neste computador e nunca são sincronizadas. As mensagens vão diretamente do seu navegador para o fornecedor.
- Para onde vão as alterações
- Cada alteração é aplicada de imediato e adicionada à folha de estilos do perfil atual. Clique em N linhas adicionadas para a ver em Código, ou anule-a a partir do chat.
- Custo
- A contagem de tokens por baixo da caixa de mensagem mostra o que a conversa já usou, com um custo estimado.
Modo legível e escala de cinzentos
Ambos estão no separador Predefinições e combinam-se 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.
Sincronização, backup e histórico
- 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.
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.
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.
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é.