7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Google Chrome

Desenvolvendo Extensões para o Google Chrome

Scroll to top
Read Time: 13 mins

Portuguese (Português) translation by Edgar Valfogo Santos (you can also view the original English article)

Não há segredo em dizer que meu navegador favorito é o Google Chrome. Eu gosto dele por que é rápido, confiável, não tem problemas de execução (na maior parte do tempo), e é bem bonito. E tem uma coisa que me faz gostar mais ainda, algo que o valoriza mais. É o fato de que você pode construir uma extensão para o navegador utlizando apenas HTML, CSS e JavaScript. Eu sempre apoio tais produtos, produtos que são abertos para a comunidade, e o Chrome vem com este tipo de proposta. Se você precisa de algo que ainda não existe, você pode desenvolve-lo por si só.

Ao fim deste artigo, você terá uma extensão do Chrome funcionando. Esta extensão utilizará boa parte das técnicas explicadas a seguir. Você pode baixar o exemplo final utilizando o download do source code no topo desta página.


Porque Deveria Aprender a Escrever sua Própria Extensão

Eu sempre encorajo pessoas para usarem ferramentas para agilizarem o seu fluxo de trabalho. O software que nós usamos deve nos ajudar, nós não deveríamos ter que lutar contra ele. Desenvolver extensões/plugins para o seu editor ou navegador favorito não ajuda somente você, mas também aos programadores que estarão cedo ou tarde na mesma situação. Se algo faltar, você pode criar isto por si só e com o Chrome é algo fácil. Modelar o seu ambiente em torno das suas necessidades é a chave para se tornar altamente produtivo.


Desenvolvendo & Testando suas Extensões

Felizmente existe uma forma fácil de testar a sua extensão sem ter que subir sua extensão para o Chrome web store. Na barra de endereço do seu navegador, escreva:

Marque a caixa Modo do desenvolvedor e clique no botão Carregar extensão expandida... Então simplesmente selecione a pasta onde estão os arquivos da sua extensão.

extensionspanelextensionspanelextensionspanel

Arquitetura

Aqui temos um diagrama da arquitetura para uma extensão do Chrome

architecturearchitecturearchitecture

Agora vamos olhar mais detalhadamente para cada elemento em conjunto com esta arquitetura.

Manifest

O ponto inicial da sua extensão é o arquivo manifest.json. Este deve conter um objeto JSON válido. Por exemplo:

As propriedades necessárias são: nome, versão e manifest_version. A version entre o primeiro e o quarto número, separados por pontos. É algo que será utilizado pelo Google para o sistema de atualizações automáticas. É dessa forma que ele irá saber quando ele deve atualizar a sua extensão. O valor do manifest_version tem que ser o número 2.

O manifest pode conter outras propriedades dependendo do tipo de extensão que você precisa, mas ele irá descrever/exibir somente o que achar ser mais interessante.

Páginas de Plano de Fundo

Cada extensão tem um plano de fundo invisível que funcionará conjunto com o navegador. Existem dois tipos de páginas de plano de fundo - As páginas que persistem e as páginas de eventos. A primeira é ativa, durante todo o tempo de execução. A segunda é ativa somente quando é necessário. A Google encoraja os desenvolvedores a utilizarem páginas de evento, pois elas preservam a memória e aumentam a performance do navegador. De qualquer forma, é bom saber quando e onde você deve por suas lógicas principais e inicializações. Normalmente as páginas/scripts de plano de fundo são uma ponte entre as outras partes da extensão.

Um exemplo de como você deve descrever as páginas no manifest:

Como você pode ter imaginado, se a propriedade persistent estiver como false você estará declarando uma página de evento. Caso contrário, você estará declarando uma página de plano de fundo persistente.

Content Script - Script de Conteúdo

Se você precisa acessar a DOM da página atual, então você precisará utilizar um script de conteúdo. O código executará conjunto com o contexto da página web atual, o que significa que será executado a cada atualização/refresh da página. Para adicionar tal script, utilize a sintáxe a seguir.

Tenha em mente que o valor de matches determina para que página o seu script será utilizado. Saiba mais sobre matches patterns (padrões de comparação) aqui.

Interfáce do Usuário

Existem várias formas de construir a Interface de Usuário da sua extensão. Aqui estão quatro das mais populares.

Browser Action - Ações de Navegador

Maioria dos desenvolvedores usam a propriedade browser_action para construir seus plugins. Uma vez que você configurar isto, um ícone representando sua extensão será inserido à direita da barra de endereços. Os usuários podem então clicar no ícone que abrirá um popup que é o conteúdo HTML controlado e criado por você.

browseractionbrowseractionbrowseraction

Os arquivos manifest devem conter os seguintes dados:

A propriedade default_title é uma pequena dica da ferramenta (tooltip) que aparece quando o usuário coloca o mouse sobre o seu ícone. A propriedade default_popup é o arquivo HTML que é carregado dentro do pop-up. Há também a possibilidade de adicionar uma etiqueta sobre seu ícone. Você pode adicionar isto dentro do seu script de plano-de-fundo. Por exemplo:

Este é o código que utilizei para produzir a imagem acima.

Page Action - Ações de Página

A propriedade page_action é similar ao browser action, mas o ícone é exibido dentro da barra de endereços:

pageactionpageactionpageaction

O interessante nisto é que o seu ícone é escondido inicialmente, e você decidirá quando exibí-lo. Por exemplo, na imagem acima, o ícone do RSS é exibido somente se a página atual contém um link para o feed RSS. Se você precisa ver o seu ícone o tempo todo, é bom utilizar a propriedade browser_action.

Para adicionar o page action, insira o código a seguir dentro do seu manifest:

Diferente do ícone de browser action, os ícones de page actions não tem etiquetas.

DeveloperTools - Ferramentas para Desenvolvedores

Eu uso muito o DeveloperTools e é ótimo que o Chrome ofereça um método para adicionar novas abas para este tipo de ferramenta. A primeira coisa que você deve fazer é adicionar uma página HTML que será carregada quando o painel é aberto.

Não há necessidade de adicionar qualquer HTML dentro da página. Basta que o arquivo JavaScript que criará a aba seja anexado/linkado:

E então inclua o código à seguir dentro do arquivo devtools.js.

O código acima adicionará uma nova aba com o nome TheNameOfYourExtension e assim que você clicar nesta aba, o navegador carregará o index.html dentro do DeveloperTools.

Omnibox

O omnibox é a palavra chave dentro do que é exibido dentro da barra de endereços do Chrome. Por exemplo, se você adiciona a propriedade a seguir no seu manifest:

E então adiciona o código abaixo, dentro do seu script de plano de fundo:

Você deve ser capaz de escrever yeah dentro da barra de endereço. E então você verá algo parecido com isso:

omniboxomniboxomnibox

Pressionando tab, o seguinte será exibido:

omnibox2omnibox2omnibox2

Claro que usando a API chrome.omnibox, você poderia adquirir o input/entrada de dados do usuário e reagir a este input.

APIs

Existem possibilidades variadas sobre o que você pode fazer com a sua extensão. Por exemplo, você pode acessar os favoritos ou histórico do usuário. Você pode mover, criar abas ou até mesmo ajustar o tamanho da janela. Eu recomendo muito que você dê uma lida na documentação para ter uma idéia melhor de como executar estes objetivos.

O que você deveria saber é que, nem todas as APIs estão acessíveis em todas as partes da sua extensão. Por exemplo, o seu script de conteúdo não pode acessar chrome.devtools.panels, e o script na sua aba do DeveloperTools não pode ler o DOM da página. Então se você por acaso estiver se perguntando do por quê algo não funciona, este pode ser o motivo.

Comunicação

Como mencionei acima, você nem sempre tem acesso a API que você quer acessar. Se este é o caso, então você precisa usar o passe de mensagens. Existem dois tipos de mensagens: requisições únicas (one-time requests) e conexões de longa-vida (long-lived connections).

One-Time Requests - Requisições únicas

Este tipo de comunicação acontecem somente uma vez. Ou seja:  Você envia uma mensagem e espera uma resposta. Por exemplo, você poderia adicionar o seguinte código no seu script de plano de fundo:

E então usar o código abaixo no seu script de conteúdo:

E assim é como você pode obter informações do DOM da página e utilizar isto dentro do seu script de plano de fundo, que normalmente não tem acesso a este dado.

Long-Lived Connections - Conexões de Longa Vida

Use este tipo de mensagem se você precisa de um canal persistente de comunicação. Dentro do seu script de conteúdo insira o código à seguir:

E então no seu script de plano de fundo, use isto:

Sobrepondo Páginas

Sobrepor páginas é uma boa forma de customizar/personalizar o seu navegador Você pode trocar algumas das páginas padrão do Chrome. Por exemplo, você pode criar a sua própria página de histórico. Para fazer isto, adicione o trecho de código a seguir:

os valores possíveis para <page to override> são bookmarks, history e newtab. É bem legal ter uma nova aba, personalizada.


Uma Extensão de Exemplo

Para fechar este artigo, eu decidi incluir um exemplo simples, assim você pode ter um melhor entendimento de todo o contexto. Esta extensão de exemplo usará a maioria das coisas que descreví acima, e configurará as cores de fundo (background-color do CSS) para #F00 em todas as divs da página atual Sinta-se livre para baixar o código fonte utilizando o botão no topo deste artigo.

O Arquivo Manifest

Obviamente iniciei com o arquivo manifest:

Tenha em mente que você pode organizar os seus arquivos em pastas. Preste atenção, também, na propriedade version. Você deve atualizar esta propriedade toda vez que você subir sua extensão no web store.

Background Script - Script de Plano de Fundo

As primeiras linhas pegam as ações do usuário pela omnibox. Depois disto, eu configuro um "one-time request listener", para capturar a mensagem vinda do ícone de ação do navegador.

O próximo trecho é uma long-lived connection, com a aba para a DeveloperTools (Não é exatamente necessário utilizar uma long-lived connection para este tutorial, só fiz por propósitos educacionais). Utilizando estes listeners, eu sou capaz de capturar o input do usuário e envia-lo para o script de conteúdo, que tem acesso aos elementos DOM. O ponto chave aqui foi selecionar a primeira aba, da qual eu gostaria de manipular e enviar a mensagem para esta. Por fim, eu adiciono uma etiqueta ao ícone de extensão.

Browser Action

Nós iniciamos com o nosso popup.html:

E então criamos o popup.js:

O pop-up contém apenas um botão, e uma vez que o usuário clica nele, envia uma mensagem para o script de plano de fundo.

DeveloperTools - Ferramentas para Desenvolvedores

Para o DeveloperTools, nós faremos a mesma coisa que fizemos com o pop-up, a única diferença é que eu utilizei uma long-lived connection.

Content Script - Script de Conteúdo 

O script de conteúdo espera por uma mensagen, seleciona todas as divs da página atual, e muda suas cores de fundo. Preste atenção ao objeto do qual eu anexei ao listener. No script de conteúdo temos chrome.extension.onMessage.

Customizando a Página Nova Aba

A última coisa que esta extensão customiza é a página de nova aba. Nós podemos fazer isto facilmente, apontando a propriedade newtab para o newtab/newtab.html:

Tenha em mente que você não pode criar uma réplica da página padrão de nova aba. A ideia deste recurso é adicionar algo completamente diferente das funcionalidades padrão. Aqui é o que o Google diz:

Não tente emular a página padrão de Nova Aba. A API necessária para criar páginas de Nova Aba ligeiramente alteradas - como páginas favoritas, páginas recentemente fechadas, dicas, um tema de plano de fundo e assim por diante - não existe ainda. Até eles fazerem isto, é melhor você tentar fazer algo completamente diferente.


Testando

Escrever uma extensão para o Google Chrome nem sempre é uma tarefa fácil, e você provávelmente tera problemas. A coisa boa é que você ainda pode usar o console para verificar os outputs das suas variáveis para ajuda-lo a testar. Sinta-se livre para adicionar console.log no script de conteúdo ou de plano de fundo. De qualquer forma, isto não funcionará em scripts que funcionam no contexto da DeveloperTools, neste caso você deve considerar a utilização do método alert, uma vez que este funciona em todo local.


Conclusão

Na minha opinião, Chrome é um dos melhores navegadores disponíveis. Os desenvolvedores da Google fazem com que criar extensões seja relativamente fácil, nos dando poder de cria-las em HTML, CSS e JavaScript.

Sim, existem algumas partes complicadas, mas geralmente somos capazes de produzir plugins valiosos. Tenha em mente de que este artigo não cobre tudo relacionado à desenvolver extensões para o Chrome. Existem algumas outras coisas úteis como menus de contexto, páginas de opção e notificações. Para os tópicos que não cobri, por favor, procure na documentação para informações mais detalhadas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.