Etapa 1: criar e executar um app do Chrome

Nesta etapa, você vai aprender:

  • Os elementos básicos de um aplicativo do Google 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 visualizar o que você concluirá nesta etapa, vá para a parte inferior desta página ↓.

Familiarize-se com os apps do Chrome

Um aplicativo do Google Chrome contém estes componentes:

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

Observe como esse manifesto descreve um script de segundo plano chamado background.js. Você vai criar a seguir.

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

Forneceremos um ícone do aplicativo mais adiante nesta etapa:

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

Criar um script de plano de fundo

Crie o seguinte arquivo 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 }
  });
});

Este script de segundo plano simplesmente aguarda o evento de inicialização chrome.app.runtime.onLaunched para o 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ásico (index.html) como fonte. 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 de segundo plano podem conter listeners, janelas, mensagens de postagem e dados de inicialização adicionais. Tudo isso usados pela página do evento para gerenciar o app.

Criar uma visualização HTML

Criar uma página da Web simples para exibir uma mensagem "Hello World" a mensagem na tela e salvá-la como index.html:

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

Assim como em qualquer outra página da Web, nesse arquivo HTML é possível incluir um pacote de JavaScript adicional, CSS ou recursos.

Adicionar um ícone do 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 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.

Confirme se você criou todos os seus arquivos

Agora você deve ter estes quatro arquivos na pasta do seu projeto:

Captura de tela da pasta de arquivos

Instalar um app do Chrome no modo de desenvolvedor

Use o modo de desenvolvedor para carregar e iniciar seu app rapidamente sem precisar finalizá-lo como um do 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. Na caixa de diálogo do seletor de arquivos, acesse a pasta do projeto do app e selecione-a para carregar o app.

Carregar extensões descompactadas

Inicie seu app Hello World finalizado

Depois de carregar o projeto como uma extensão descompactada, clique em Iniciar ao lado do app instalado. Um nova janela independente será aberta:

O app Hello World finalizado após a etapa 1.

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

Depurar um app do Chrome com o Chrome DevTools

É possível usar as Ferramentas do desenvolvedor do Google Chrome para inspecionar, depurar, auditar e testar seu aplicativo da mesma forma que você que você faz em uma página da Web comum.

Depois de fazer alterações no código e recarregar o aplicativo (clique com o botão direito do mouse > Recarregar aplicativo), verifique a configuração Console do DevTools para procurar erros (clique com o botão direito do mouse > Inspecionar elemento).

Caixa de diálogo Inspecionar elemento

Abordaremos a opção Inspecionar página de plano de fundo na Etapa 3 com alarmes.

O console JavaScript do DevTools tem acesso às mesmas APIs disponíveis para seu app. É fácil testar 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 para a próxima etapa? Acesse a Etapa 2: importar um app da Web »