Scripts de usuário inteligentes

1O que são Smart User Scripts?#

Smart User Scripts são scripts individuais com nome - cada um com:
🌐 padrões de URL (em quais páginas executar)
⏱ momento de execução (antes, durante ou depois do carregamento)
✅ chave para ativar/desativar

Funcionam como o Greasemonkey ou o Tampermonkey nos navegadores de computador - mas integrados ao seu app.

✅ Perfeito para:

• Login automático SOMENTE na página /login
• Ocultar anúncios SOMENTE em páginas de artigos (https://news.com/article/*)
• Observe mudanças no DOM com MutationObserver
• Injetar antes da renderização da página (document-start) para evitar o flash

Principal diferença para a Quick Injection:
Quick Injection = o mesmo CSS/JS em TODAS as páginas
Smart User Scripts = controle por script, por URL e por momento de execução

2Onde encontrar#

Etapa 4 (Permissões) → role para baixo → cartão 🤖 Smart User Scripts.

Toque em '+ Adicionar' para criar um novo script. Cada script tem:

• Nome - exibido na lista do gerenciador
• Padrões de URL - um por linha (aceita o curinga *)
• Run At - document-end / document-start / document-idle
• Código - seu JavaScript
• Chave de ativação

Toque em qualquer linha para editar ou excluir um script.

3Exemplos de padrões de URL#

Os padrões controlam em quais páginas o script é executado. Use * como curinga:

# Run on every page of every site
*://*/*

# Run only on example.com (any path)
https://example.com/*

# Run on ALL pages of ANY .com domain
https://*.com/*

# Run only on the /login path
https://example.com/login
https://example.com/login/*

# Run on news article pages
https://news.example.com/article/*

4Momentos de execução (Run-At) explicados#

• document-end (padrão)

Executa DEPOIS de a página terminar de carregar. Seguro e o mais compatível. Use para ocultar elementos, adicionar botões e rastrear.

• document-start ⚡ (avançado)

Executa ANTES de a página ser renderizada. Injeta o script no HTML bruto via shouldInterceptRequest. Remove os cabeçalhos CSP. Use para CSS de modo escuro ou para forçar o viewport antes da renderização do layout.

• document-idle ⏱

Executa 1,5 segundo depois do carregamento da página. Bom para capturar conteúdo AJAX tardio ou modais que aparecem após um atraso.

5Exemplo 1: Login automático somente em /login#

Correspondência: https://myapp.com/login
Run-at: document-end

// Auto-fill login form
(function() {
  var email = document.querySelector('input[type=email], input[name=email]');
  var pass  = document.querySelector('input[type=password]');
  if (email) email.value = '[email protected]';
  if (pass)  pass.value  = 'mypassword';
  // Uncomment to auto-submit:
  // var form = document.querySelector('form');
  // if (form) form.submit();
})();

6Exemplo 2: ocultar paywalls em páginas de artigos#

Correspondência: https://news.site.com/article/*
Run-at: document-end

// Hide paywall overlay and restore scroll
(function() {
  var overlay = document.querySelector('.paywall-overlay, .metered-content, #paywall');
  if (overlay) overlay.remove();
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
})();

7Exemplo 3: Observar conteúdo dinâmico (MutationObserver)#

Correspondência: *://*/*
Run-at: document-end
Para elementos que aparecem DEPOIS do carregamento da página (modais e anúncios com carregamento tardio):

// Remove any modal/popup that appears dynamically
(function() {
  var sel = '.modal, .popup, .overlay, [class*="modal"], [class*="popup"]';
  // Remove existing ones first
  document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  // Watch for new ones
  var obs = new MutationObserver(function() {
    document.querySelectorAll(sel).forEach(function(el) { el.remove(); });
  });
  obs.observe(document.body, { childList: true, subtree: true });
  // Stop watching after 30 s to save battery
  setTimeout(function() { obs.disconnect(); }, 30000);
})();

8Exemplo 4: Forçar o modo escuro antes da renderização (document-start)#

Correspondência: *://*/*
Run-at: document-start
Injeta CSS antes de a página ser renderizada - sem flash branco:

// Inject dark theme before page renders
(function() {
  var s = document.createElement('style');
  s.id = '__force_dark__';
  s.textContent = [
    'html { filter: invert(1) hue-rotate(180deg) !important; }',
    'img,video,canvas,svg { filter: invert(1) hue-rotate(180deg) !important; }'
  ].join('\
');
  (document.head || document.documentElement).appendChild(s);
})();

9Exemplo 5: Análise personalizada / rastreamento de eventos#

Correspondência: https://myshop.com/*
Run-at: document-idle
Envie eventos personalizados depois que a página estabilizar por completo:

// Track page views + button clicks
(function() {
  // Page view
  console.log('[Analytics] Page: ' + location.href);

  // Track all CTA button clicks
  document.querySelectorAll('button, .btn, a[href]').forEach(function(el) {
    el.addEventListener('click', function() {
      console.log('[Analytics] Clicked: ' + (el.textContent || el.href));
      // Replace with your own tracker call, e.g. gtag('event', ...)
    });
  });
})();

10Segurança e limitações#

⚡ document-start remove os cabeçalhos Content-Security-Policy da página correspondente. Use apenas em sites seus ou de total confiança.

🔒 Política de mesma origem: o JS não consegue acessar iframes de outras origens (PayPal, Stripe, login do Google). Isso é imposto pelo mecanismo do navegador e não pode ser contornado.

📵 Somente HTTPS: APIs como geolocalização ou câmera em scripts injetados exigem HTTPS.

✅ Proteção contra execução dupla: cada script é protegido por uma flag em window, então roda apenas uma vez por página.

✅ Funciona offline: os Smart User Scripts também rodam em apps offline empacotados em ZIP.