Como criar uma extensão de Chrome de seu site web

Amit Agarwal de Labnol.org publicou um excelente guia para criar uma extensão de Chrome e uma Chrome Web App básica (um logo e um link, muito mais útil que quando os usuarios agregam a página aos Favoritos em seu navegador) em aproximadamente 5 minutos. A chave: modelos cujas simples linhas podem ser editadas até com o bloco de notas do Windows. Claro, como a ideia é deixá-las à disposição de todo o mundo na Chrome Web Store, é preciso pagar uma única e pequena taxa de registro de 5 dólares.

Para criar uma Chrome Web App

1) Baixar a pasta comprimida com o modelo do template da Chrome Web App. Dentro dela há um arquivo chamado manifest.json, é só abrir com o Bloco de notas o editor que preferir (clique direito >> Abrir com…) e altere as linhas indicadas com seus respectivos dados: nome de seu site web, uma curta descrição e sua URL duas vezes. Salvar as mudanças.

Na pasta também há uma imagem em formato PNG chamada icon.png, trocá-las por um logotipo próprio de 128×128 px, porém, tendo cuidado de não trocar o nome. Verifique que foram baixados os ambos arquivos na pasta comprimida que deverá subir mais tarde.

2) Entrar no painel de programadores de Chrome e carregue sua pasta comprimida (botão Escolher um arquivopara selecionar >> botão Subir), pasta que não é nada mais que seu Chrome Web App.

3) Na nova página que aberta teremos que adicionar detalhes importantes da Chrome Web App como uma descrição longa de até 16000 caracteres, seu ícone (de 128×128 px), capturas de tela (1280×800 ou 640×400 px), categoria, preço, idioma e até o código de usuário de Google Analytics. Junto a cada item irá aparecendo a devida explicação para lhe completar.

Para publicá-la na Chrome Web Store:

4) No final estão os botões de publicação: Descartar draft, Salvar draft, Obter preview das mudanças e Publicar mudanças. Ao clicar na última opção e logo que pagar os US$ 5 pelo registro na web de programadores (só é feita uma vez, logo não haverá limite no número de criações de extensões e/ou apps) será publicada na Chrome Web Store a webapp resultante.

Opcionalmente ao final e acima dos botões de publicação, em Opções de Visibilidade, pode definir um público específico para testar a webapp; na página inicial do Painel de programadores pode ser definido uma lista de emails de “verificadores de confiança” se essa for a opção que preferir, por exemplo.

Para criar uma extensão para Chrome

Esta extensão tomará o feed RSS da página web de tal maneira que ao clicar o botão correspondente dentro da barra de extensões de Google Chrome, apareça uma lista de links às mais recentes entradas publicadas.

Sua criação é bastante similar à de Chrome Web App: não é mais que baixar uma pasta comprimida que a modo de tela minimizará o processo de criação a ir substituindo as linhas por valores próprios (nome, descrição, URL, etc.) mediante Bloco de notas. Para evitar problemas com as referências de arquivos, isto é, que os arquivos em seu código “se chamam entre eles” para trabalhar conjuntamente, não é recomendável mudar os nomes pré-determinados a menos que se disponha de tempo para substituir uma a uma, e são dezenas. Só é preciso mudar as principais:

icon.png: Substituí-lo por sua logo em formato PNG e com um tamanho de 128×128 px.

labnol.css: Nesta hoja de estilos poderá definir o tipo de fonte, cores, bordes, tamanhos, etc. A combinação pré-determinada é preto e branco, com um tom de azul para os links.

labnol.html: Aqui é preciso mudar a URL de Labnol (http://www.labnol.org/) pela URL própria em duas ocasiões. Também o texto que aparecerá dentro da caixa de busca “Find something…” pode ser trocado por qualquer coisa). Quase no final há uma terceira referência a uma imagem em PNG armazenada em Labnol a qual é o logo de 264×39 px que aparece na parte abaixo do globo emergente da extensão e que se pode mudar por um próprio de similares características, linkando à URL do novo logo.

labnol.js: O ponto mais importante pois será preciso indicar a URL do feed RSS do blog, provavelmente a de seu site web seja http://tusitioweb.com/feed ou http://feeds.feedburner.com/elnombredetusitio, em vez da pré-determinada (a de Labnol). Nos parênteses de feed.setNumEntries(10) pode mudar o número 10 pelo número de links que queira que sejam mostrados no globo emergente.

manifest.json: De forma parecida com Chrome Web App, será o espaço onde será incluído o nome à descrição porém, já não de seu site web como também de sua extensão, por exemplo, “Notícias de tusitioweb.com” e “Seguem as atualizações de tusitioweb.com em seu navegador com um clic”.

Depois de atualizado todos os arquivos dentro da pasta comprimida, restará que volte ao painel de programadores de Chrome e faça a upload. Na página que aparece terá que executar os passos 2 ao 5 do guia da Chrome Web App. Isso é tudo, em minutos deverá aparecer já sua extensão na Chrome Web Store.

Para mais ajuda pode consultar a entrada original em Labnol onde ao final se compartilham vários links e até um vídeo (em inglês) onde é mostrado esse simples processo de edição.