Como criar uma extensão para o Chrome? Nós mostramos…
A grande maioria dos nossos leitores usa como browser o popular Chrome. Certamente que alguns têm também instaladas várias extensões que usam para as mais diversas tarefas. Mas já se questionou como se cria uma extensão para o Chrome? Hoje deixamos umas dicas.
A Google disponibiliza um conjunto de informação para quem pretender desenvolver extensões para o seu browser. Essa informação pode ser consultada aqui, mas nem sempre é fácil começar. Para tal, o Pplware deixa um pequeno guia, baseado neste, onde ensinamos a criar uma simples extensão.
Como criar uma extensão básica?
Para este tutorial vamos criar um simples botão que apresenta o texto "Hello Pplware". Para tal vamos ter um ficheiro com a imagem do ícone (icon.png), o ficheiro manifest.json (que define toda a extensão do Chrome) e o ficheiro HTML ("popup.html") que irá apresentar a mensagem que pretendemos.
manifest.json
Como referido, o ficheiro manifest.json possui a informação sobre a extensão, como por exemplo o nome da extensão, versão, ficheiros a carregar, etc.
- name: Nome da Extensão
- version: versão da extensão
- description: pequena descrição da extensão
- browser_action: carrega o ícone da extensão através do parâmetro default_icon e também o popup criado que está no ficheiro popup.html
- permissions: Para esta extensão vamos definir as permissões para activeTaB - pode ver aqui outras permissões
popup.html
O ficheiro popup.html possui um simples código em html que irá mostrar a frase "Hello Pplware".
Como carregar a extensão no Chrome?
Depois de preparado o código anterior, no ficheiro popup.html e manifest.json, juntem também, numa única pasta o ícone icon.png.
De seguida devem ir à barra de endereços e escrevam chrome://extensions e ativem o modo programador tal como mostra a figura.
Em seguida carreguem em Carregar extensão expandida e indiquem onde está o diretório que contém a vossa extensão.
Se tudo estiver OK, a extensão deve ser carregada tal como mostra a figura:
Junto às outras extensões deverá ser apresentada a extensão que criarem. Experimentem carregar no botão para ver se o texto que definimos é apresentado.
Se tinha curiosidade em saber como criar uma extensão para o Chrome, então aqui ficam os primeiros passos. A partir de agora, quem tiver interesse em desenvolver algo, comece por explorar a documentação da Google disponibilizada aqui. Alguma dúvida ou questão deixem nos comentários.
Este artigo tem mais de um ano
acho que deviam fazer alguma referência a isto
https://hacks.mozilla.org/2015/09/lets_write_a_webextension/
Obrigado pela dica. Entretanto uma pequena correcção – no título têm “nós mostrámos” quando deveria estar “nós mostramos” (presente do indicativo)
Eu é que te dava um presente do indicativo se pudesse…Grammar Nazis everywhere
Caro “homónimo”, apesar do seu comentário ter tido piada, o Nuno não deixa de ter razão :p
E eu gostaria de te ver a fazer isso – sempre a coragem por detrás do teclado.
Eu estou num site que pretende ser (e é) de informação, pelo que acho que posso ler as coisas bem escritas, e contribuir para que sejam corrigidas quando o não estão. A qualidade dos comentários, por exemplo, não seria algo que eu comentasse. Obrigado pela tua disposição simpática e atitude educativa.
Gostaria de ver um artigo semelhante mas para o Firefox 🙂
Olá, tenho um dúvida. É possível obter alguma renda com a criação de extensões?
E como exportar pra eu passar pra outras pessoas?