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.