Etapa 1: criar e executar um app do Chrome

Nesta etapa, você vai aprender:

  • Os elementos básicos de um app do Chrome, incluindo o arquivo de manifesto e scripts de segundo plano.
  • Como instalar, executar e depurar um app do Chrome.

Tempo estimado para concluir esta etapa: 10 minutos.
Para conferir o que você vai concluir nesta etapa, vá até o final desta página ↓.

Conheça os apps do Chrome

Um app do Chrome contém estes componentes:

  • O manifesto especifica as metainformações do seu app. O manifesto informa ao Chrome sobre seu app, como iniciá-lo e todas as permissões extras necessárias.
  • A página do evento, também chamada de script em segundo plano, é responsável por gerenciar o ciclo de vida do app. O script em segundo plano é onde você registra listeners para eventos específicos do app, como a inicialização e o fechamento da janela.
  • Todos os arquivos de código precisam ser empacotados no app do Chrome. Isso inclui módulos HTML, CSS, JS e Native Client.
  • Recursos, incluindo ícones de apps, também devem ser empacotados no app do Chrome.

Criar um manifesto

Abra seu editor de código/texto favorito e crie o seguinte arquivo chamado manifest.json:

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

Esse manifesto descreve um script de segundo plano chamado background.js. Você criará esse arquivo a seguir.

"background": {
  "scripts": ["background.js"]
}

Forneceremos um ícone do app mais adiante nesta etapa:

"icons": {
  "128": "icon_128.png"
},

Criar um script de segundo plano

Crie o arquivo a seguir e salve-o como background.js:

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

Esse script em segundo plano simplesmente aguarda o evento de inicialização chrome.app.runtime.onLaunched do aplicativo e executa a função de callback:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Quando o app do Chrome for iniciado, chrome.app.window.create() criará uma nova janela usando uma página HTML básica (index.html) como origem. Você criará a visualização HTML na próxima etapa.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

Os scripts em segundo plano podem conter outros listeners, janelas, mensagens de postagem e dados de inicialização. Todos eles são usados pela página do evento para gerenciar o app.

Criar uma visualização HTML

Crie uma página da Web simples para exibir uma mensagem "Hello World" na tela e salvar como index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Como em qualquer outra página da Web, nesse arquivo HTML é possível incluir outros pacotes de JavaScript, CSS ou recursos.

Adicionar um ícone de app

Clique com o botão direito do mouse e salve esta imagem de 128 x 128 na pasta do projeto como _icon128.png:

Ícone do app do Chrome para este codelab

Você usará esse PNG como o ícone do nosso aplicativo que os usuários verão no menu de inicialização.

Confirmar se você criou todos os arquivos

Agora você tem estes quatro arquivos na pasta do projeto:

Captura de tela da pasta de arquivos

Instalar um aplicativo do Google Chrome no modo de desenvolvedor

Use o modo de desenvolvedor para carregar e iniciar rapidamente seu app sem precisar finalizá-lo como um pacote de distribuição.

  1. Acesse chrome://extensions na omnibox do Chrome.
  2. Marque a caixa de seleção Modo de desenvolvedor.

Ativar o modo de desenvolvedor

  1. Clique em Carregar extensão descompactada.
  2. Usando a caixa de diálogo do seletor de arquivos, navegue até a pasta do projeto do app e selecione-a para carregar o app.

Carregar extensões descompactadas

Inicie o app Hello World concluído.

Depois de carregar o projeto como uma extensão descompactada, clique em Launch ao lado do app instalado. Uma nova janela autônoma será aberta:

O app Hello World finalizado após a Etapa 1

Parabéns, você acabou de criar um novo app do Chrome!

Depurar um app do Chrome com o Chrome DevTools

Use as Ferramentas para Desenvolvedores do Chrome para inspecionar, depurar, auditar e testar seu app da mesma forma que faria em uma página da Web comum.

Depois de fazer alterações no código e recarregar o app (clique com o botão direito do mouse > Recarregar app), verifique se há erros no console do DevTools (clique com o botão direito do mouse > Inspecionar elemento).

Caixa de diálogo &quot;Inspect Element&quot;

Vamos abordar a opção Inspecionar página de segundo plano na Etapa 3 com alarmes.

O console JavaScript do DevTools tem acesso às mesmas APIs disponíveis para seu app. É possível testar facilmente uma chamada de API antes de adicioná-la ao código:

Registro do console do DevTools

Mais informações

Para informações mais detalhadas sobre algumas das APIs introduzidas nesta etapa, consulte:

Tudo pronto para passar à próxima etapa? Vá para a Etapa 2: importar um app da Web existente »