Criar Suas Próprias Extensões do Navegador, Parte 1: Estenda Seu Alcance no Chrome

Escreva uma extensão básica do navegador para o Chrome

Cada navegador tem seus fãs, infamadores, vantagens e desvantagens. A única coisa que todos têm em comum é que as pessoas cada vez mais gastam mais e mais tempo com eles. Esta série examina como é desenvolver a extensão do navegador para o Chrome, Firefox, Internet Explorer e Safari. Você verá a mesma extensão básica para cada navegador ter uma noção de como é estender cada navegador, se é difícil ou fácil executar algumas tarefas comumente desejadas e o que está envolvido na distribuição de sua extensão. Neste artigo, você desenvolverá uma extensão para o Chrome.

Antes de iniciar

Para este artigo, você precisa fazer o download e instalar o Google Chrome versão 19 ou posterior (os exemplos mostrados aqui tem como referência a versão 19). Você também deseja algo que possa usar para editar HTML, CSS e JavaScript. Isso ajudará se você tiver alguma experiência usando o Chrome e algumas extensões dele primeiro. Passe algum tempo para navegar para o Chrome Web Store (consulte Recursos). Consulte as extensões que estão disponíveis e utilize alguma para exemplo. Isso fornecerá algum contexto para este artigo.


Por que desenvolver uma extensão de navegador?

É possível desejar desenvolver uma extensão de navegador por diversos motivos. Um uso comum de extensões de navegador é criar uma interação entre um navegador e outro aplicativo ou serviço. O Evernote, 1Password e Adobe Shadow todos fazem algo semelhante, como muitas outras extensões. Ou é possível desejar incluir alguma funcionalidade nova que falte ao navegador, incluindo ferramentas de desenvolvedor ou alguns utilitários de captura de tela. Alguns desenvolvedores têm escrito extensões com objetivos muito específicos—rastreadores de pontuação esportiva, aprimoramentos para websites específicos, relatórios sobre o tempo, e muito mais. As pessoas fazem muitas coisas diferentes com extensões. O que você vai fazer?


Que extensão você está desenvolvendo?

Para demonstrar o processo de desenvolvimento de uma extensão no Chrome, você escreverá uma extensão chamada Gawkblocker. O Gawkblocker permitirá bloquear determinados domínios que você está tentando não visitar por algum motivo ou outro. O Gawkblocker possui diversos componentes:

  • Um pop-up (mostra quem está bloqueando)
  • Um ícone de navegador visível (ponto de entrada para a extensão)
  • Uma página de opções (configure domínios que deseja bloquear e para onde você deseja ir)

Em geral, o Gawkblocker conectará um listener para cada guia ou janela; quando a guia URL muda, a extensão compara a URL com a lista de domínios bloqueados. Se a URL corresponder a um domínio bloqueado, a solicitação será redirecionada para uma página de extensão (consulte figura 1).

Figura 1. A extensão do Gawkblocker
A extensão do Gawkblocker

O Gawkblocker chega ao navegador de formas específicas para fazer algumas coisas específicas que você fará em outras extensões. Você deseja responder a estes perguntas:

  • É difícil obter uma presença em algum lugar na IU do navegador?
  • O que está envolvido na persistência de dados entre as sessões do navegador?
  • Como as diferentes partes da extensão se comunicam entre elas?
  • Até que nível é possível entrar nos dados do usuário?

O processo de desenvolvimento do Gawkblocker deve responder a estas perguntas.


Qual é seu documento de referência?

Seu documento de referência são os documentos da Extensão Chrome (consulte Recursos). Na maioria, a documentação de composição de extensões do Chrome é bastante completa. Um tutorial de uma página simples sobre como desenvolver uma expressão do "Hello World" fornecerá uma visão geral super simples de como as extensões são reunidas, mas não servirá muito para uma visão mais detalhada sobre o assunto.


Anatomia de uma extensão do Chrome

Uma típica extensão do Chrome consiste em um arquivo de manifesto e alguma combinação de uma página de fundo, páginas da IU e scripts de conteúdo.

Tudo começa com um arquivo de manifesto chamado manifest.json. Esse arquivo contém as informações que o Chrome precisa saber sobre como carregar sua extensão—coisas como título, descrição, permissões necessárias e referências de ícone.

Uma página de fundo é uma única página ativada e executada dentro de seu próprio contexto, independentemente de quantas guias ou janelas estejam abertas. Uma extensão pode ter apenas uma página de fundo. Elas são úteis para extensões em que você deseja ter uma execução de processo que persiste entre todas as páginas no Chrome.

Páginas da IU referem-se a qualquer página que a extensão apresenta ao usuário. Uma página da IU pode ser uma página pop-up, uma página de opções, uma página que faz parte da extensão ou uma página que substitui uma página padrão do Chrome (como a páginanova guia ).

Scripts de conteúdo são arquivos Javascript que você injeta em páginas da web para interagir com eles. Scripts de conteúdo são executados em eu próprio contexto isolado, mas podem acessar o DOM da página. Scripts de conteúdo também podem se comunicar com outras páginas em sua extensão usando uma API de transmissão de mensagem especial.

Para o Gawkblocker, você usará um arquivo de manifesto, um arquivo JavaScript que contém alguma funcionalidade principal (algo que você tornará portátil), uma página de fundo, uma opção de opções, um pop-up, uma página de entrada de redireção e um ícone ou dois. É possível fazer o download de uma extensão do Gawkblocker a partir do Chrome Web Store se desejar ver a extensão em ação à medida que as diversas partes forem descritas.


Manifesto do Gawkblocker

Listagem 1 é uma cópia do arquivo manifest.json para o Gawkblocker.

Listagem 1. O arquivo manifest.json para o Gawkblocker.
{
  "name": "GawkBlocker",
  "version": "1.7",
  "description": "Tired of taking the Nerd Bait? Use GawkBlocker!",
  "background_page" : "background.html",
  "options_page": "options.html",
  "icons": {
    "16" : "images/GB-19.png",
    "48" : "images/GB-48.png",
    "128" : "images/GB-128.png"
  },
  "browser_action": {
    "default_icon": "images/GB-19.png",
    "default_title": "GawkBlocker",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs"]
}

Veja algumas dessas entradas em detalhes.

version
Ao fazer upload de uma nova versão de sua extensão para o Chrome Web Store, será necessário incrementar seu número da versão, caso contrário o upload falhará.
ícones
A propriedade ícones contém uma lista de ícones disponíveis, de acordo com os tamanhos. O Chrome procura tamanhos específicos de ícones para usá-los em diferentes contextos. Listagem 1 especifica caminhos para arquivos de ícones que são relativos à extensão.
browser_action
Ao especificar uma browser_action, você informa ao Chrome que deseja um ícone à direita da barra de URLs (o Chrome chama a URL de Omnibar), e clicar no ícone fará alguma coisa. Nesse caso, clicar em um botão de ação do navegador abre um pop-up.
Apenas especifique um browser_action quando sua extensão for aplicável a qualquer página da web. Se deseja uma alternativa que só se aplique a páginas ou tipos de páginas específicos, então especifique uma page_action. Não é possível especificar uma page_action e uma browser_action—é uma ou a outra.
permissões
Nesse caso, a única permissão necessária a solicitar é 'guias'—essa permissão dará alguma informações sobre guias individuais (todo o realmente necessário é a URL). Mais permissões estão disponíveis, mas você só deve solicitar as permissões necessárias. Tanto o Chrome quanto o Android tratam as permissões de formas muito semelhantes—quando o usuário instalar sua extensão, o Chrome mostrará explicitamente as permissões que a extensão está solicitando, de forma muito semelhante a como é solicitada uma lista de permissões ao instalar um aplicativo Android.

Agora que você passou pelo manifesto, vamos entrar nos arquivos que fornecem funcionalidade ao Gawkblocker.


A classe principal do Gawkblocker

A maior parte do que o Gawkblocker faz será controlada por um único arquivo Javascript principal. No arquivo, você define um objeto do gerenciador de armazenamento (SM, Storage Manager) para lidar com a persistência de dados entre as sessões (nesse momento, é apenas um wrapper para localStorage) e um objeto do Gawkblocker (GB) que lida com alguma funcionalidade comum (gerenciamento da lista de sites bloqueados e opções). Veja A Listagem 2.

Listagem 2. Definindo um objeto do Gerenciador de Armazenamento e um objeto do Gawkblocker
var SM = (function () {

    var my = {};

    my.get = function (key) {
        return localStorage.getItem(key);
    }

    ...

    return my;

}());

var GB = (function (SM) {
    var my = {};

    my.blockTheseSites = {
        "gawker.com"        : "Gawker Media",
        "io9.com"           : "SciFi Blog",
        "gizmodo.com"       : "Gadget Blog",
        ...
    }

    if (!SM.get("blocklist")) {
        SM.put("blocklist", JSON.stringify(my.blockTheseSites));
    }

    my.getBlockedSites = function () {
        return JSON.parse(SM.get("blocklist"));
    }

    my.setWatchThisInstead = function (value) {
        ...
    }

    my.getWatchThisInstead = function () {
        return SM.get("instead");        
    }

    my.addBlockedSite = function (site) {
        my.blockedSites = JSON.parse(SM.get("blocklist"));
        my.blockedSites[site] = "Custom Add";
        SM.put("blocklist", JSON.stringify(my.blockedSites));
    }

    my.removeBlockedSite = function (site) {
        my.blockedSites = JSON.parse(SM.get("blocklist"));
        delete my.blockedSites[site];
        SM.put("blocklist", JSON.stringify(my.blockedSites));
    }

    return my;
}(SM));

Usei o Módulo Patten aqui para criar dois objetos que devem ser razoavelmente móveis. Agora veja como é usá-los na página de fundo.


A página de fundo

O Gawkblocker usará uma página de fundo para atender às URLs e compará-las com a lista de sites bloqueados. Lembre-se: só é possível ter uma instância da página de fundo, que é compartilhada entre todas as guias e janelas abertas (excluindo janela incógnita, a menos que você solicite essa permissão ou que o usuário a permita explicitamente). Como a página de fundo em si não tem componente visível, não há HTML relacionado à exibição na página em si.

Listagem 3 mostra o código que atende a guias para atualizações.

Listagem 3. Atendendo às guias para atualizações
chrome.tabs.onUpdated.addListener(function(tabId, changedInfo, tab) {
    for (site in GB.getBlockedSites()) {
        if (tab.url.match(site)) {
            chrome.tabs.update(tabId, {"url" : GB.getWatchThisInstead()}, 
function () {});
        }
    }
});

Existem formas mais práticas de percorrer a lista de sites bloqueados, mas isso não é o que você deve ver. Em vez disso, veja como você se conectou ao Chrome usando chrome.tabs.onUpdated.addListener e transmitindo um retorno de chamada.

Cada chamada de API chrome.* varia, mas geralmente segue esse padrão para chamar um método e transmitir um retorno de chamada. A maioria das chamadas de API é assíncrona. Isso pode causar problemas de sincronização se não esperar esse comportamento, portanto leia o que o documento de referência tem a dizer sobre esse assunto.


O pop-up

O Gawkblocker realmente não precisa de um pop-up, mas a inclusão de um fornece um local facilmente acessível para o usuário ver quais sites estão atualmente sendo bloqueados. A Listagem 4 mostra a parte mais interessante desta página.

Listagem 4. Página pop-up
$(document).ready(function(){
    $.each(chrome.extension.getBackgroundPage().GB.getBlockedSites(), 
function (index, value) {
        $("#blockedlist").append("<div class='siterow' title='"+value+"'>
<div class='sitename'>"+index+"</div><span class='sitedesc'> : 
"+value+"</span></div>");
    });
});

A chamada para chrome.extension.getBackgroundPage().GB.getBlockedSites() é como você obtém informações da página de fundo no pop-up. Essa é a única forma de tratar a comunicação entre as páginas dentro de uma extensão, porém não é necessário fazer isso no pop-up. É possível incluir o arquivo gawkblocker.js e chamar o objeto GB diretamente. Mas, se você tiver muita atividade assíncrona, é útil ter as perguntas dos diferentes componentes do mesmo lugar.

O pop-up solicita a página de fundo para uma lista de sites bloqueados. Ele, então itera por meio dessa lista e anexa os detalhes do site bloqueado em uma divisão de exibição no pop-up (consulte A figura 2).

Figura 2. Pop-up
Pop-up

A página de opções

É necessário um lugar para controlar o comportamento da extensão. Se você especificar uma página de opções utilizando o manifesto (como você fez), o usuário poderá facilmente acessar a página desde a página de gerenciamento de extensões ou clicando com o botão direito do mouse no botão de ação do navegador. Páginas de opções são opcionais (consulte A Figura 3).

Figura 3. Página de opções
Página de opções

O Gawkblocker usa a página de opções para permitir que o usuário especifique o comportamento ao visitar um site bloqueado, a fim de incluir novos sites na lista de blocos ou de remover sites da lista de blocos inteiramente (consulte A Listagem 5).

Listagem 5. Página de opções
$("#blockthistoo").click(function () {
    GB.addBlockedSite($("#dontgothere").val());
    ...
});

É possível passar pela página de fundo, assim como fez no pop-up (consulte Listagem 6).

Listagem 6. Página de fundo
$("#blockthistoo").click(function () {
    chrome.extension.getBackgroundPage().GB.addBlockedSite($("#dontgothere").val());
    ...
});

Dependendo de sua extensão, é possível preferir um método e não outro.


A entrada de redireção

Finalmente, quando uma solicitação é redirecionada, ela precisa ir para uma página local. Essa página é a mais simples de todas. Conforme escrito, é simplesmente uma página que integra um vídeo do YouTube ("Hey You!, Don't Watch That!, Watch This!"). Ela não interage com o restante da extensão de nenhuma forma significativa, é apenas o ponto final do processo (veja a Figura 4).

Figura 4. Entrada de redireção
Entrada de redireção

Juntando tudo

Agora que você tem essa excelente extensão, como testá-la? Para começar, carregue os arquivos de extensão sem compactá-los. Isso é chamado de carregamento de uma extensão não compactada e pode ser controlado na página Gerenciamento de Extensões (consulte Recursos) (também é possível clicar com o botão direito do mouse em qualquer extensão instalada e selecione Gerenciar Extensões).

Para carregar extensões descompactadas, selecione a caixa Modo de Desenvolvedor para ativar aCarregar extensão descompactada . Para carregar sua extensão, clique no botão Carregar extensão descompactada e navegue para a pasta que contém a extensão. Se seu arquivo de manifesto tiver um erro, sua extensão pode ser desativada ou simplesmente não carregada. O Chrome informará se esse é o caso.

Quando estiver certo de que sua extensão está pronta para o horário nobre, você tem duas opções diferentes para distribuir sua extensão. É possível enviar os arquivos originais, mas os usuários não poderão instalar a extensão a menos que também vão para a página de gerenciamento de extensões e ativar o modo de desenvolvedor. As outras opções são distribuir uma extensão compactada ou colocar sua extensão no Chrome Web Store.


Distribuindo uma extensão compactada

Na página de gerenciamento de extensões, ao lado do botão Carregar extensão não compactada, há um botão Compactar extensão (consulte a Figura 5). Clique neste botão para iniciar o processo de compactação de sua extensão para distribuição. O Chrome solicitará o diretório da extensão descompactada, e opcionalmente um arquivo de chave privado. Chegarei a esse arquivo de chave privado em alguns instantes.

Figura 5. A página de gerenciamento de extensões
A página de gerenciamento de extensões

Da primeira vez que você compactar a extensão, o Chrome gerará dois arquivos: um arquivo .crx e um arquivo .pem. O arquivo .crx é sua extensão compactada, todo pronto para distribuição. O arquivo .pem é a chave privada mencionada anteriormente. O Chrome informa para você manter esse arquivo seguro, e ele faz isso—se você desejar compactar uma atualização para sua extensão, precisará desse arquivo de chave privado. Sem ele, o Chrome tratará a atualização como uma extensão completamente nova.

Quando você tiver sua extensão compactada, pode distribui-la da forma como desejar—envie-a por email, coloque-a em seu website, compacte-a em seu próprio instalador, transfira-a para unidades flash, o que for melhor para seus planos. A principal desvantagem para você distribui-la sozinho é que você também manipula o processo de atualização.

Para que sua extensão do Chrome verifique se há atualizações, inclua uma linha no arquivo de manifesto que diga onde procurar atualizações (consulte Listagem 7).

Listagem 7. Verificando se há atualizações
{
  "name": "GawkBlocker",
  "version": "1.7",
  "update_url": "http://yourawesomedomain.com/ext/updates.xml",
  ...
}

Então, será necessário hospedar um arquivo XML que segue o formato especificado na seção Atualização automática do documento de referência. Isso não é complicado, mas dá mais trabalho. E também significa que você não terá visibilidade no Chrome Web Store.


Inserindo sua extensão no Chrome Web Store

O processo de inserir uma extensão no Chrome Web Store é menos tecnicamente envolvido do que distribuir a extensão sozinho, mas há algumas coisas que você precisará fazer.

Primeiro, configure como um desenvolvedor na loja da Web. Para isso, é necessária uma conta Google. Depois de efetuar sign in, vá para o Painel do Desenvolvedor e registre-se como um desenvolvedor. Isso custará US$ 5,00, e será necessário pagar para usar o Google Wallet. Se sua conta Google estiver bem estabelecida, é possível ser ativado no Painel do Desenvolvedor imediatamente. Se sua conta for nova ou não for bem usada, pode haver um atraso enquanto é revisada.

Depois de se registrar como um desenvolvedor, volte para o diretório com sua extensão descompactada e compacte todos os arquivos de extensão—apenas os arquivos HTML, CSS, JavaScript e qualquer arquivo de imagem. Não inclua os arquivos .crx ou .pem. O Chrome Web Store criará um arquivo .crx a partir de seu zip e o assinará com um arquivo-chave .pem privado.

Quando sua conta estiver pronta para iniciar e você tiver um arquivo zip, você estará pronto para clicar nesse grande botão azul Incluir novo item no painel para fazer upload de sua extensão (consulte a Figura 6).

Figura 6. Chrome Web Store
Chrome Web Store

Se algo estiver errado com o arquivo zip, o painel exibirá isso com algumas mensagens de erro. Se o zip estiver bem formado e seu manifesto estiver formatado corretamente, você verá uma página que solicita metadados sobre sua extensão (capturas de tela, países, descrição, e assim por diante). Insira as informações apropriadas para a sua extensão, e você poderá enviá-las para a loja com facilidade.


Saiba como funcionam as atualizações

Quando sua extensão estiver na loja, faça algumas mudanças pequenas e faça upload das atualizações para a loja e tenha uma ideia de que como é esse processo. Um engano comum é esquecer de atualizar o número da versão do arquivo de manifesto. Toda vez que carregar uma atualização, é possível clicar no botão Atualizar extensões agora na página Gerenciamento de Extensões para forçar uma atualização. As Extensões Chrome fazem ping das atualizações em intervalos regulares, portanto não demora muito obter atualizações para seus usuários.


Encontrando as respostas

Vamos ver como as respostas para as nossas perguntas são respondidas:

É difícil obter uma presença em algum lugar na IU do navegador? A resposta é muito fácil. Só é necessário especificar uma browser_action no arquivo de manifesto e fornecer um ícone.

O que está envolvido na persistência de dados entre as sessões do navegador? No Chrome, você tem acesso ao localStorage que persiste entre as ativações de aplicativo. Isso faz com que a persistência dos dados entre as sessões do navegador seja muito simples.

Como as diferentes partes da extensão se comunicam entre elas? Todas as páginas podem se comunicar com a página de fundo usando chrome.extension.getBackgroundPage(), e uma API de transmissão de mensagem permite que os componentes de extensão diferentes se comuniquem entre si, se necessário.

Até que nível é possível entrar nos dados do usuário? Até onde o usuário permitir. As permissões têm avisos específicos, embora não possa estar inteiramente claro para o usuário exatamente o que essas permissões implicam.


Conclusão

Tendo escrito uma extensão básica para o Chrome, não demorará muito para que você possa se aprofundar mais agora. É possível acessar muita coisa nas APIs chrome.*, e você só começou a explorar a superfície. Agora que você aprendeu os conceitos básicos, comece pelo início e veja até onde é possível estender seu alcance no Chrome.


Download

DescriçãoNomeTamanho
Article source codeGawkBlocker.zip60KB

Recursos

Aprender

Obter produtos e tecnologias

  • Use o release do Google Chrome no Canal do Desenvolvedor para obter a versão mais recente do Developer Tools.
  • Avalie os produtos IBM da maneira que for melhor para você: faça download da versão de teste de um produto, avalie um produto online, use-o em um ambiente de nuvem ou passe algumas horas na SOA Sandbox para saber mais sobre como implementar arquitetura orientada a serviço (SOA) de maneira eficiente.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=833585
ArticleTitle=Criar Suas Próprias Extensões do Navegador, Parte 1: Estenda Seu Alcance no Chrome
publish-date=09062012