Extensões do navegador: Retirando o que é seu

Eu fiz uma extensão do Chrome para enviar mensagens WhatsApp para todos os números de telefone em uma página da Web, sem salvar um contato no telefone.

Vedant Agarwala Blocked Desbloquear Seguir Seguindo 2 de janeiro

Link do GitHub .

Como me senti depois de hackear com o WhatsApp

Recentemente, tive a infelicidade de procurar uma casa alugada. Além de analisar várias propriedades em portais de aluguel de imóveis, tive que entrar em contato com agentes. Para cada propriedade que eu gostei (e tive a chance de obter) :

Eu tive que copiar o número do telefone do agente da tela do computador para o meu telefone, esperar que o WhatsApp sincronizasse os contatos, mentalmente anotar o nome da lista do computador e só então enviar uma mensagem do meu telefone.

E eu teria que fazer isso 79 vezes :

agentes para entrar em contato

Muito trabalho manual; tinha que haver uma solução melhor.

Depois de algum trabalho de casa, decidi fazer uma extensão do Chrome que analisasse todas as páginas da Web, procurava números de telefone e enviava uma mensagem com um único clique. Algumas iterações posteriores, foi capaz de enviar mensagens para cada número, com um link para a propriedade correspondente, com um único clique. A extensão também armazena os números de telefone para os quais já enviou, para evitar mensagens repetidas:

Depois de executar minha extensão

Implementação Técnica

Eu imaginei que poderia executar javascript personalizado em web.whatsapp.com para enviar uma mensagem. Mas não havia como abrir uma caixa de batepapo de um novo usuário cujo número não é salvo. Eu poderia passar em params de consulta para web.whatsapp.com com um contato e uma mensagem, algo como https://web.whatsapp.com/send?phone=1234556789&text=Hey . Isso abriria o chatbox para o número +1 23456789 com 'Hey' no chat. Então, faça um clique no botão enviar e voila! A mensagem é enviada.

Com o plano acima, eu o separei nas seguintes subtarefas:

  1. Analisar cada página para números de telefone
  2. Anexar um ícone do WhatsApp a esses números
  3. Procure o hiperlink antes desse número de telefone.
  4. Abra o WhatsApp na Web ao clicar nesse ícone, com uma mensagem pré-preenchida para o número de telefone que contém o hiperlink encontrado.
  5. Adicione uma ação "enviar para todos" para enviar mensagens para todos os contatos em segundo plano.
  6. Um script que é executado no web.whatsapp.com para aguardar a caixa de bate-papo (ou o pop-up de número inválido ) abrir e enviar a mensagem.
  7. Enviar a mensagem é uma tarefa longa, portanto, mostre o status como: envio, envio, telefone inválido.
  8. Armazene os números já enviados para que eu não envie acidentalmente várias mensagens para o mesmo número.

Eu usei a incrível biblioteca libphonenumber-js e alguns javascript para encontrar números de telefone e adicionar o ícone do WhatsApp.

Ao clicar, abro a guia da Web do WhatsApp usando a API de extensão do Google Chrome. Foi um pouco complicado porque o script de conteúdo que adicionou o ícone teve que enviar uma mensagem para o script de segundo plano para abrir a guia junto com os parâmetros. Com algum código recursivo, encontrei o hiperlink mais próximo antes do número de telefone. Quase sempre esse seria o link para a propriedade que o agente colocou (quem meu script enviaria).

Isso marcou a metade do caminho: eu poderia enviar uma mensagem do WhatsApp do navegador para um contato não salvo sem tocar no meu telefone.

Então, no WhatsApp Web, escrevi um código async / await . Ele teve que esperar o carregamento do aplicativo da web; Especificamente, ele aguardava que a caixa de bate-papo fosse aberta ou que o popup "Número de telefone compartilhado via url seja inválido" aparecesse. Essa parte foi muito divertida – em vez de escrever funções anônimas / flechas recuadas, escrevi instruções lineares de await . Passei no teste de squint de Sandi Metz :

“Squint seus olhos. Se incline para trás. Procure por mudanças na forma. Procure por mudanças na cor. A forma reflete a complexidade cicrométrica – muitos condicionais aninhados. A cor reflete diferentes níveis de abstração, diferentes tipos de coisas estão em um mash mash. O teste de estrabismo pode ajudar!

A parte restante era simples: use as APIs do Google Chrome para enviar mensagens entre os scripts de conteúdo e de segundo plano. As APIs do Google Chrome para armazenar dados entre as atualizações de páginas também eram bem simples.

Gostei muito de como adicionei funções ao meu elemento criado e as chamei de partes diferentes no código. Por exemplo, veja a função setStatus :

 // em 1 arquivo: 
function addSendToWaToNode (node, phoneNumber) {
const sendToWaNode = document.createElement ('span');
...
sendToWaNode.setStatus = (status, save = false) => {
sendToWaNode.lastChild.textContent = status;
if (save) {
chrome.storage.sync.set ({[waNumber]: status}, function () {
console.log (`salvo $ {waNumber}: $ {status}`);
});
}
}
}
 // em outro arquivo, eu poderia usá-lo como: 
phoneSpans = document.querySelectorAll (`. $ {WA_SPAN_CLASS_NAME}`);
span = phoneSpans [0];
span.setStatus ('enviado', verdadeiro);

Finalmente, a tão esperada produção!

Acho que entrei em contato com 80 agentes em vez de 30 só porque era muito fácil.

Foi legal escrever javascript para extensão chrome porque eu não precisei me preocupar com problemas de compatibilidade para navegadores diferentes e poderia generosamente usar recursos do ES6 (const, async, await, funções de seta, interpolação de string).

Inicialmente, mantive meu código organizado e funções pequenas (~ 5 linhas), mas meio que desisti disso no final. Eu ainda estava sem casa, você sabe.

Uma coisa que senti muita falta foi o apoio nativo dos testes. Eu li pessoas feitas aplicações de nós e alguns frameworks como código para suportar testes para suas extensões. Mas não há solução pronta para uso, então deixo para o projeto.

Pensamentos de despedida

Em vez de gastar algumas horas para enviar manualmente mensagens como 80 agentes, passei uma semana escrevendo essa extensão do Chrome. Mas então não haveria nada para blogar ou se gabar . No entanto, eu faria de novo.

A extensão está atualmente em beta. Precisa de mais alguma interface do usuário, tratamento de erros para se tornar uma extensão de propósito geral. Não tenho certeza se devo publicá-lo na loja virtual do Google Chrome. Diga-me se você gostaria de usar algo assim.

Eu realmente gostei da ideia de extensões. É como adicionar recursos para os quais os criadores de aplicativos não têm tempo; ou eles pensavam neles como insetos, não como características. Tenha certeza, existem mais extensões para vir. Pedidos de extensão abertos ?