Como criar e publicar aplicativos e extensões do Chrome. Aplicativos da Web do Google Chrome, o que são? O que é um aplicativo Chrome

Com a ajuda de vários aplicativos, você pode não apenas expandir significativamente os recursos do navegador, mas também personalizá-lo à sua maneira. Esta é a ideia pela qual o Google é guiado, então ele tenta fazer vários aplicativos do Google cromada para que se ajustem a todos os usuários.

Primeiro, vale a pena responder à pergunta, por que precisamos de aplicativos do Google Chrome?? Os sites modernos têm vários recursos dinâmicos que antes estavam disponíveis apenas para programas instalados em computadores. Mas hoje não é necessário usar todos esses inúmeros programas. Basta instalar o aplicativo, que ocupa muito menos espaço em disco e não deve falhar (como garantem os desenvolvedores).

Mas você deve sempre distinguir entre marcadores e aplicativos verdadeiros.... Existem muitos marcadores de vários sites no momento. Mas eles não são aplicativos verdadeiros. Mas é sobre este último que falamos. O que são aplicativos do Google Chrome e do que eles são capazes?

Alguns dos aplicativos mais úteis do Google Chrome são vários blocos de notas. Então bloco de notas Nota rápida é semelhante ao texto documento da Microsoft Palavra... Apenas para ligar para o último, você deve iniciar especificamente o programa. Mas o notebook já está disponível na seção de aplicativos. Você pode escrever tudo nele sem sair do navegador. Você nem precisa salvar nada! Tudo acontece automaticamente. Este aplicativo do Google Chrome funciona mesmo se sua conexão com a Internet não estiver funcionando.

TweetDeck É um aplicativo muito útil para todos os usuários que frequentemente conversam em várias redes sociais. Com sua ajuda, você sempre pode se manter atualizado com os eventos e todos os diálogos no Twitter, Facebook, LinkedIn, Google Buzz, Foursquare, MySpace.

O Google Talk é mais sobre extensões do que aplicativos... Ainda assim, esse recurso útil também deve ser mencionado. Com o Google Talk, você sempre pode ficar em contato com as pessoas que estão em seus contatos do Google+. É especialmente agradável que a janela de bate-papo permaneça sempre aberta e ativa, mesmo se você alternar de uma guia para outra.

Concorde que os aplicativos do Google Chrome devem ser úteis para todos os usuários. Pensar quantas vezes você teve que executar a calculadora para calcular algum dado? Alternar entre a janela do navegador e a calculadora, que não tem todas as funções de que você às vezes precisa, é cansativo. E as funções que não estão disponíveis em uma calculadora padrão devem ser pesquisadas na Internet. Mas, graças ao aplicativo de calculadora do Google Chrome, tudo isso não é mais necessário. Existem muitos tipos de calculadoras no momento. Eles diferem em funcionalidade e design.

Calculatoure é o melhor aplicativo para todos os usuários que precisam calcular problemas matemáticos complexos. Calculadora Numérica mais fácil de usar e com uma interface muito agradável. Além disso, possui uma função de conversão de valores.

Que outros aplicativos úteis do Google Chrome existem? Entre as inúmeras aplicações, os dicionários devem ser distinguidos... Para que você não precise procurar constantemente a tradução de uma palavra, você pode simplesmente usar boa aplicação... Entre os inúmeros dicionários, você pode escolher o que mais gosta. A escolha é ilimitada. Você pode usar um tradutor En-Ru simples e Yandex.Dictionaries. Ou talvez você esteja interessado na indústria automotiva? E neste caso, existe um aplicativo útil! Tudo relacionado a carros pode ser encontrado no dicionário Carros.

Outros aplicativos úteis do Google Chrome incluem vários relógios e alarmes... Entre os numerosos alarmes e relógios, pode escolher a aplicação que melhor se adequa a si em termos de funcionalidade.

A propósito, os jogos também são aplicativos do Google Chrome. Entre os muitos jogos, deve-se destacar o aplicativo mais popular, que é muito popular entre muitas pessoas ao redor do mundo. Algumas pessoas podem pensar que pássaros irritantes e porcos verdes não são mais tão populares, mas na realidade App Angry Birds considerado um dos melhores de todos os que saíram em 2011. A propósito, graças a este jogo, os desenvolvedores puderam chamar a atenção de todos os usuários para os recursos de jogo da plataforma Google Chrome.

Se você segue tecnologias populares, como blogs ou Techcrunch Download Squad, você deve ter notado postagens teaser sobre aplicativos da web Google Chrome, nova função Cromo quais desenvolvedores Google Chrome vêm sendo desenvolvidos há algum tempo. Plano da empresa Google é fornecer aplicativos da web no nova versão Loja online do Chrome... Existem aplicativos gratuitos e pagos que os usuários cromada pode instalar em um navegador da web.

Aplicativos da web do Chrome listados no gerenciador de extensões do navegador, existem apenas algumas diferenças entre as extensões e Aplicativos da web do Chrome. Aplicativos da web do Chrome instalado por padrão e exibido na guia nova páginaonde podem ser acessados \u200b\u200bfacilmente, desde que instalados no computador.

Aplicativos da web do Google Chrome.

pressione aplicação web e abre à esquerda do TabBar... A guia de ícones parece semelhante a guias fixadas à primeira vista, com a exceção de que são de alta resolução, pois não usam ícones, mas têm ícones locais.

Aplicativos da web do Chrome.
A imagem acima mostra dois aplicativos da web do Chrome e um na guia. Gmail e Google Agenda são aplicativos da web. Clicar neles abre a página da web do serviço no navegador. Sinceramente, não consigo descobrir as diferenças existentes entre os aplicativos da web e a retenção de guias neste ponto, além de ícones de guias melhores e o fato de que os aplicativos da web são listados em novas guias. Acredito que este seja um exemplo do conceito. Por exemplo, os artigos do Techcrunch mostram uma captura de tela de um jogo que provavelmente está sendo executado localmente e não em um site.

Jogos de aplicativos da web do Chrome
Como você pode ver na imagem acima, não há URL no endereçostring, supondo que esteja sendo executado localmente (ou que o URL tenha sido removido da tela).
Como habilitar Chrome Web Apps no Google Chrome Dev.
Aplicativos da web do Chrome pode ser incluído no G oogle Chrome - Chromium... Download Squad contém instruções:
Google Chrome vem com três aplicativos da web para teste. Eles fornecem a funcionalidade do Google Docs, Gmail e Google Agenda.
Os aplicativos estão localizados em C: \\ Usuários \\ nome de usuário \\ AppData \\ Local \\ Google \\ Chrome \\ Application \\ 6.0.453.1 \\ Recursos \\ no Windows. Observe que a versão muda a cada novo lançamento. cromada.
Você precisa adicionar a opção Launch-Enable-Apps no navegador. A maneira mais fácil de fazer isso é criar um atalho, clicar com o botão direito do mouse no atalho e selecionar propriedades. O destino deve ser semelhante a este no final de C: \\ Usuários \\ nome de usuário \\ AppData \\ Local \\ Google \\ Chrome \\ Application \\ chrome.exe ativar aplicativos
Agora abra o menu de extensões clicando no ícone de chave inglesa na barra de ferramentas cromada, lá você verá ferramentas e extensões.
Selecione extensões de descompactação e navegue até a pasta de recursos. Cada aplicativo da web do Chrome deve ser instalado separadamente.
Aplicativos da web aparecem imediatamente na página Nova guia, onde podem ser iniciados. O que você acha disso? Deixe-me saber nos comentários.

Os usuários que usam o Google Chrome como navegador padrão provavelmente têm uma ideia da loja de aplicativos. Quem já trabalhou com eles sabe que os aplicativos são apenas links para as páginas da Internet dos serviços online correspondentes. Eles estão localizados em um painel de navegador separado no endereço: "chrome: // apps" (veja a captura de tela para um exemplo).
Google Chrome Apps

Recentemente, a empresa lançou aplicativos de desktop do Chrome desenvolvidos em idiomas programação JavaScript e HTML5. Eles são executados em processos separados do navegador e não exigem uma conexão de rede, embora usem o mecanismo Chrome para seu trabalho.

Novos aplicativos do Google Chrome

O aplicativo do navegador Chrome é um programa autônomo escrito em linguagens de programação (em ordem de popularidade):

  1. JavaScript - usado para escrever scripts para navegadores;
  2. HTML é uma linguagem de marcação de hipertexto para páginas da web;
  3. Cliente nativo - permite que você execute aplicativos em navegadores diferentes, independentemente do sistema operacional;
  4. Emscripten é um compilador C ++ que produz código JavaScript como saída.

Outros mecanismos de desenvolvimento de aplicativos da Web menos populares às vezes são usados, mas sem o uso da tecnologia Flash da Adobe. Ao final da compilação, o código-fonte do programa é compactado, após o qual ele passa a funcionar de forma autônoma sem a Internet, a Application Store oferece a instalação do Google Keep em um PC, editores gráficos Sketchpad ou Pixlr, um caderno Writer ou o jogo doméstico Cut the Rope, e executá-los como programas clássicos através do launcher formulários. A propósito, não está em posse do Windows e também funciona no Linux e no MacOS.

Chrome - plataforma para lançamento de aplicativos

Observe que ao usar aplicativos, a loja online google chrome instalará um painel para iniciar programas em modo automático, sem perguntar ou notificar o usuário sobre a ação.

Fig 1. Painel com aplicativos

Após a conclusão da instalação, um atalho é criado na barra de tarefas que inicia o iniciador, que exibe uma lista de aplicativos para Chrome usados \u200b\u200bno computador. Por meio dele, os programas são iniciados ou desinstalados sem a necessidade do funcionamento de um navegador de Internet. Os aplicativos antigos que devem ser substituídos por outros atualizados são indicados por uma seta como atalhos (na verdade, eles são - eles levam aos sites correspondentes).

O iniciador do aplicativo Chrome sincroniza favoritos, histórico de navegação, senhas salvas, etc. Se você excluir acidentalmente o aplicativo de configurações do Google Chrome, acesse https://chrome.google.com/webstore/launcher e faça o download dele.

Aplicativos de amostra do Chrome para desktop

A loja do google chrome contém muitos programas para PCs, incluindo gráficos multifuncionais e editores de texto, conversores de unidades, utilitários de notas, muitos jogos, clientes para redes sociais e outros serviços. Os programas do Google Chrome são completos e substituirão facilmente seus aplicativos diários, especialmente porque funcionam offline. O uso de programas do Google tem várias vantagens:

  • o acesso aos serviços é sempre possível:
  • sincronização com o navegador em todos os dispositivos após a autorização;
  • não causa erros críticos no Windows.

TechSmith Snagit

Fig 2. Editor gráfico TechSmith Snagit

Como resultado, obtemos um editor gráfico que não é capaz de criar capturas de tela de forma independente e funcionar sem a Internet (para o plug-in que faz capturas de tela funcionar, você precisa de uma conexão de rede).

Bolso

Tendo entrado na loja do Google, muitos prestaram atenção a um aplicativo para Google Chrome chamado Pocket - um cliente do serviço de mesmo nome. Ele foi projetado para armazenar artigos de interesse do usuário, que ele planeja ler mais tarde. O programa exibe uma lista de artigos salvos na forma de miniaturas e permite que você pesquise as publicações necessárias por seus títulos. Durante o processo de salvamento, as páginas da Internet ficam sem anúncios.
Além disso, o Pocket permite que você salve publicações no arquivo ou compartilhe com os mais interessantes deles com amigos em redes sociais ou envie por email.

Para testar o aplicativo que você está desenvolvendo, você precisará adicioná-lo ao seu navegador. Para fazer isso, marque a caixa de seleção "Modo de desenvolvedor" na página chrome: // extensions. Depois disso, será possível adicionar seu ramal ou aplicativo.

manifest.json

O código para qualquer aplicativo do Chrome, como qualquer extensão, começa com o arquivo manifest.json. Ele descreve todas as meta informações para o aplicativo. Aqui está todo o manifesto do editor:

("nome": "Texto simples", "descrição": "Um editor de texto extremamente simples (aplicativo de amostra do Chrome)", "versão": "0.1", "ícones": ("48": "icon / 48.png "," 128 ":" icon / 128.png ")," manifest_version ": 2," minimum_chrome_version ":" 31.0 "," offline_enabled ": true," app ": (" background ": (" scripts ": [ "js / background.js"])), "permissions": [("fileSystem": ["write"])], "file_handlers": ("text": ("title": "Simple Text", "types ": [" application / javascript "," application / json "," application / xml "," text / * "]," extensions ": [" c "," cc "," cpp "," css "," h "," hs "," html "," js "," json "," md "," py "," têxtil "," txt "," xml "," yaml "])))

Vamos analisar os campos que encontramos aqui. Tudo fica claro com o nome e a descrição. Versão é um campo obrigatório - a Chrome Web Store exigirá que ela seja alterada quando você baixar uma atualização para seu aplicativo.

Var entryToLoad \u003d null; function init (launchData) (var fileEntry \u003d null if (launchData && launchData ["items"] && launchData ["items"]. length\u003e 0) (entryToLoad \u003d launchData ["items"] ["entry"]) var options \u003d (frame: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700); chrome.app.window.create ("index.html", options);) chrome.app.runtime.onLaunched. addListener (init);

A página de plano de fundo é executada em segundo plano, independentemente das janelas do aplicativo. Na maioria das vezes, ele não é carregado na memória. Quando o sistema é inicializado, seu código é executado e pode instalar manipuladores de eventos, o mais comum dos quais é onLaunched. Quando os manipuladores são definidos, a página de plano de fundo normalmente é descarregada da memória e disparada de volta apenas se um dos eventos aos quais ela se inscreve ocorreu.

Quando o usuário clica no ícone do aplicativo ou abre um arquivo nele, o evento onLaunched é disparado na página de fundo. Parâmetros de chamada são passados \u200b\u200bpara ele, em particular, o (s) arquivo (s) que o aplicativo deve abrir. O código entryToLoad \u003d launchData ["items"] ["entry"] salva o arquivo transferido para o aplicativo em uma variável local, de onde o código do editor o levará. O evento onLaunched também pode ocorrer quando o aplicativo já está aberto. Nesse caso, o código na página de fundo pode decidir por si mesmo se deve abrir uma nova janela ou realizar alguma ação em uma janela já aberta.

Para completar, aqui está o CSS:

Body (margin: 0;) header (background-color: #CCC; border-bottom: 1px solid # 777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: esquerda; exibir: -webkit-box; altura: 48px; preenchimento: 0px 12px 0px 12px;) botão (margem: 8px;) textarea (border: none; -webkit-box-sizing: border-box; font-family: monoespaço ; preenchimento: 4px; posição: absoluto; superior: 48px; inferior: 0px; esquerda: 0px; direita: 0px; largura: 100%;) textarea: foco (contorno: nenhum! importante;)

Código principal: trabalhando com arquivos

Como em nosso exemplo iremos nos restringir ao conjunto mínimo de recursos para simplificar, o código do editor principal será dedicado quase exclusivamente ao trabalho com arquivos. Para isso, são utilizadas várias APIs, algumas das quais já estão a caminho da padronização do W3C. A API de arquivo e interfaces relacionadas é um grande tópico que merece um artigo separado. Eu o recomendo como uma boa introdução.

Então, vamos analisar o código em js / main.js. Vou citar em fragmentos, o código completo está no GitHub.

Função init (entry) ($ ("# open"). Clique em (abrir); $ ("# save"). Clique em (salvar); $ ("# saveas"). Clique em (saveAs); chrome.runtime.getBackgroundPage (função (bg) (if (bg.entryToLoad) loadEntry (bg.entryToLoad);));) $ (documento) .ready (init);

A tarefa da função de inicialização é adicionar manipuladores aos botões e abrir o arquivo da página de fundo. O contexto da página de fundo é recuperado da janela principal de forma assíncrona usando chrome.runtime.getBackgroundPage.

Manipuladores de clique de botão:

Var currentEntry \u003d null; function open () (chrome.fileSystem.chooseEntry (("type": "openWritableFile"), loadEntry);) function save () (if (currentEntry) (saveToEntry (currentEntry);) else (saveAs ();)) função saveAs () (chrome.fileSystem.chooseEntry (("type": "saveFile"), saveToEntry);)

Armazenaremos o FileEntry atual na variável global currentEntry.

O único recurso específico no código acima é o método chrome.fileSystem.chooseEntry. Usando este método, uma janela de seleção de arquivo é aberta (sua própria em cada sistema). Como todas as outras funções para trabalhar com o sistema de arquivos, esse método é assíncrono e recebe um retorno de chamada para continuar trabalhando (em nosso caso, as funções loadEntry e saveToEntry, descritas a seguir).

Lendo um arquivo:

Função setTitle () (chrome.fileSystem.getDisplayPath (currentEntry, function (path) (document.title \u003d path + "- Texto simples";));) function loadEntry (entry) (currentEntry \u003d entry; setTitle (); entrada. file (readFile);) function readFile (file) (var reader \u003d new FileReader (); reader.onloadend \u003d function (e) ($ ("textarea"). val (this.result);); reader.readAsText (file );)

Na função setTitle (), mudamos o título da janela para mostrar o caminho para o arquivo atual. A forma como este título é exibido depende do sistema. No Chrome OS, ele não aparece. chrome.fileSystem.getDisplayPath é a maneira mais correta de obter um caminho de arquivo adequado para mostrá-lo ao usuário. Outra representação do caminho está disponível por meio de entry.fullPath.

A API File possui dois objetos diferentes que descrevem um arquivo: FileEntry e File. A grosso modo, FileEntry representa o caminho para o arquivo e File representa os dados que ele contém. Portanto, para ler o arquivo, você precisa obter o objeto Arquivo por Entrada. Isso é feito usando o método entry.file () assíncrono.

O código para este exemplo foi feito o mais curto possível para caber no formato de um artigo. Se você quiser ver exemplos mais detalhados de como certos recursos da API do Chrome são usados, um grande conjunto de exemplos de aplicativos do Chrome está publicado no GitHub. A documentação oficial de todas as APIs está em developer.chrome.com. O principal lugar onde você pode obter respostas a perguntas específicas sobre a programação de aplicativos do Chrome é.