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.
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.