Introdução

Desenvolver extensões do Chrome é REALMENTE divertido se você for um engenheiro de front-end. Se você, no entanto, tem dificuldade para visualizar a arquitetura de um aplicativo, desenvolver uma extensão do Chrome vai incomodar você várias vezes devido à quantidade excessiva de componentes com os quais a extensão funciona. Aqui estão algumas dicas de como começar, quais problemas eu encontro e como evitá-los.

Observação: não estou cobrindo os aplicativos do pacote Chrome, que embora semelhantes, funcionam de maneira diferente. Também não vou cobrir as opções de página da API nem as novas páginas de eventos da marca. O que eu explico cobre a maioria dos aplicativos básicos do Chrome e deve ser suficiente para você começar.

Índice

1. Entenda a arquitetura do Chrome
2. Entenda a relação guias-extensão
3. Escolher a interface certa para o trabalho
4. Aprenda a passar informações entre interfaces
5. Conclusão

<a name=”understand”> </a> 1) Compreender a arquitetura do Chrome

Não estou dizendo para você ir imediatamente e ler todos os documentos para o desenvolvimento de extensões do Chrome, mas para entender como funciona a estrutura geral. Na verdade, se você for ler imediatamente, terá dificuldade em entender o que é o quê e aprenderá vários métodos que nunca utilizará.

O que me ajudou a entender é que a única coisa com que acabo lidando são duas coisas:

• Uma guia (ou várias guias).
• Uma extensão.

Uma guia é uma página da web que está atualmente carregada em sua janela no Google Chrome (óbvio, certo?), Enquanto a extensão é seu aplicativo que fornecerá uma camada de negócios sobre UMA OU MAIS dessas guias. Isso significa que você precisa estabelecer quais guias deseja modificar / estender / atualizar e como.

Mesmo se você estiver desenvolvendo uma extensão “isolada” (uma extensão que não depende / se preocupa com o conteúdo da página e cujo único objetivo é estender a funcionalidade de seu aplicativo atual, por exemplo, um aplicativo do Facebook), você precisa estar ciente como as guias funcionam com seu aplicativo.

<a name=”tabs-extension”> </a> 2) Entenda a relação guias-extensão

A relação é bastante simples: uma extensão “registra” retornos de chamada para o Chrome para uma situação específica, dado que você descreveu uma interface específica para fazer isso. Dependendo da interface, as abas vão mostrar o conteúdo, mudar o seu conteúdo ou modificar o comportamento que têm para o usuário.

As “interfaces” existentes para fazer isso são as seguintes:

• Scripts de conteúdo
• Páginas de fundo
• Ações da página
• Páginas do navegador

Nota: A razão pela qual coloquei interfaces entre aspas duplas é porque nem todas elas necessariamente têm uma GUI que pode ser consumida para fornecer uma ação, que pode ser a definição estrita de uma interface para a maioria das pessoas.

O primeiro lugar onde você declara quais interfaces usará e como está no arquivo de manifesto . O arquivo de manifesto é um arquivo json que descreve o que seu aplicativo pretende fazer, como e quais permissões ele requer para fazer isso para cada uma das interfaces.

Então, quais você deve usar? Bem, você precisa escolher o caminho certo para o trabalho.

<a name=”picking”> </a> 3) Escolher a interface certa para o trabalho

O que seu aplicativo pretende fazer? Modificar o conteúdo de uma página específica? Adicionar uma opção de menu com o botão direito? Fornece um ícone com um pop-up para atalhos para algo?

Existe uma interface para isso. Vamos analisar cada um deles:

Script de Conteúdo

Os scripts de conteúdo são estilos ou arquivos javascript que são injetados em uma página específica. Como o javascript e o css só podem criar completamente uma nova página a partir do código, você pode criar uma nova interface dentro de uma página existente ou substituí-la completamente.

Como usar
No arquivo de manifesto, você especifica um padrão dentro da opção “scripts de conteúdo “. Basicamente, sempre que um URL de guia corresponder a esse padrão específico (por exemplo, http: //*.com), ele executará as diretivas que você fornecer para a opção “scripts de conteúdo “.

Quando usar
Quando você deseja aprimorar o conteúdo, estilo ou comportamento de uma página; sempre que qualquer alteração criada por sua extensão do Chrome, melhora a experiência do usuário de alguma forma com o que ele está vendo na tela.

Páginas de fundo

As páginas de fundo vêm em dois sabores: com marcação ou sem marcação. As páginas de fundo são os controladores de nosso aplicativo e existem durante todo o tempo em que nosso aplicativo está ativo. Eles podem ser consumidos por qualquer guia a qualquer momento, desde que a Página de Fundo tenha registrado um ouvinte de evento. Você pode ir para a seção Extensões na parte Configurações do Chrome e verá uma página que reside lá.

As páginas de fundo geralmente têm apenas javascript dentro delas (que também podem ser sem marcação) ou iframes que ajudam a inicializar alguns evals para aplicativos. Se você especificar a página de fundo como um html, eles serão renderizados como tal, mas se você apenas especificar scripts na opção “fundo” do arquivo de manifesto, o Google Chrome irá gerar um para você. Atualmente, eu apenas uso uma opção sobre a outra para organizar meus scripts.

Como usá-lo
No arquivo de manifesto, você pode especificar uma página .html na diretiva page dentro da opção “background” ou na diretiva scripts na mesma opção. Você pode configurar isso como um array.

Quando usá-lo
, considero as páginas de fundo úteis em 3 cenários:

• Quando várias guias consomem seu aplicativo e você precisa ter um gateway comum para a interação.
• Quando você precisa de comunicação entre seu script de conteúdo e uma ação de página / ação do navegador por qualquer motivo.
• Quando você precisa de uma tarefa específica feita em segundo plano.

Ações da página

Ações da página são pequenos ícones que aparecem ao lado do url em uma guia específica. Eles fornecem uma maneira fácil de mostrar “algo está acontecendo” para o seu usuário.

Mais uma vez, as Ações de página vêm em dois sabores: com um pop-up e sem um pop-up. Com um pop-up, eles mostram um .html específico descrito no arquivo .manifest de sua aplicação e podem até executar Javascript básico dentro desse pop-up. Tentar executar a avaliação exigirá que você inicialize-o dentro de um iframe da página de fundo (consulte o ponto 3 sobre quando usar uma página de fundo). Eles são criados assim que você clica neles e destruídos quando clicados em outro lugar.

Os popupless estão apenas … lá. Ações de página podem realizar ações quando clicadas nelas, mas são bastante limitadas e seu comportamento não é tão fácil quanto clicar em um elemento do DOM. Eu uso pop-ups na maioria das vezes e envolvo uma funcionalidade de clique dentro do pop-up, pois falhei terrivelmente em fornecer uma ação apenas clicando na ação da página.

Como usar
No arquivo manifest.json, você pode colocar a opção “ação da página “, e dentro das diretivas ícone padrão, título padrão e pop-up padrão , que levam uma url para um ícone, o título flutuante (string) e um url para a página pop-up .html.

Quando usar
Este é complicado. Ele pode ser exibido em várias guias ou apenas em uma, dependendo do seu código. Na maioria das vezes, eles estão vinculados a uma página de fundo que chama pageAction.show (tab.id), onde tab.id é uma guia obtida anteriormente.

As ações da página podem ter acesso ao conteúdo da guia por meio do sistema de mensagens (descreverei mais tarde), mas devido à sua natureza, também podem representar um estado dentro da página. Use-o quando pequenas ações são necessárias, mas não processamento pesado, pois são destruídas no fechamento.

Uma limitação dos pop-ups de ação da página é o gerenciamento de Javascript. Por razões de segurança, eval é restrito dentro de um pop-up, então se você precisar fazer algo (como usar um sistema de templates dentro dele), você precisa passar as informações para a página de fundo, renderizá-la com segurança dentro de um frame e enviar as informações analisadas de volta ao pop-up. Você pode querer fazer essas operações em segundo plano e fornecer uma interface por meio da mesma página ou uma ação de navegação.

Nota: os sistemas de modelagem são bastante comuns na maioria das bibliotecas. Se você tentar usar bibliotecas MVC ou MMVC, certifique-se de que elas tenham um modo compatível com CSP . Por exemplo, Angular JS pode ser usado dentro de uma ação de página, mas atualmente KnockoutJS irá travar com algumas ligações específicas. Não testei outras bibliotecas.

Procurar ação

Ações de navegação são provavelmente as interfaces mais comuns ou bem conhecidas das extensões do Chrome. Eles são os pequenos ícones próximos ao seu url e são exibidos em todas as guias, desde que estejam ativados.

As ações de navegação também são as mais poderosas de todas as extensões, na medida em que podem ter acesso ao conteúdo de uma guia (desde que esteja selecionada e você tenha permissão para isso), bem como exibir uma interface por si mesmas. Por fim, eles têm um componente que nenhuma das outras 3 interfaces tem, um emblema , que é um pequeno rótulo sob o ícone que pode fornecer informações sobre o status do seu aplicativo, se necessário.

Como usá-lo As
ações de navegação funcionam da mesma maneira no arquivo de manifesto do que nas ações da página, mas com a opção ” ação de navegação ” em vez disso e com a diretiva de emblema padrão adicional .

Quando usá-lo
Assim como as Ações da Página, seu javascript deve ser inicializado, pois não fica no documento da janela. No entanto, ao contrário das Ações da página, eles não precisam saber se devem ser exibidos ou não e têm uma variedade maior de APIs, desde que você peça as permissões adequadas para isso.

<a name=”message-passing”> </a> 4) Aprenda como passar informações entre Interfaces.

Agora que você conhece a maioria da arquitetura e dos componentes dos quais uma extensão do Chrome pode ser feita, a próxima coisa mais importante a entender é a passagem de mensagens.

A passagem de mensagens é a capacidade de enviar informações de uma interface para outra. Normalmente, cada interface contém o seguinte:

• Script de conteúdo: acesso à página real em que o usuário está navegando.
• Ação da página: Acesso a uma interface para uma (ou várias) guias específicas por meio de um clique.
• Ação de navegação: acesso a uma interface por meio de um clique.
• Páginas de fundo: acesso a todas as interfaces.

Esta é a relação entre todos eles:

• As ações da página e a ação de navegação têm acesso à página Plano de fundo por meio do comando chrome.extension.getBackgroundPage () (retorna um objeto Window)

  // Inside popup.html as popup.js defined in default_popup
  /*
  * Library that helps to manage the communication between the Chrome.PageAction Popup and Background Page
  * @class popupController
  */
  a.popupController = function() {
          var backgroundWindow = chrome.extension.getBackgroundPage();
          var backgroundPageController = backgroundWindow.aiesec.backgroundPageController();
          backgroundPageController.loadBootstrap();
  };

• Os scripts de conteúdo podem se comunicar com a página de plano de fundo apenas por meio de uma solicitação assíncrona no formulário:

  // Inside content.js
  chrome.extension.sendMessage({greeting: "hello"}, function(response) {
          console.log(response.farewell);
  });

• A página de plano de fundo pode ter acesso à sua própria marcação por meio de Javascript nativo (útil ao inicializar operações perigosas, como eval dentro de um iframe)

  /**
  * Chrome Extension Bootstrap for Popup. Loads logic from Sandboxed HTML for eval-safe use into Popup.
  * @event loadBoostrap
  * @namespace backgroundPageController
  **/
  pg.loadBootstrap = function() {
          var iframe = document.getElementById("aiesec-frame");
          var data = {
                  command: "render"
          };
          iframe.contentWindow.postMessage(data, "*");
  };

• As páginas de fundo e os scripts de conteúdo podem receber mensagens a qualquer momento. Na documentação, onRequest é usado, mas está obsoleto desde o Google V.17, então agora usamos onMessage.

Observação: cuidado, as páginas de plano de fundo carregam primeiro do que as páginas, portanto, certifique-se de verificar se a página foi carregada com êxito antes de enviar uma mensagem ou você receberá um erro de conexão de porta

// Inside background.js
/**
* Listener for Displaying the Extension Page Action when the Tab is updated.
* @private
* @event displayPageAction
* @param {Number} tabId The tabId given by the tabs listener to know which tab was updated.
* @param {Object} changeInfo The current status of the tab.
* @param {Object} tab The metadata of the tab.
**/
    var displayPageAction = function (tabId, changeInfo, tab) {
    var match = regexAIESEC.exec(tab.url); // var regexAIESEC = new RegExp(/http:\/\/www.myaiesec.net\//);
    // We only display the Page Action if we are inside a MyAIESEC Tab.
    if(match && changeInfo.status == 'complete') {
        //We send the proper information to the content script to render our app.
        chrome.tabs.sendMessage(tab.id, {load: true}, function(response) { // We don't do anything if we don't have a response
        if(response) {
             console.log("Inside Background Response script, we had a response:");
             //After successfully getting the response, we show a Page Action Icon.
            chrome.pageAction.show(tab.id);     
        }
    });
    }
    };

...
// Inside content.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.load) {
        var data = ... //Something from the page user browses.
        sendResponse({webpageContent: "data"})
        return true;
    }
...

O padrão mais comum que uso é o seguinte.

• A página de fundo verifica se a guia foi atualizada.
• Quando estiver concluído, começamos a fazer nossa lógica de aplicativo.
• Se precisarmos de algo da página de conteúdo, enviamos uma solicitação e aguardamos uma resposta.
• Realizamos uma atividade com base na resposta, como mostrar uma ação da página, armazenar informações em um servidor externo (por exemplo, você não pode fazer isso no script de conteúdo devido à política de origem cruzada), etc.
• Registramos retornos de chamada em nossa página de fundo para aguardar ações de um Popup de Ação de Página, Popup de Ação de Navegação ou uma Página de Conteúdo (o último geralmente injetado por nós mesmos, já que normalmente as páginas da web não têm código javascript que envia coisas para uma Extensão do Chrome )

<a name=”conclusion”> </a> 5) Conclusão

Desenvolver extensões do Chrome é muito divertido, pois você pode imitar um servidor inteiro dentro de um script simples por meio de Javascript (o background.js pode ser seu back-end e pode se beneficiar de recursos como web workers!). Pode ser bastante complicado no início, mas contanto que você entenda os princípios que acabei de declarar, o resto é fácil.

Embora eu não compartilhe tanto código quanto gostaria, tenho um aplicativo Chrome existente que você pode ler livremente no Github , Bitbucket -se você preferir inconstante como eu-. O branch master tem um exemplo pop-up que usei devido ao problema de KnockoutJS com eval, então estou mudando para uma interface de página de conteúdo sob o branch dentro de MyAIESEC porque em vez de ajudar o usuário com uma interface pop-up, substituirei o conteúdo da página real com um novo.

Finalmente, aqui está a essência , caso você queira copiar, bifurcar ou atualizar este artigo. Não hesite em me contactar se quiser saber mais.