Como criar uma extensão para o Chrome?

A grande maioria dos internautas 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 sabe como se cria uma extensão para o Chrome?

Como criar uma extensão básica?

Para este tutorial vamos criar um simples botão que apresenta o texto “Hello”. 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

O ficheiro popup.html possui um simples código em html que irá mostrar a frase “Hello ”.

Como carregar a extensão no Chrome?

Depois de preparado o código anterior, no ficheiro popup.html e manifest.json, junte também, numa única pasta o ícone icon.png.

De seguida, deve ir à barra de endereços e escrever chrome://extensions. Ative o modo programador tal como mostra a figura.

Em seguida escolha a opção “Carregar extensão expandida” e indique onde está o diretório que contém a sua 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 criou.

Leave a comment