Criar seu primeiro app

Este tutorial mostra como criar seu primeiro app do Chrome. Os apps do Chrome são estruturados de maneira semelhante às extensões para que os desenvolvedores atuais reconheçam os métodos de manifesto e empacotamento. Quando terminar, você só vai precisar produzir um arquivo ZIP com o código e os recursos para publish o app.

Um app do Chrome contém estes componentes:

  • O manifesto informa ao Chrome sobre seu app, o que ele é, como iniciá-lo e as permissões extras necessárias.
  • O script de segundo plano é usado para criar a página de evento responsável por gerenciar o ciclo de vida do app.
  • Todo o código precisa ser incluído no pacote de apps do Chrome. Isso inclui módulos de HTML, JS, CSS e cliente nativo.
  • Todos os ícones e outros recursos também precisam ser incluídos no pacote.

Etapa 1: criar o manifesto

Primeiro, crie o arquivo manifest.json. A opção Formatos: arquivos de manifesto descreve este manifesto em detalhes:

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

Etapa 2: criar o script de segundo plano

Em seguida, crie um novo arquivo chamado background.js com o seguinte conteúdo:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

No exemplo de código acima, o evento onLaunched será disparado quando o usuário iniciar o app. Em seguida, ele abrirá imediatamente uma janela para o app da largura e da altura especificadas. Seu script em segundo plano pode conter outros listeners, janelas, mensagens de postagem e dados de inicialização, todos usados pela página do evento para gerenciar o app.

Etapa 3: criar uma página de janela

Crie seu arquivo window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Etapa 4: criar os ícones

Copie estes ícones para a pasta do seu app:

Etapa 5: iniciar o app

Ativar sinalizações

Muitas das APIs de apps do Google Chrome ainda são experimentais. Por isso, ative-as para testá-las:

  • Acesse chrome://flags.
  • Encontre "APIs de extensão experimentais" e clique no link "Ativar".
  • Reinicie o Chrome.

Carregar seu app

Para carregar o app, abra a página de gerenciamento de apps e extensões clicando no ícone de configurações do Chrome e escolhendo Ferramentas > Extensões.

Verifique se a caixa de seleção Modo de desenvolvedor está marcada.

Clique no botão Carregar extensão descompactada, navegue até a pasta do app e clique em OK.

Abrir nova guia e iniciar

Depois de carregar o aplicativo, abra a página Nova guia e clique no ícone do novo aplicativo.

Ou carregue e inicie pela linha de comando

Estas opções de linha de comando para o Chrome podem ajudar você a iterar:

  • --load-and-launch-app=/path/to/app/ instala o aplicativo descompactado do caminho especificado e o inicia. Se o aplicativo já estiver em execução, ele será recarregado com o conteúdo atualizado.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll inicia um app já carregado no Chrome. Ele não reinicia nenhum app que estava em execução anteriormente, mas inicia o novo app com o conteúdo atualizado.