Nesta série de artigos, quero falar sobre minha experiência em escrever uma extensão da web para navegadores. Eu já tinha experiência na criação de uma extensão da Web, instalada por cerca de 100.000 usuários do Chrome, que funcionavam de forma autônoma, mas nesta série de artigos eu decidi me aprofundar no processo de desenvolvimento da extensão da Web, integrando-a firmemente ao lado do servidor.




Parte 2 , Parte 3 , Parte 4

Ideia para extensão da web

Cada desenvolvedor é confrontado com as tarefas de automatizar processos no navegador. Uma vez para mim, a tarefa era reunir membros de grupos de um determinado assunto no LinkedIn e no Facebook.

Antes disso, eu tinha experiência em escrever soluções de analisador de web em php, mas esses sites usam muitos elementos dinâmicos e o foco da solução para essa tarefa mudou especificamente para interagir com os recursos da web por meio de um navegador.

Obviamente, eu não violaria o acordo sobre a prestação de serviços (Termos e condições), portanto, o que é descrito abaixo é uma pura invenção da minha imaginação e não é recomendado para implementação.

Foi possível abrir rapidamente o console do desenvolvedor e escrever um script javascript que simulasse as ações do usuário, após o qual eu poderia coletar dados. Essa abordagem trabalhou parcialmente com o Facebook, onde os membros do grupo e suas informações podem ser coletados em uma página. Mas não funcionou no LinkedIn, onde você precisa abrir a página de cada membro.

Depois de procurar soluções de terceiros, escolhi o iMacros para esta tarefa. Esta extensão tem seu próprio idioma para escrever macros. De alguma forma, eu o adaptei para resolver o problema do LinkedIn. Eu tive que baixar a versão antiga do Mozilla Firefox, pois a extensão não funcionou para a implementação multithread deste navegador.

Enquanto procurava soluções de terceiros, deparei-me com muitas variações de analisador da Web, rastreador da Web, raspador da Web, etc. Muitos estavam focados em sites com navegação página a página e não em conteúdo dinâmico. Algumas soluções sugeriram a instalação de uma solução de software para o sistema operacional e o uso de uma extensão da Web para esse complexo. Me deparei com coisas muito altamente especializadas, por exemplo, para coletar participantes apenas no Facebook.

Depois de todo o tormento, tive a ideia de "inventar minha bicicleta" para automatizar tarefas no navegador. Entre os requisitos obrigatórios para minha extensão da web, destaquei:

1. Trabalhe no número máximo de navegadores da web, incluindo dispositivos móveis.
2. O uso da linguagem de script padrão para navegadores é javascript.
3. Usando seus próprios arquivos de dados em scripts.
4. A capacidade de salvar dados recebidos do script em um arquivo.
5. Os scripts devem ser públicos ou privados. Se o script for público, a equipe de segurança precisará verificar esse script.

Mais adiante nesta lista, observei coisas mais específicas para cada item.

1. Você precisa usar uma estrutura para escrever extensões da Web para minimizar os esforços para desenvolver soluções entre navegadores.
2. Javascript é suportado por todos os navegadores, mas você precisa escrever sua própria biblioteca para interagir com a extensão da web. Essa biblioteca deve ter funções para salvar dados, recuperar dados de arquivos baixados etc.
3. Geralmente é necessário usar a entrada para executar o script. Por exemplo, dados para autorização, chaves para a API, uma lista de páginas a serem rastreadas etc. Esses dados devem ser enviados diretamente para a extensão da Web e armazenados na nuvem.
4. Salvar dados do script é uma das funções mais necessárias para automação. Os dados armazenados devem ser enviados ao csv diretamente da extensão da web ou enviados para o e-mail do usuário quando o limite de dados para upload for excedido. Por exemplo, se o upload de membros do grupo for superior a 10.000, o download de uma extensão da Web poderá demorar. Isso deve ser evitado gerando um arquivo no servidor.
5. Você deve ter uma interface administrativa da web para a equipe de segurança verificar os scripts dos usuários que eles marcaram como públicos.

De tempos em tempos, eu encontrava mais e mais soluções para o mesmo problema - executando scripts personalizados em um navegador. Todas essas soluções não atendiam aos meus requisitos, pois eu queria ter uma extensão da web capaz de remover anúncios em todas as páginas; transformar a página e me mostrar apenas seu conteúdo, sem marcação desnecessária; coletar dados de qualquer página e convertê-los em um formato conveniente para uso futuro; coletar dados após um certo período de tempo; etc.

Portanto, furiosamente "peguei fogo", criando uma extensão para executar scripts personalizados para o intervalo máximo de tarefas.

Escolhendo uma estrutura de extensão da web

Como eu visava inicialmente o número máximo de navegadores da web, precisava de uma estrutura para criar extensões entre navegadores. Podemos notar imediatamente o fato de que simplesmente não existe tal estrutura. Como muitos navegadores, embora funcionem dessa maneira e forneçam extensões da Web com uma API semelhante para interação, são fundamentalmente diferentes.

Fui forçado a abandonar a versão inicial do suporte ao navegador móvel quase imediatamente. Como nenhum desses navegadores não oferece a capacidade de usar extensões da web. Encontrei apenas uma menção de suporte a extensões da Web no navegador Dolphin, mas não consegui encontrar informações detalhadas no site oficial. Foi decidido abandonar essa idéia brilhante.

Ao escrever minha extensão antiga, usei o framework kango. Em 2013, foi o mais conveniente possível. Embora sem o suporte do Internet Explorer.

Como minha extensão poderia funcionar como um bookmarklet, não prestei atenção a esse fato e escolhi essa estrutura, que por sua vez era apenas a solução perfeita para o desenvolvimento entre navegadores.

Desde então, surgiram outros projetos que se propuseram ao objetivo de desenvolvimento de extensões da Web em vários navegadores. Encontrei todos esses projetos em um estágio inicial de desenvolvimento. A tarefa deles foi simplificada desde que o Mozilla Firefox começou a usar a API WebExtensions, que tornou possível transformar facilmente extensões do Chrome em extensões do Firefox.

As extensões para o navegador Opera em 2013 eram compatíveis com as extensões para o Chrome. Agora, as extensões para o Safari funcionam apenas para MacOs, porque o suporte à plataforma Windows do próprio navegador Safari cessou há muito tempo.

O navegador Tor roda no antigo mecanismo Mozilla Firefox e, portanto, suporta extensões da web xpi, que a Mozilla Foundation abandonou em favor da tecnologia de extensão da Web.

Em essência, a estrutura do kango está quase cumprindo sua função até hoje, pois gera extensões da web para todos os navegadores, exceto o Internet Explorer. Mas como já passou muito tempo e o Firefox agora trabalha em um mecanismo semelhante ao Chrome, o kango gera o mesmo pacote para dois navegadores. Eu tive que modificar um pouco a geração do Firefox e adicionar a geração do Tor.

Como o status do projeto de estrutura do kango não é claro, assim como a licença do código, não posso postar minhas alterações no domínio público. Se os detentores de direitos autorais permitirem o lançamento da versão 1.9.0 com código-fonte aberto, terei prazer em ajudar nessa tarefa.

Todas as extensões da Web têm dois pontos para trabalhar com dados. O arquivo content.js permite manipular o DOM, enquanto background.html permite trabalhar com dados em segundo plano e interação com o servidor. A comunicação entre esses dois pontos ocorre através do mecanismo da mensagem.

Portanto, para modificar o DOM com dados do lado do servidor, precisamos obtê-los em background.html e usá-los em content.js através do mecanismo de transmissão de mensagens

Esse mecanismo ideal não funcionou para o meu caso por várias razões. Portanto, deixei no background.js apenas a lógica de trabalhar com pop-up e o botão de extensão da web no navegador.
A lógica de qualquer extensão da web com uma janela pop-up é a mesma. Ao clicar no botão, apenas mostramos pop-up; no segundo clique, feche.

A estrutura do Kango oferece ao desenvolvedor uma interface unificada para interação e, em seguida, converte o código da extensão da Web escrita na extensão da Web para um navegador da Web específico e, portanto, economiza muito tempo desenvolvendo extensões da Web para vários navegadores.

No próximo artigo, falarei sobre a escolha da "Estrutura para o lado do servidor da extensão da web e da interface da extensão da web"