Tampermonkey: tornar alterações do Inspecionar Elemento permanentes

pessoa segurando e olhando para o laptop

O recurso Inspecionar Elemento do navegador permite alterar HTML, CSS e JavaScript de uma página temporariamente. Essas mudanças desaparecem após um reload. Tampermonkey é um gerenciador de userscripts que executa JavaScript personalizado assim que a página carrega, permitindo aplicar as mesmas modificações de forma recorrente e local no seu navegador.

Este guia mostra como instalar Tampermonkey, criar um userscript completo para adicionar um botão de compartilhamento via WhatsApp e inclui práticas, checagens e exemplos para testar, depurar e proteger seus scripts.

O que é Tampermonkey e como instalá-lo

Tampermonkey é um gerenciador de userscripts disponível para navegadores principais (Chrome, Edge, Firefox, Opera, Safari). Com ele você pode criar, editar e executar scripts que modificam páginas web localmente.

Por que usar Tampermonkey:

Automatiza alterações feitas via Inspecionar Elemento.
Permite adicionar funcionalidades ausentes (ex.: botões, atalhos, correções de exibição).
Executa scripts assim que a página terminar de carregar, sem alterar o site original.

Passos para instalar Tampermonkey:

Abra o navegador onde quer usar o script.
Visite a página oficial do Tampermonkey (a página normalmente detecta seu navegador) ou abra a loja de extensões do navegador.
Escolha a versão do Tampermonkey compatível com seu navegador (Chrome/Edge/Firefox/Opera/Safari).
Clique em Download/Get from Store e, na loja do navegador, clique em Instalar ou Adicionar.
Siga as instruções do navegador para concluir a instalação. Após a instalação, o ícone do Tampermonkey aparece na barra de extensões.

download tampermonkey

Nota: navegadores baseados em Chromium que não aparecem na lista ainda conseguem instalar o Tampermonkey via Chrome Web Store, em muitos casos.

Antes de modificar uma página: ética, segurança e limites

Important: Respeite os termos de serviço e políticas dos sites. Não execute userscripts em páginas onde você manipula dados sensíveis (bancos, serviços governamentais) sem entender totalmente o risco.

Notas de segurança e privacidade:

Scripts de terceiros podem conter código malicioso. Revise o código antes de instalar.
Tampermonkey executa código localmente; ele não altera o servidor remoto.
Evite armazenar credenciais ou dados sensíveis em userscripts.
Verifique Content Security Policy (CSP) do site se scripts externos não carregarem.

Começando: criar um userscript no Tampermonkey

Clique no ícone de Extensões e selecione Tampermonkey.
No painel do Tampermonkey, clique em Create a new script (Criar novo script).
Um editor aparecerá com um cabeçalho de metadata. Esse cabeçalho controla quando e onde o script roda.

Exemplo claro de cabeçalho (metadata) para um userscript:

// ==UserScript==
// @name        Exemplo WhatsApp Share
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description Insere botão para compartilhar via WhatsApp
// @author      SeuNome
// @match       https://example.com/*
// @grant       none
// ==/UserScript==

(function() {
  'use strict';
  // seu código aqui
})();

Explicação rápida:

@name: nome do userscript.
@namespace: identificador; use o padrão se não tiver um.
@version: versão do script.
@description: propósito curto.
@match: URLs onde o script será executado (veja seção abaixo para padrões e curingas).
@grant: permissões Tampermonkey (use o mínimo necessário).

Padrões de @match e alternatives

@match https://example.com/* — executa em todas as páginas sob example.com com HTTPS.
@match *://*.site.com/* — executa em todos os esquemas e subdomínios.
É possível usar @include e @exclude em alguns casos; preferir @match por compatibilidade.

Exemplo prático: adicionar um botão de compartilhamento via WhatsApp

Objetivo: inserir um botão no container de compartilhamento da página que abra a interface de enviar mensagem do WhatsApp com a URL atual.

Imagens de referência do widget de compartilhamento do site:

widget de compartilhamento MakeUseOf

Passos principais que seguiremos:

Identificar o container do widget com Inspecionar Elemento.
Criar o botão em JavaScript.
Aplicar estilo ao botão (CSS inline ou injetado).
Gerar o link de compartilhamento do WhatsApp e abrir em nova aba.
Salvar e testar o userscript.

Código completo do userscript (exemplo pronto)

// ==UserScript==
// @name        WhatsApp Share Button
// @namespace   http://tampermonkey.net/
// @version     0.2
// @description Insere um botão para compartilhar a URL atual via WhatsApp
// @author      SeuNome
// @match       https://example.com/*
// @grant       none
// ==/UserScript==

(function() {
  'use strict';

  // Aguarda o DOM estar pronto; útil em sites que carregam conteúdo dinamicamente
  function onReady(fn) {
    if (document.readyState !== 'loading') fn();
    else document.addEventListener('DOMContentLoaded', fn);
  }

  onReady(() => {
    // Localize o container do widget de compartilhamento
    const sharingDiv = document.querySelector('div.sharing.bottom');
    if (!sharingDiv) return; // não encontrou o container

    // Cria o botão
    const whatsappBtn = document.createElement('button');
    whatsappBtn.type = 'button';
    whatsappBtn.textContent = 'Compartilhar';
    whatsappBtn.setAttribute('aria-label', 'Compartilhar via WhatsApp');

    // Estilo básico (ajuste conforme necessário)
    Object.assign(whatsappBtn.style, {
      backgroundColor: '#075E54',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      padding: '8px 12px',
      marginLeft: '8px',
      cursor: 'pointer',
      fontSize: '14px'
    });

    // Função que gera link do WhatsApp com texto (título + URL)
    function generateWALink() {
      const pageURL = encodeURIComponent(window.location.href);
      const pageTitle = encodeURIComponent(document.title || '');
      // usa api.whatsapp.com para desktop e mobile
      return `https://api.whatsapp.com/send?text=${pageTitle}%20-%20${pageURL}`;
    }

    // Ação do botão
    whatsappBtn.addEventListener('click', () => {
      const whatsappURL = generateWALink();
      window.open(whatsappURL, '_blank');
    });

    // Insere o botão no widget
    sharingDiv.appendChild(whatsappBtn);
  });
})();

Notas sobre este script:

Substitua @match pela URL alvo (por exemplo, https://www.exemplo.com/*).
encodeURIComponent protege caracteres especiais na URL e no título.
api.whatsapp.com funciona para abrir WhatsApp Web/desktop; para mobile, https://wa.me/?text= também funciona.

inspect element compartilha widget

Como testar, salvar e depurar

No editor do Tampermonkey, pressione Ctrl+S (ou clique em Salvar).
Abra a página-alvo e recarregue (F5). O script executará quando a página carregar.
Se o botão não aparecer, abra o console do DevTools (F12) e verifique erros.

Checklist de depuração rápida:

document.querySelector retornou elemento válido?
O CSS aplicado conflita com regras do site (use !important com parcimônia)?
A política CSP do site bloqueia recursos externos?
O matches do @match coincide com a URL atual?

Opções alternativas (quando não usar Tampermonkey)

Extensões de CSS-only: Stylus, Stylebot — ótimas para ajustes visuais simples.
Outros gerenciadores de userscripts: Greasemonkey, Violentmonkey — alternativas à Tampermonkey.
Criar uma extensão de navegador própria — indicado quando a funcionalidade precisa de distribuição e alto controle.

Mapa mental rápido: quando usar userscript vs extensão

Userscript: mudanças locais, rápidas, para uso pessoal.
Extensão: distribuição pública, permissões mais controladas, publicação nas lojas.
CSS-only: apenas ajustes de aparência (sem lógica complexa).

Playbook passo a passo para levar uma mudança do Inspecionar Elemento para produção (local)

Identificar o elemento e a modificação desejada no DevTools.
Prototipar com Inspecionar Elemento e testar estilos/JS no console.
Criar userscript no Tampermonkey com metadata correto (@match).
Incluir tratamentos de falha (verifica existência de elementos).
Testar em várias páginas relevantes do site.
Auditoria de segurança: revisar o código, remover dependências externas não confiáveis.
Documentar o funcionamento e instruções para ativar/desativar.
Manter e atualizar quando o site mudar (versão do script).

Critérios de aceitação (Критерии приёмки)

O botão aparece no widget de compartilhamento nas páginas correspondentes.
Ao clicar, o WhatsApp abre com título e URL corretamente codificados.
O script não lança erros no console.
A versão pode ser habilitada/desabilitada via painel do Tampermonkey.

Lista de verificação por função

Desenvolvedor:

Usar @match adequado.
Tratar falta de elementos com checagens.
Evitar poluir o escopo global.

Pesquisador/Designer:

Validar acessibilidade (aria-label, foco, contraste do botão).
Confirmar posição e hierarquia visual no widget.

Responsável de Privacidade:

Revisar chamadas externas.
Garantir que nenhum dado sensível é transmitido.

End-user:

Testar comportamento em desktop e mobile.
Relatar bugs e mudanças de layout.

Segurança e hardening

Prefira @grant none quando possível — reduz a superfície de ataque.
Se usar funções GM_* (ex.: GM_xmlhttpRequest), entenda as permissões associadas.
Não carregue scripts remotos sem revisão; evite eval().
Use Content Security Policy do site como referência: scripts inline podem ser bloqueados.
Atualize scripts periodicamente e remova scripts não utilizados.

Compatibilidade e migração entre navegadores

Tampermonkey funciona em Chrome, Edge, Opera e Firefox. No Firefox, Greasemonkey também é uma opção; atenção às diferenças de API.
Em navegadores mobile, o suporte é limitado; muitas vezes é melhor usar atalhos do próprio navegador ou aplicações complementares.
Ao migrar para uma extensão, transforme a lógica central em um background script e ajuste permissões.

Testes e casos de aceitação

Casos simples de teste:

Página com div.sharing.bottom existente: o botão deve aparecer e abrir WhatsApp.
Página sem o container: o script não deve lançar erros.
Página com carregamento dinâmico (AJAX): use um observer ou reexecução para inserir o botão quando o widget aparecer.

Teste com MutationObserver (exemplo para sites dinâmicos):

// Insere botão quando novo conteúdo aparecer
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    if (m.addedNodes.length) {
      const sharing = document.querySelector('div.sharing.bottom');
      if (sharing && !sharing.querySelector('[data-whatsapp-inserted]')) {
        // inserir botão (função de inserção)
      }
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Troubleshooting comum

Botão não aparece: verifique @match e querySelector correta.
Abertura do WhatsApp é bloqueada pelo popup blocker: normalmente window.open a partir de um clique do usuário não é bloqueado.
Estilos quebrados: inspecione regras CSS do site; considere usar classes existentes ou !important com moderação.

botão de compartilhamento WhatsApp

Extensões de melhoria e personalização

Adicionar ícone SVG ao botão: crie um elemento ou
Trocar o texto compartilhado: incluir um resumo personalizado ou metadados da página (meta description).
Controles de posição: use insertBefore() ou função InsertAfter() para ajustar a inserção.

Exemplo de geração de mensagem com título e descrição:

function generateWALink() {
  const pageURL = encodeURIComponent(window.location.href);
  const pageTitle = encodeURIComponent(document.title || '');
  const metaDescription = (document.querySelector('meta[name="description"]') || {}).content || '';
  const text = `${pageTitle}%0A${encodeURIComponent(metaDescription)}%0A${pageURL}`;
  return `https://api.whatsapp.com/send?text=${text}`;
}

Quando não usar Tampermonkey (contraexemplos)

Se a mudança precisa ser distribuída a muitos usuários corporativos, prefira uma extensão oficial ou alteração no servidor.
Se a funcionalidade exige armazenamento seguro de credenciais, um userscript não é adequado.
Se o site proíbe explicitamente execução de JavaScript de terceiros por motivo legal ou de integridade dos dados.

Diagrama de decisão (Mermaid)

flowchart TD
  A[Quero transformar mudanças do Inspecionar Elemento] --> B{É só visual ou precisa
  de lógica?}
  B -- Visual --> C[Use Stylus/Stylebot]
  B -- Lógica simples --> D[Userscript 'Tampermonkey']
  B -- Distribuição ampla --> E[Escreva uma extensão]
  D --> F{Site tem CSP rigoroso?}
  F -- Sim --> G[Rever abordagem ou usar extensão]
  F -- Não --> H[Implementar e testar]

Manutenção e boas práticas

Documente as mudanças no código do userscript (comentários, README no próprio script).
Mantenha controle de versão (exporte o script e salve em repositório privado se necessário).
Configure notificações para revisar scripts quando o site alvo for atualizado frequentemente.

Remover ou desativar um userscript

Abra o painel do Tampermonkey e desative o script por toggle.
Para remover permanentemente, delete o script no painel do Tampermonkey.

Resumo

Tampermonkey é uma ferramenta poderosa para tornar persistentes mudanças feitas com Inspecionar Elemento no seu navegador local. Para uso seguro e confiável:

Crie um userscript com metadata correta (@match, @grant).
Teste em várias páginas e faça validações de acessibilidade.
Revise o código por motivos de segurança e evite scripts de fontes desconhecidas.

Principais ações recomendadas:

Sempre revisite o script após alterações no site.
Use encodeURIComponent ao construir URLs.
Prefira @grant none e mantenha dependências sob controle.

Important: nunca use userscripts para automatizar ações que violem termos de serviço ou que exponham dados sensíveis.

Fim do guia — experimente criar um userscript pequeno hoje para automatizar uma melhoria de UI que você usa com frequência.

Tornar permanentes as mudanças do Inspecionar Elemento com Tampermonkey no navegador local