Injeção rápida de CSS / JS

1O que é a injeção rápida de CSS/JS?#

A injeção rápida adiciona o MESMO CSS e JavaScript a TODAS as páginas que seu app carrega - sem condições, sem regras por site.

Pense nele como uma folha de estilo global e um script de inicialização global que sempre roda, não importa em qual página o usuário esteja.

✅ Perfeito para:

• Ajustes de identidade visual (cores, fontes, logotipo)
• Ocultar elementos globais (cabeçalho, rodapé, banner de cookies)
• Pequenos ajustes de layout ou de tamanho de fonte para todas as páginas
• Adicionar um botão flutuante global (WhatsApp, chat, voltar ao topo)

❌ NÃO foi feito para:

• Executar código apenas em URLs específicas → use Scripts de usuário inteligentes
• Automações complexas com temporização → use Scripts de usuário inteligentes

2Onde encontrar no gerador#

Etapa 4 (Permissões) → role para baixo → cartão 🎨 Injeção rápida de CSS / JS.

Duas caixas de texto:

• 🎨 CSS personalizado - cole regras CSS puras
• ⚡ JavaScript personalizado - cole JS puro (sem precisar de envoltório)

Ambas são opcionais. Deixe vazio para pular.

3Exemplo 1: ocultar banner de cookies e cabeçalho#

Remova globalmente um cabeçalho fixo e o pop-up de consentimento de cookies em todas as páginas:

/* ── Hide header & nav ── */
header, nav, .navbar, #top-bar, .site-header {
  display: none !important;
}

/* ── Remove cookie/GDPR banners ── */
.cookie-banner, #cookie-notice, .gdpr-popup,
[id*="cookie"], [class*="cookie"] {
  display: none !important;
}

4Exemplo 2: modo escuro completo (somente CSS)#

Deixe qualquer site escuro com um único filtro CSS - as imagens continuam naturais:

/* ── Dark Mode via CSS filter ── */
html {
  filter: invert(1) hue-rotate(180deg) !important;
}
/* Keep images & media in original colors */
img, video, canvas, svg, picture {
  filter: invert(1) hue-rotate(180deg) !important;
}

5Exemplo 3: correção de escala / zoom#

O site aparece pequeno ou grande demais no celular? Corrija o nível de zoom:

/* 85% scale — adjust to your needs */
body {
  zoom: 0.85;
}

/* Force readable font size */
body, p, li, td {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

6Exemplo 4: botão flutuante do WhatsApp (JS)#

Adiciona um botão flutuante de contato do WhatsApp em todas as páginas (substitua o número de telefone):

// Floating WhatsApp button
(function() {
  if (document.getElementById('__wa_fab__')) return;
  var btn = document.createElement('a');
  btn.id = '__wa_fab__';
  btn.href = 'https://wa.me/1234567890?text=Hello';
  btn.style.cssText = [
    'position:fixed','bottom:24px','right:20px',
    'width:56px','height:56px','border-radius:50%',
    'background:#25D366','color:#fff','font-size:26px',
    'display:flex','align-items:center','justify-content:center',
    'text-decoration:none','z-index:999999',
    'box-shadow:0 4px 12px rgba(0,0,0,.35)'
  ].join(';');
  btn.textContent = '💬';
  document.body.appendChild(btn);
})();

7Exemplo 5: aceitar cookies automaticamente (JS)#

Clique automaticamente em 'Aceitar' nas caixas de consentimento de cookies:

// Auto-accept cookie banners
(function() {
  var selectors = [
    '.accept-cookies','#accept-btn','#cookie-accept',
    'button[id*="accept"]','button[class*="accept"]',
    '[aria-label*="Accept"]'
  ];
  selectors.forEach(function(sel) {
    var el = document.querySelector(sel);
    if (el) el.click();
  });
})();

8Como funciona internamente#

• O CSS é inserido como uma tag <style id=\'__userscript_css__\'> no <head> da página após o carregamento.
• O JS é inserido como uma tag <script id=\'__userscript_js__\'> após o carregamento.
• Ambos rodam em TODAS as páginas após onPageFinished - inclusive ao voltar na navegação.
• A injeção dupla é bloqueada verificando primeiro o ID do elemento.
• Também funciona em apps ZIP offline.

⚠️ Limitação: executa DEPOIS do carregamento da página. Scripts da página que rodam cedo podem já ter sido executados. Para injeção antes do carregamento, use Scripts de usuário inteligentes (document-start).