Como tornar permanentes as alterações do elemento de inspeção em seu navegador com Tampermonkey

O recurso Inspecionar elemento em seu navegador da web é uma ferramenta de desenvolvedor que permite modificar os aspectos front-end de um site, incluindo HTML, CSS e JavaScript, e fazer alterações temporárias. Você também pode fazer muito mais com Inspect Element. No entanto, todas as alterações são perdidas após uma atualização.

Mas às vezes você pode querer manter as alterações por um longo período ou adicionar funcionalidades adicionais para melhorar a experiência do usuário. Uma maneira de tornar as alterações do Inspect Element permanentes é usando a extensão Tampermonkey. Ele permite adicionar scripts personalizados em páginas da web, tornando as alterações permanentes em sua máquina local.

Vejamos como usar o Tampermonkey para tornar as alterações do elemento inspecionar permanentes em seu navegador local.

O que é Tampermonkey e como você pode instalá-lo?

Tampermonkey, um gerenciador de userscript, é uma extensão de navegador popular disponível para todos os principais navegadores da web, incluindo Chrome, Edge, Opera Next e Firefox. Ele permite criar e executar scripts de usuário personalizados e existentes para modificar páginas da web e corrigi-las ou aprimorá-las.

Ele também possui uma biblioteca de scripts de usuário criada por outros usuários do Tampermonkey. Por exemplo, você pode usar o script de usuário do Local YouTube Downloader para baixe vídeos do YouTube usando Tampermonkey ou assista a vídeos sinalizados do YouTube sem fazer login.

A extensão executa os scripts de usuário salvos assim que a página da web especificada é carregada, fazendo com que as alterações pretendidas pareçam permanentes.

Antes de começarmos a escrever um script, você precisará instalar o Tampermonkey. Então, vamos começar instalando a extensão:

1. Vou ao Página oficial do Tampermonkey. Ele detectará automaticamente seu navegador da web. Caso contrário, clique em qualquer guia do Chrome, Microsoft Edge, Firefox, Safari e Opera, dependendo do navegador que você está usando.
2. No Download seção, clique em Obter da loja. Você será direcionado para a loja virtual do seu navegador.
3. Clique em Instalar para adicionar a extensão ao seu navegador. Siga as instruções na tela para concluir a instalação.

Se o seu navegador não estiver listado, mas você estiver usando um navegador Chromium, você poderá instalar esta extensão a partir do Loja do Chrome.

Depois de instalado, você pode começar a escrever scripts de usuário personalizados usando JavaScript para fazer as alterações pretendidas em qualquer site. Escusado será dizer que você precisará de um conhecimento básico de HTML, CSS e JavaScript para escrever o script do usuário e fazer modificações usando Tampermonkey.

Para demonstrar os recursos do Tampermonkey, escreveremos um script para adicionar um botão de compartilhamento do WhatsApp para compartilhar links de artigos com seus contatos do WhatsApp.

O que considerar antes de fazer modificações nos elementos do site

Ao fazer modificações em qualquer site, é importante respeitar as políticas sobre o uso de JavaScripts de terceiros. Não tente executar scripts de usuário arbitrariamente em nenhum site, especialmente quando estiver lidando com dados confidenciais.

Embora o Tampermonkey ajude a modificar a aparência e adicionar funcionalidade a um site, todas as alterações são visíveis apenas localmente no seu navegador e não afetam a fonte.

Primeiros passos com Tampermonkey

Depois de planejar as modificações que deseja fazer em uma página da web, você pode começar a escrever seu script. Novos scripts de usuário podem ser criados na barra de ferramentas ou no painel do Tampermonkey.

Para criar um novo script, clique no botão Extensões ícone na barra de ferramentas do navegador e selecione Macaco Tamper. A seguir, selecione Crie um novo script. Isso abrirá um editor de script no painel do Tampermonkey.

O cabeçalho padrão do Tampermonkey ou os comentários de metadados são assim:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grantnone
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();

Esses comentários de metadados incluem informações cruciais sobre o nome do script do usuário, a finalidade pretendida e as permissões e informam ao Tampermonkey quando executar o script.

Para este guia, vamos nos concentrar no @corresponder diretiva, também conhecida como metadados arquivados. Tampermonkey usa esta diretiva para garantir que o script do usuário seja aplicado apenas a um site ou páginas da web específicas. Neste caso, o script de usuário a seguir será executado apenas em example.com (substitua o URL do site conforme sua necessidade) e em todas as suas páginas.

Escrevendo um Userscript para adicionar um botão de compartilhamento do WhatsApp

No final de cada artigo do MakeUseOf, você encontrará um widget de compartilhamento para diversas plataformas de mídia social, exceto WhatsApp. Embora você possa copiar e colar o URL, um botão de compartilhamento do WhatsApp é útil se você compartilha artigos com frequência em seu grupo do WhatsApp.

Você pode criar um userscript no Tampermonkey para adicionar um botão de compartilhamento do WhatsApp no ​​final do artigo. Integraremos o botão ao widget de compartilhamento existente que permitirá que você compartilhe o URL da página da web com seus contatos do WhatsApp.

Vamos começar criando um botão básico de compartilhamento do WhatsApp.

//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';

Agora que temos um botão básico de compartilhamento do WhatsApp, vamos adicionar um estilo a ele. Isso dará ao botão o plano de fundo e a cor do texto, a borda, o preenchimento e o estilo do cursor. Com alguns ajustes, você pode alterar as propriedades do botão para ajustar a aparência.

//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';

Com o botão pronto, é hora de testá-lo. Mas onde você o coloca? Como prática comum, muitas vezes o botão de compartilhamento é colocado no final dos artigos.

Porém, neste caso, já temos um widget de compartilhamento no final de cada artigo. Portanto, o ideal é tornar este botão de compartilhamento parte do widget.

Para fazer isso, inspecionaremos o widget de compartilhamento existente para encontrar o contêiner pai que contém os elementos de compartilhamento para localizá-lo no script do usuário. Na página da web, pressione Ctrl + Shift + C para abrir Inspecionar elemento. Em seguida, selecione o elemento do widget de compartilhamento na página para inspecioná-lo.

Você verá que é um elemento com o nome da classe “compartilhando parte inferior”. Você pode selecionar este elemento usando o querySelector método em seu script de usuário.

const sharingDiv = document.querySelector ('div.sharing.bottom');

Após selecionar o elemento, vamos inserir o botão de compartilhamento como filho dele:

if (sharingDiv) {
 sharingDiv.appendChild(Whatsapp_btn);
}

Imprensa Ctrl + S para salvar o script. Se você recarregar a página, verá um botão de compartilhamento inserido no widget de compartilhamento existente. Mas clicar nele não fará nada.

Para que o botão funcione, criaremos uma função para gerar uma URL de compartilhamento do WhatsApp com base na URL da página atual. Você pode usar location.href para retornar o URL da página.

functiongenerateWALink() {
 const pageURL = encodeURIComponent(window.location.href);
 return`https://api.whatsapp.com/send? text=${pageURL}`;
}

A seguir, vamos adicionar um ouvinte de evento ao botão. Ao clicar, o navegador abrirá uma nova aba com um link de compartilhamento do WhatsApp que permite redigir uma mensagem.

Whatsapp_btn.addEventListener('click', () => {
 const whatsappURL = generateWALink();
 window.open(whatsappURL, '_blank');
});

Salve e execute o script do usuário

Depois de ter o script de usuário pronto, pressione Ctrl + S para salvar as alterações. Abra o Scripts de usuário instalados guia no Tampermonkey para visualizar todos os scripts de usuário instalados em seu navegador.

Para ver o userscript em ação, abra a página da web de destino. Você verá um verde Compartilhar botão. Clicar no botão solicitará que você abra a área de trabalho do WhatsApp, desde que tenha o aplicativo instalado. Você pode então selecionar o contato da lista para enviar o link do artigo.

Você pode modificar ainda mais o script para adicionar mais melhorias. Por exemplo, você pode exibir o ícone do WhatsApp no ​​botão ou alterar seu posicionamento usando a função InsertAfter().

Você pode ativar, desativar ou editar scripts de usuário individuais no painel do Tampermonkey. Alternativamente, clique no ícone Tampermonkey na barra de ferramentas para desativar todos os scripts de usuário ativos de uma vez.

Tornando as alterações do elemento de inspeção permanentes usando Tampermonkey

Tampermonkey é um dos muitos gerenciadores de script de usuário disponíveis que permitem modificar páginas da web para melhorar sua experiência de navegação. Pequenas modificações podem ajudar a melhorar a acessibilidade e corrigir pequenos incômodos em seu site favorito.

Antes de começar a escrever um script, verifique se já existe um script de outros usuários. No entanto, tenha cuidado ao instalar scripts de usuários de terceiros de fontes desconhecidas para evitar códigos maliciosos.