Criar seu primeiro app

Este tutorial ajuda você a criar seu primeiro Aplicativo do Google Chrome. Os aplicativos do Google Chrome são estruturados de forma semelhante às extensões, para que os desenvolvedores atuais reconheçam o manifesto e os métodos de empacotamento. Quando você estiver Pronto, você só precisa produzir um arquivo ZIP com seu código e seus recursos para publicar seus app.

Um aplicativo do Google Chrome contém estes componentes:

  • O manifesto informa ao Chrome sobre seu app, o que ele é, como iniciá-lo e os recursos as permissões exigidas.
  • O script de plano de fundo é usado para criar a página de eventos responsável por gerenciar a vida útil do app. ciclo.
  • Todo o código deve ser incluído no pacote de aplicativos do Google Chrome. Isso inclui HTML, JS, CSS e Cliente nativo módulos.
  • Todos os ícones e outros recursos também devem ser incluídos no pacote.
.

Etapa 1: criar o manifesto

Primeiro, crie o arquivo manifest.json (Formatos: arquivos de manifesto descreve esse manifesto em detalhe):

{
  "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 plano de fundo

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 é disparado quando o usuário inicia o app. Ela e, em seguida, abre imediatamente uma janela para o app com a largura e a altura especificadas. Seu histórico pode conter listeners, janelas, mensagens de postagem e dados de inicialização adicionais, todos sendo usada pela página do evento para gerenciar o aplicativo.

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: lançar seu app

Ativar sinalizações

Muitas das APIs de aplicativos do Google Chrome ainda são experimentais, portanto, você deve ativar APIs experimentais para que você pode testá-las:

  • Acesse chrome://flags.
  • Encontre "APIs de extensão experimental" e clique em "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 escolha 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 aplicativo e clique em OK.

Abrir uma nova guia e iniciar

Após carregar o aplicativo, abra uma 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 a partir do caminho especificado. o abre. 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 reiniciar qualquer aplicativo em execução anteriormente, mas ele iniciará o novo aplicativo com qualquer conteúdo atualizado.