Crie sua primeira aplicação para o Chrome

Esse tutorial irá mostrar como criar sua primeira aplicação para o Chrome. Aplicações Chrome são estruturadas de forma similar à extensões, de forma que desenvolvedores irão reconhecer o arquivo de manisfesto e métodos empacotados. Quando tudo estiver pronto, você precisará produzir um arquivo zip com o seu código e demais arquivos para poder publicar sua aplicação.

Uma aplicação Chrome consiste desses componentes:

  • O arquivo de manifesto informa ao Chrome sobre sua aplicação, o que ela é, como carrega-la e as permissões que ela necessita.
  • script de background é usado para criar a página de eventos responsável por gerenciar o ciclo de vida da aplicação.
  • Todo o código deve ser incluído no pacote da aplicação Chrome. Isso inclui módulos HTML,  JavaScript, CSS e Nativo.
  • Todos os ícones e outros recursos devem ser incluídos no pacote também.

Exemplos da API:
Quer brincar com algum código? Veja esse hello-world exemplo.

Passo 1: Crie o arquivo de manifesto

Em primeiro lugar, crie o seu arquivo manifest.json (Formats: Manifest Files descreve esse arquivo 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" }
}

Importante: Aplicações Chrome devem usar a versão 2 de arquivos de manisfesto.

Passo 2: Crie o script de background

Em seguida crie um 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 código acima, o evento onLauched será disparado quando o usuário inicia a aplicação. Então será aberta uma janela para a aplicação com a altura e largura mencionada. Seu script de background pode conter outros ouvintes, janelas, mensagens e dados de carregamento, todos os quais serão usados pela página de eventos para gerenciar a aplicação.

Passo 3: Crie uma página inicial

Crie seu arquivo window.html:

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

Passo 4: Crie os ícones

Copie esses ícones para a pasta de sua aplicação:

Passo 5: Carregue sua aplicação

Ative as flags

Muitas das APIs para aplicações Chrome ainda são experimentais, assim você precisa ativar as APIs experimentais para poder testa-las:

  • Vá para chrome://flags.
  • Encontre “Experimental Extension APIs”, e clique no link “Enable”.
  • Reincie o Chrome.

Carregue sua aplicação

Para carregar a sua aplicação, abra a página de gerenciamento de aplicações e extensões clicando no ícone de configurações e selecionando Tools > Extensions.

Certifique-se de a caixa de verificação Developer mode esteja marcada.

Clique no botão Load unpacked extension, navegue para a pasta da sua aplicação e clique OK.

Abra uma nova aba e carregue a aplicação

Assim que tiver carregado a sua aplicação, abra a página Nova Aba e clique no ícone de sua aplicação.

Ou, carregue a aplicação a partir da linha de comando

Essas opções de linha de comando do Chrome podem lhe ajudar a interagir com ele:

  • --load-and-launch-app=/path/to/app/ instala a aplicação do caminho fornecido, e abre ela. Se a aplicação já estiver sendo executada, ela é reiniciada com o conteúdo atualizado.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll abre uma aplicação já carregada no Chrome. Esse comando não reinicia nenhuma aplicação em execução, mas abre a nova aplicação com qualquer conteúdo atualizado.

Fonte: developer.chrome.com