Primeiros passos para o desenvolvimento de um plugin para o Chrome (Hello, World!) – Kleber's Blog
Anuncio Google	Primeiros passos para o desenvolvimento de um plugin para o Chrome (Hello, World!)	Esse tutorial vai lhe guiar na criação de uma extensão simples para o Chrome. Você irá adicionar um ícone ao Google Chrome que, ao ser clicado, exibe uma página gerada automaticamente.
O ícone e a página irão se parecer com isso:
Você pode desenvolver extensões usando qualquer versão do Google Ghrome, no Windows, Mac ou Linux. As extensões que você desenvolver em uma plataforma devem rodar sem alterações em todas as plataformas suportadas pelo Chrome.
Criando e carregando uma extensão
A extensão que iremos acompanhar a criação aqui será uma Browser Action, que adiciona um botão a barra de ferramentas do Chrome cujo comportamento você poderá controlar.
Crie uma pasta em algum lugar de seu computador para guardas o código de sua extensão.
Dentre dessa pasta, crie um arquivo de texto chamado manifest.json, e cole nele o seguinte código:
Copie o ícone abaixo para a mesma pasta:
Carregue a extensão.
Abra a página de gerenciamento de extensões clicando no botão e escolhendo Tools > Extensions.
Se Developer mode tiver um sinal de mais próximo a ele, clique no sinal de mais para adicionar a informação do desenvolvedor a página. O sinal de mais vira um sinal de menos e mais botões e informações aparecem.
Clique no botão Load unpacked extension. Uma caixa de dialogo aparece.
Nessa caixa de dialogo, navegue até a pasta de sua extensão e clique em OK.
Se a extensão for válida. seu ícone irá aparecer próximo a barra de endereço, e informações sobre a extensão irão aparecer na página de extensões, como segue na tela abaixo.
Adicione código à extensão
Nesse passo, você fará com que a sua extensão faça algo além de exibir um ícone na barra de ferramentas.
Edite o arquivo manifest.json para adicionar a seguinte linha:
Dentro da pasta da extensão, crie dois arquivos de texto chamados popup.html e popup.js. Adicione o seguinte código a esses arquivos:
Retorne a página de gerenciamento de extensão, e clique no botão Reload para carregar a nova versão da extensão.
Clique no ícone da extensão. Um popup deve aparecer e exibir o conteúdo do arquivo popup.html.
Deve se parecer com algo como isso:
Se você não conseguir ver o popup, tente executar as instruções novamente, seguindo elas exatamente. Não tente carregar um arquivo HTML que não esteja na pasta da extensão – isso não funciona!
Aqui vão algumas sugestões para continuar se aprofundando no assunto:
O artigo Overview, que tem informações práticas e conceituais importantes
O artigo debugging tutorial, que inicia de onde esse artigo termina
A página de hospedagem (hosting), que fala as opções de como distribuir a sua extensão.
Publicado em 6 de julho de 201213 de junho de 2017Autor Kleber MotaCategorias ChromeTags chrome, extensão, JSON, plugin, tutorial	Navegação de Post
Anterior Post anterior: Primeiros passos no uso do SDK do AWS com o JavaSeguinte Próximo post: Especificação do protocolo BitTorrent