Documentação

A extensão funciona no Chrome 120 e posteriores e no Firefox 136 e posteriores.

Permitir scripts do usuário

Os navegadores só executam o JavaScript de uma extensão nas páginas com uma permissão à parte. Sem ela, os estilos das regras continuam sendo aplicados, mas o JavaScript das regras não é executado; nesse caso, o pop-up e a página de configurações mostram como ativá-la.

• Chrome 138 e posteriores: abra os detalhes da extensão (chrome://extensions → User JavaScript and CSS → “Detalhes”) e ative “Permitir scripts de usuário”. O modo de desenvolvedor não é necessário.
• Chrome 120–137: ative o “Modo de desenvolvedor” no canto superior direito de chrome://extensions. É uma exigência do Google para todas as extensões com scripts do usuário.
• Firefox: clique em “Permitir scripts do usuário” no pop-up e confirme na caixa de diálogo do navegador. O Firefox também pode deixar a extensão sem acesso aos sites: nesse caso, o pop-up mostra “Permitir acesso aos sites”, e a página de configurações mostra “Permitir” em um aviso no topo.

Regras

No contexto da extensão, uma regra é um código JavaScript e/ou CSS executado nas páginas que correspondem aos seus padrões de URL.

Padrões de URL

• Um padrão tem a forma <scheme>://<host>/<path>: https://site.com/*;
• Vários padrões são separados por vírgulas: https://one.com/*, https://two.com/*;
• Uma exclusão é marcada com !: !https://site.com/admin/*.

A extensão converte cada padrão para o formato de padrão de correspondência do navegador, e o pop-up e o contador no ícone mostram exatamente onde o navegador vai executar a regra.

Um padrão com esquema é usado quase como foi escrito:

Você escreve	A regra é executada em
https://site.com/*	site.com e www.site.com, não em outros subdomínios
https://*.site.com/*	site.com e todos os seus subdomínios
https://site.com/path	páginas que começam com /path em site.com e www.site.com
https://site.com	todo o site.com e o www.site.com
http*://site.com	site.com e www.site.com via http e https
http://localhost:*/*	localhost em qualquer porta

Um padrão sem esquema significa o site com seus subdomínios, via http e https:

Você escreve	A regra é executada em
site.com, *site.com*, *.site.com	site.com e todos os seus subdomínios
www.site.com	www.site.com e site.com
пример.рф	пример.рф e seus subdomínios
site.com/path	páginas que começam com /path em site.com e seus subdomínios
localhost:3000	localhost na porta 3000
/admin	páginas com /admin no caminho, em qualquer site
*	qualquer site

Uma exclusão com esquema é usada exatamente como foi escrita: https://site.com/*, !https://www.site.com/* faz a regra ser executada em site.com, mas não em www.site.com. Uma exclusão sem esquema segue a tabela acima: !site.com/admin exclui /admin em site.com e seus subdomínios.

Portas no Firefox. Um padrão do Firefox não pode indicar uma porta, então a porta é descartada: localhost:3000 faz a regra ser executada no localhost em qualquer porta, e uma exclusão com porta exclui todas as portas do host. Um padrão para qualquer site em uma única porta (*://*:8080/*) viraria um padrão para todos os sites, por isso no Firefox ele fica marcado em vermelho.

Fica marcado em vermelho o padrão que o navegador não aceita: um * dentro do host (https://shop*.site.com/*, https://site.*/*) ou um esquema em que a extensão não pode ser executada (chrome-extension://, ws://). Esse padrão é ignorado, e os outros padrões da regra continuam funcionando. Se uma exclusão for rejeitada, a regra não é executada em lugar nenhum até você corrigi-la; caso contrário, ela seria executada justamente nas páginas que você excluiu.

Propriedades do JavaScript

Os botões no cabeçalho do painel de JavaScript:

• Ambiente isolado: o script vê o DOM da página, mas não as variáveis e funções dela.
• Todos os frames: o script também é executado nos frames cujo endereço corresponde à regra. Cada frame é verificado separadamente com os padrões da regra.
• Executar no início: o script é executado antes de o DOM ser construído; sem essa opção, depois dele, mas antes de carregar recursos como imagens e frames. Observe que o evento DOMContentLoaded não é disparado para esse script.

Propriedades do estilo

Os botões no cabeçalho do painel de estilos:

• Pré-processador Sass: ativado (padrão) — o estilo é compilado como Sass ou SCSS, e a sintaxe é escolhida pela presença de {;} no código; desativado — o estilo é aplicado como foi escrito.
• !important automático em todas as propriedades: adiciona !important a cada propriedade do estilo compilado.
• Aplicar em frames aninhados: o estilo também vai para os frames dentro da página. Ativado por padrão.
• Aplicar no shadow DOM: o estilo também vale dentro de web components com shadow DOM aberto. Desativado por padrão.

O estilo muda nas abas abertas na hora, sem recarregar a página: quando você o edita, ativa a regra ou muda o endereço dela.

Regras compartilhadas

As regras compartilhadas permitem criar dependências entre regras e controlar explicitamente a ordem em que são carregadas. Qualquer regra pode ser marcada como “Regra compartilhada” no menu da regra — isso a adiciona à lista de módulos das outras regras. Das regras incluídas, só o conteúdo JS e CSS é usado; as outras propriedades da regra são ignoradas.

Versões anteriores

A extensão guarda o código de uma regra antes de cada um dos últimos 10 salvamentos: “Versões anteriores” no menu da regra. A versão volta para o editor e é aplicada depois que você a salva. As versões ficam só neste navegador: não são exportadas nem salvas na nuvem.

Outros recursos

• A marcação de regra ativada é ignorada quando a regra é compartilhada e está incluída em outra regra;
• A marcação Salvar na nuvem só indica que a regra entra no backup na nuvem;
• “Usar como modelo de novas regras” no menu da regra: as novas regras começam com o código e as propriedades dessa regra.

Módulos

Módulos JS e CSS externos podem ser anexados às regras e são executados antes delas. Links https://... são suportados, e a extensão reconhece o tipo do recurso.

O conteúdo do módulo é baixado e guardado no armazenamento da extensão. Ele é atualizado com “Baixar novamente” na janela de edição do módulo ou de forma programada, pela configuração “Atualização de bibliotecas”: manual, diariamente ou semanalmente. Se o download falhar, a versão anterior do módulo é mantida.

Armazenamento

Armazenamento local

• “Baixar JSON” salva suas regras, bibliotecas e configurações em um arquivo.
• “Carregar JSON” abre uma lista das regras e bibliotecas do arquivo. “Adicionar selecionadas” adiciona as marcadas às suas: as regras que você já tem são substituídas, e o código antigo delas fica nas versões anteriores. “Substituir tudo” substitui suas regras e bibliotecas pelas do arquivo.

Sincronização do navegador

Se a sincronização estiver ativada no navegador, um backup pode ser enviado para a nuvem na sua conta Google ou Firefox. Esse método não exige login nem configuração extra: storage.sync é o tipo de sincronização padrão para extensões. Os backups são enviados e baixados manualmente.

O limite é de 100 KB, então, antes do envio, o conteúdo dos módulos externos e todos os dados gerados são removidos da cópia, e o resultado é compactado. Se ainda faltar espaço, desative “Salvar na nuvem” nas regras de que você não precisa no backup.

Agentes (MCP)

Agentes de IA — Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop e outros — podem ler e editar suas regras pelo servidor MCP local user-js-css-mcp. O recurso é experimental.

1. Abra a seção MCP da página de configurações e ative “Permitir conexões MCP”.
2. Escolha seu cliente. A seção oferece um comando pronto, um link de instalação com um clique ou um bloco de configuração, já com o segredo de conexão preenchido.
3. Reinicie o cliente: ele mesmo inicia o servidor, e a seção mostra que o cliente está conectado.

O servidor roda no seu computador (127.0.0.1) e precisa do Node.js 18+ ou do Bun 1.2+. A extensão e o servidor verificam o segredo de conexão antes de cada solicitação, para que outro programa no computador não consiga usá-los. “Substituir”, ao lado do segredo, desconecta todos os clientes configurados com o segredo antigo.

Um agente pode listar, ler, pesquisar, criar e alterar regras e bibliotecas, descobrir quais regras são executadas em uma página, ler por que uma regra não funciona, fazer backup das regras em um arquivo e restaurá-las, e voltar uma regra para uma versão anterior.