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:
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:
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.
- Acesse chrome://extensions na omnibox do Chrome.
- Marque a caixa de seleção Modo de desenvolvedor.
- Clique em Carregar extensão descompactada.
- 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.
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:
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).
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:
Mais informações
Para informações mais detalhadas sobre algumas das APIs introduzidas nesta etapa, consulte:
- Formato do arquivo do manifesto ↑
- Manifesto - Ícones ↑
- Ciclo de vida do app do Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Tudo pronto para passar à próxima etapa? Vá para a Etapa 2: importar um app da Web existente »