Visão geral da arquitetura

As extensões são pacotes compactados de HTML, CSS, JavaScript, imagens e outros arquivos usados na plataforma da Web que personalizam a experiência de navegação do Google Chrome. As extensões são criadas usando tecnologia da Web e podem usar as mesmas APIs que o navegador fornece para a Web aberta.

As extensões têm uma ampla variedade de possibilidades funcionais. Eles podem modificar o conteúdo da Web que os usuários veem e interagem ou estender e mudar o comportamento do próprio navegador.

Considere as extensões como a porta de entrada para tornar o navegador Chrome o mais personalizado possível.

Arquivos de extensão

As extensões variam em tipos de arquivos e quantidade de diretórios, mas todas precisam ter um [manifesto][docs-manifest]. Algumas extensões básicas, mas úteis, podem consistir apenas no manifesto e no ícone da barra de ferramentas.

O arquivo de manifesto, chamado manifest.json, informa ao navegador sobre a extensão, como os arquivos mais importantes e os recursos que ela pode usar.

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

As extensões precisam ter um ícone na barra de ferramentas do navegador. Os ícones da barra de ferramentas facilitam o acesso e mantêm os usuários cientes de quais extensões estão instaladas. A maioria dos usuários interage com uma extensão que usa um pop-up clicando no ícone.

Esta extensão Google Mail Checker usa uma ação do navegador:

Captura de tela da extensão Google Mail Checker

Esta extensão Mappy usa uma ação de página e um script de conteúdo:

Captura de tela da extensão Mappy

Como se referir a arquivos

Os arquivos de uma extensão podem ser referenciados usando um URL relativo, assim como os arquivos em uma página HTML comum.

<img src="images/my_image.png">

Além disso, cada arquivo também pode ser acessado usando um URL absoluto.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

No URL absoluto, o EXTENSION_ID é um identificador exclusivo que o sistema de extensão gera para cada extensão. Para conferir os IDs de todas as extensões carregadas, acesse o URL chrome://extensions. O PATH_TO_FILE é o local do arquivo na pasta principal da extensão e corresponde ao URL relativo.

Ao trabalhar em uma extensão descompactada, o ID dela pode mudar. Especificamente, o ID de uma extensão descompactada muda se ela for carregada de um diretório diferente. O ID muda novamente quando a extensão é empacotada. Se o código de uma extensão depender de um URL absoluto, ele poderá usar o método chrome.runtime.getURL() para evitar a codificação do ID durante o desenvolvimento.

Arquitetura

A arquitetura de uma extensão depende da funcionalidade dela, mas muitas extensões robustas incluem vários componentes:

Script em segundo plano

O script em segundo plano é o manipulador de eventos da extensão. Ele contém listeners para eventos do navegador importantes para a extensão. Ele fica inativo até que um evento seja disparado e executa a lógica instruída. Um script em segundo plano eficaz só é carregado quando necessário e descarregado quando fica inativo.

Elementos da interface

A interface do usuário de uma extensão precisa ser objetiva e minimalista. A interface precisa personalizar ou melhorar a experiência de navegação sem distrair dela. A maioria das extensões tem uma ação do navegador ou ação da página, mas pode conter outras formas de interface, como menus de contexto, uso da omnibox ou criação de um atalho de teclado.

As páginas da interface do usuário da extensão, como um pop-up, podem conter páginas HTML comuns com lógica JavaScript. As extensões também podem chamar tabs.create ou window.open() para mostrar arquivos HTML adicionais presentes na extensão.

Uma extensão que usa uma ação de página e um pop-up pode usar a API declarative content para definir regras no script em segundo plano de quando o pop-up está disponível para os usuários. Quando as condições são atendidas, o script em segundo plano se comunica com o pop-up para tornar o ícone clicável para os usuários.

Uma janela do navegador contendo uma ação de página que mostra um pop-up

Scripts de conteúdo

As extensões que leem ou gravam em páginas da Web usam um script de conteúdo. O script de conteúdo contém JavaScript que é executado nos contextos de uma página carregada no navegador. Os scripts de conteúdo leem e modificam o DOM das páginas da Web visitadas pelo navegador.

Uma janela do navegador com uma ação de página e um script de conteúdo

Os scripts de conteúdo podem se comunicar com a extensão principal trocando mensagens e armazenando valores usando a API storage.

Mostra um caminho de comunicação entre o script de conteúdo e a extensão principal.

Página "Opções"

Assim como as extensões permitem que os usuários personalizem o navegador Chrome, a página de opções permite a personalização da extensão. As opções podem ser usadas para ativar recursos e permitir que os usuários escolham qual funcionalidade é relevante para as necessidades deles.

Como usar as APIs do Chrome

Além de ter acesso às mesmas APIs que as páginas da Web, as extensões também podem usar APIs específicas de extensão que criam uma integração estreita com o navegador. As extensões e páginas da Web podem acessar o método padrão window.open() para abrir um URL, mas as extensões podem especificar em qual janela o URL deve ser exibido usando o método tabs.create da API Chrome.

Métodos assíncronos x síncronos

A maioria dos métodos da API Chrome é assíncrona: eles retornam imediatamente sem aguardar a conclusão da operação. Se uma extensão precisar saber o resultado de uma operação assíncrona, ela poderá transmitir uma função de callback para o método. O callback é executado mais tarde, possivelmente muito mais tarde, depois que o método retorna.

Se a extensão precisasse navegar da guia selecionada pelo usuário para um novo URL, ela precisaria receber o ID da guia atual e atualizar o endereço dela para o novo URL.

Se o método tabs.query fosse síncrono, ele poderia ser semelhante ao seguinte.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Essa abordagem vai falhar porque query() é assíncrono. Ele retorna sem esperar a conclusão do trabalho e não retorna um valor. Um método é assíncrono quando o parâmetro de callback está disponível na assinatura dele.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Para consultar corretamente uma guia e atualizar o URL dela, a extensão precisa usar o parâmetro de callback.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

No código acima, as linhas são executadas na seguinte ordem: 1, 4, 2. A função de callback especificada para query() é chamada e executa a linha 2, mas somente depois que as informações sobre a guia selecionada no momento estiverem disponíveis. Isso acontece algum tempo depois que query() retorna. Embora update() seja assíncrono, o código não usa um parâmetro de callback, já que a extensão não faz nada com os resultados da atualização.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Esse método retorna o URL de forma síncrona como um string e não realiza nenhum outro trabalho assíncrono.

Mais detalhes

Para mais informações, consulte a documentação de referência da API Chrome e assista ao vídeo a seguir.

Comunicação entre páginas

Muitas vezes, diferentes componentes em uma extensão precisam se comunicar entre si. Diferentes páginas HTML podem se encontrar usando os métodos chrome.extension, como getViews() e getBackgroundPage(). Quando uma página tem uma referência a outras páginas de extensão, a primeira pode invocar funções nas outras páginas e manipular os DOMs delas. Além disso, todos os componentes da extensão podem acessar valores armazenados usando a API storage e se comunicar por transmissão de mensagens.

Salvar dados e modo de navegação anônima

As extensões podem salvar dados usando a API storage, a API de armazenamento da Web HTML5 ou fazendo solicitações ao servidor que resultam no salvamento de dados. Quando a extensão precisa salvar algo, primeiro considere se é de uma janela anônima. Por padrão, as extensões não são executadas em janelas anônimas.

O modo de navegação anônima promete que a janela não deixará rastros. Ao lidar com dados de janelas anônimas, as extensões precisam honrar essa promessa. Se uma extensão normalmente salva o histórico de navegação, não salve o histórico de janelas anônimas. No entanto, as extensões podem armazenar preferências de configuração de qualquer janela, anônima ou não.

Para detectar se uma janela está no modo de navegação anônima, verifique a propriedade incognito do objeto tabs.Tab ou windows.Window relevante.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Próximos passos

Depois de ler a visão geral e concluir o tutorial Como começar, os desenvolvedores estarão prontos para escrever as próprias extensões. Saiba mais sobre o mundo do Chrome personalizado com os recursos a seguir.