Visão geral da arquitetura

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

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

Use as extensões como a porta de entrada para tornar o Chrome o navegador mais personalizado.

Arquivos de extensão

As extensões variam em tipos de arquivo e quantidade de diretórios, mas todos eles precisam ter uma extensão [manifest][docs-manifest]. Algumas extensões básicas, mas úteis, podem consistir apenas no manifesto e ao ícone da barra de ferramentas.

O arquivo de manifesto, intitulado manifest.json, fornece ao navegador informações sobre a extensão, como como os arquivos mais importantes e os recursos que a extensão 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 permitem fácil acesso e manter os usuários cientes de quais extensões estão instaladas. A maioria dos usuários interage com uma extensão que usa um popup clicando no ícone.

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

Captura de tela da extensão Verificador de e-mails do Google

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

Uma captura de tela da extensão Mappy

Como fazer referência a arquivos

Os arquivos de uma extensão podem ser referenciados usando um URL relativo, da mesma forma que os arquivos em um arquivo HTML página.

<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, EXTENSION_ID é um identificador exclusivo que o sistema de extensão gerada para cada extensão. Os IDs de todas as extensões carregadas podem ser visualizados acessando o URL chrome://extensions. O PATH_TO_FILE é o local do arquivo no da pasta principal da extensão. ele corresponderá ao URL relativo.

Ao trabalhar em uma extensão descompactada, o ID da extensão pode mudar. Especificamente, o ID de um A extensão descompactada mudará se a extensão for carregada de um diretório diferente. o ID vai mudar novamente quando a extensão for empacotada. Se o código de uma extensão depender de um URL absoluto, ela pode usar o método chrome.runtime.getURL() para evitar fixar o ID durante no desenvolvimento de software.

Arquitetura

A arquitetura de uma extensão dependerá de sua funcionalidade, mas muitas extensões robustas incluir vários componentes:

Script de plano de fundo

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

Elementos da interface

A interface do usuário de uma extensão deve ser intencional e mínima. A interface deve personalizar ou aprimorar a experiência de navegação sem se distrair com ela. A maioria das extensões tem um navegador ação ou ação de página, mas pode conter outras formas de interface, como menus de contexto, uso da omnibox ou criação de uma atalho do teclado.

Páginas de interface de extensão, como um popup, podem conter páginas HTML comuns com JavaScript lógica. As extensões também podem chamar tabs.create ou window.open() para exibir 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 função content para definir regras no script de segundo plano para quando o pop-up for disponíveis 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 com uma ação de página mostrando um pop-up

Scripts de conteúdo

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

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

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

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

Página de 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 escolher qual funcionalidade é relevante para as necessidades dele.

Usar as APIs do Chrome

Além de terem 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 forte integração com o navegador. Extensões e as páginas da Web podem acessar o método window.open() padrão para abrir um URL, mas as extensões podem especificar em qual janela o URL deve ser exibido usando a API do Chrome tabs.create.

Métodos assíncronos e síncronos

A maioria dos métodos da API do Chrome é assíncrona: eles retornam imediatamente sem esperar pela operação para finalizar. Se uma extensão precisar saber o resultado de uma operação assíncrona, poderá passar um para o método. O retorno de chamada é executado mais tarde, possivelmente muito mais tarde, após o é retornado.

Se a extensão precisar navegar da guia atualmente selecionada pelo usuário para um novo URL, ela precisará obter o ID da guia atual e atualizar o endereço dessa guia para o novo URL.

Se o método tabs.query for síncrono, pode parecer algo semelhante ao exemplo abaixo.

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

Essa abordagem falhará porque query() é assíncrono. Ele retorna sem esperar pelo trabalho para concluir e não retorna um valor. Um método é assíncrono quando o parâmetro de callback é disponíveis na assinatura.

// 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 especificado para query() é chamado e executa a linha 2, mas somente depois que as informações sobre o a guia selecionada está disponível. Isso acontece algum tempo após o retorno de query(). Embora update() é assíncrono. O código não usa um parâmetro de callback, já que a extensão não usa esse recurso. 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 uma string e não realiza nenhum outro trabalho assíncrono.

Mais detalhes

Para mais informações, consulte os documentos de referência da API do Google Chrome e assista os vídeos a seguir vídeo.

Comunicação entre páginas

Muitas vezes, componentes diferentes em uma extensão precisam se comunicar uns com os outros. Páginas HTML diferentes podem se encontrar usando os métodos chrome.extension, como getViews() e getBackgroundPage(). Assim que uma página tiver uma referência a outras páginas de extensão, a primeira pode invocar funções em outras páginas e manipular seus DOMs. Além disso, todos os componentes do pode acessar os valores armazenados usando a API storage e se comunicar por meio transmissão de mensagens.

Como salvar dados e o modo de navegação anônima

As extensões podem salvar dados usando a API de armazenamento e o armazenamento na Web do HTML5 API ou fazendo solicitações ao servidor que salvam dados. Quando a extensão precisa salvar algo. Primeiro, considere se ele está em uma janela anônima. Por padrão, as extensões não são executados 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 devem cumprir essa promessa. Se uma extensão normalmente salva a navegação histórico, não salvam o histórico de janelas anônimas. No entanto, as extensões podem armazenar preferências em 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.

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 de Primeiros passos, os desenvolvedores já podem começar a criar as próprias extensões. Mergulhe mais fundo no mundo do com os recursos a seguir.