Como camuflar seu WhatsApp Web usando Snippets JavaScript

Ao todo criaremos dois snippets, um para camuflar as conversas e outro para restaurá-las. Nesta página veremos como esconder.

O primeiro passo será descobrir qual é a classe CSS usada para formatar as imagens de perfil dos grupos e pessoas de sua lista de conversas.

Clique com o botão direito sobre a imagem de perfil da conversa em aberto e selecione "Inspecionar": Uma linha com a tag <img> será selecionada. O que nos interessa é o valor da propriedade "class", que neste caso é: Qgzj8 gqwaM

Usarei apenas o primeiro valor para construir meu SELECTOR, que é "Qgzj8".

Agora vamos repetir o processo, porém clicando com o botão direito sobre o nome da pessoa ou grupo da conversa em aberto. Uma linha com a tag <span> será selecionada. O que nos interessa é o valor da propriedade "class", que neste caso é: _1wjpf Vamos então criar nosso primeiro snippet. Ainda na janela do DevTools, clique na aba "Sources", no canto esquerdo da tela você verá as opções "Page", "Filesystem" e uma setinha dupla para a direita indicando que há mais opções que não couberam na tela. Clique ali e você verá algumas outras opções, selecione a última, que é "Snippets". Note que no print acima já existem alguns snippets que criei antes de escrever o artigo. Mas vamos criar um novo, from scratch aqui. Clique em "New snippet" e dê um nome de sua preferência, vou chamar o meu de: zap-esconder-chats

Comece criando uma função "esconder()" e declarando os dois seletores que irão dar match com as imagens de perfil e nomes:

function esconder() {

    //lista de elementos DOM que possuem a classe Qgzj8
    //classe usada para imagens de perfil/grupo
    lista_imagem = document.getElementsByClassName('Qgzj8');

    //lista de elementos DOM que possuem a classe _1wjpf
    //classe usada para nomes de perfil/grupo
    lista_nome = document.getElementsByClassName('_1wjpf');

}

Agora vamos adicionar um laço de repetição para cada lista.

Para a lista de imagens, irei remover a visibilidade do elemento, ou seja, fazer a foto sumir.

Já para a lista de nomes, irei substituir o nome pela string "aaaaaa".

No final do código devemos invocar a função esconder(), caso contrário ela nunca será executada.

Segue a nova versão do código:

function esconder() {

    //lista de elementos DOM que possuem a classe Qgzj8
    //classe usada para imagens de perfil/grupo
    lista_imagem = document.getElementsByClassName('Qgzj8');

    //lista de elementos DOM que possuem a classe _1wjpf
    //classe usada para nomes de perfil/grupo
    lista_nome = document.getElementsByClassName('_1wjpf');

    //para cada imagem, alterar sua visibilidade para 'hidden'
    for (var i=0; i<lista_imagem.length; i++) {
        lista_imagem[i].style.visibility = 'hidden'; 
    }

    //para cada nome, alterar seu conteúdo para 'aaaaaa'
    for (var i=0; i<lista_nome.length; i++) {
        lista_nome[i].innerHTML = 'aaaaaa'; 
    }
}

esconder();

Agora vamos testar o snippet. Clique com o botão direito sobre o nome do snippet e escolha a opção "Run" ou "Executar".

A janela do teu WhatsApp Web vai ficar assim: Porém há um problema, a medida em que as pessoas vão lhe enviando mensagem e/ou você vai alternando entre os chats, os nomes e as imagens vão se restaurando.

Para resolver o problema iremos criar um setTimeout que irá chamar a função esconder() a cada 1 segundo. Dessa forma nem o bisbilhoteiro mais rápido do oeste será capaz de te espionar. Adicione a seguinte linha no final da função esconder():

escondeFunc = setTimeout(function() { esconder() }, 1000);

Nosso código final ficará assim:

function esconder() {

    //lista de elementos DOM que possuem a classe Qgzj8
    //classe usada para imagens de perfil/grupo
    lista_imagem = document.getElementsByClassName('Qgzj8');

    //lista de elementos DOM que possuem a classe _1wjpf
    //classe usada para nomes de perfil/grupo
    lista_nome = document.getElementsByClassName('_1wjpf');

    //para cada imagem, alterar sua visibilidade para 'hidden'
    for (var i=0; i<lista_imagem.length; i++) {
        lista_imagem[i].style.visibility = 'hidden'; 
    }

    //para cada nome, alterar seu conteúdo para 'aaaaaa'
    for (var i=0; i<lista_nome.length; i++) {
        lista_nome[i].innerHTML = 'aaaaaa'; 
    }

    //invocar a função esconder() a cada 1000 milissegundos
    escondeFunc = setTimeout(function() { esconder() }, 1000);
}

esconder();

Execute-o novamente e faça os devidos testes. Missão 1/2 concluída!!!