Criando extensões para Google Chrome

Google Chrome Atualmente o browser do nosso computador é um dos softwares mais utilizados diariamente, adicionalmente, temos inúmeros plugins que acrescentam funcionalidades extra. Um plugin é um pequeno software desenvolvido para adicionar funcionalidades extra a softwares maiores, como o exemplo dos browsers que utilizamos. Os plugins podem-nos ajudar a automatizar pequenas tarefas no dia-a-dia ou até melhorar a nossa experiência enquanto utilizadores da web.

Neste artigo que vos trago hoje, vou explicar como podemos desenvolver o nosso próprio plugin para o Google Chrome.

Antes de começarmos deverás ter como requisitos mínimos, os seguintes conhecimentos:

HTML
CSS
JavaScript

Para que possamos começar a desenvolver, basta criar um novo directório no nosso computador, abrir o nosso editor de texto preferido e voilá, estamos prontos!

Se alguma vez desenvolveste um Website ou aplicação Web, então vais habituar-te rapidamente ao desenvolvimento de plugins

Declarações

Devemos começar por criar um ficheiro de manifesto, ficheiro este que contém todas as informações do nosso plugin, chamado manifest.json. Este ficheiro é nada mais nada menos do que um ficheiro com o conteúdo em formato JSON.

Neste artigo vamos criar um plugin para que nos informe quais as medidas do browser de uma forma simples. Para isso, criamos um ficheiro manifest.json com o seguinte aspecto:

{
"manifest_version": 2,
"name": "Ruller",
"description": "Este plugin diz-nos quais as medidas atuais do nosso browser.",
"version": "1.0",
"icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
!
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "Ruller"
}, !
"background": {
"scripts": ["background.js"]
}, !
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery.min.js","content.js"]
}
]
} !

Passando à explicação

manifest_version – É a versão do ficheiro manifest.json que acabamos de criar, está atualmente na versão 2, sendo que ficheiros na versão 1 não serão aceites pelos Google Chrome.
name – Nome do nosso plugin, o que for definido neste campo será visível publicamente na página dos plugins do Chrome.
description – Breve descrição do plugin, tal como o nome, a descrição será visível na página dos plugins do Chrome.
version – Versão atual do nosso plugin, deverá ser definido pelo programador.
icons – Aqui definimos quais os ficheiros a utilizar para as diversas dimensões dos ícones, os mesmos devem estar no directório criado anteriormente e deverão ser especificados no manifest.json.
browser_action – Aqui definimos o aspecto do ícone que está visível ao lado da omnibar do Chrome, especificando quais os ícones a utilizar bem como o título que será visível no tooltip por cima do ícone.
background – Conjunto de páginas ou scripts a serem utilizados em plano de fundo. Mais para a frente irei regressar a este assunto.
content_scripts – São os ficheiros que fazem com que o nosso plugin funcione. Devemos ter atenção às dependências do nosso código, neste caso é necessário a framework jQuery, logo temos de importar primeiro o jQuery. Neste exemplo vamos usar o ficheiro do jQuery e o content.js, ficheiro que contém o código a ser desenvolvido. Aqui podemos acrescentar regras e carregar estes ficheiros apenas em alguns websites, neste caso carregamos os ficheiros para todos!

Background

O ficheiro que definimos como background no manifesto, neste caso irá servir como “vigia”, estando à espera que o utilizador o chame. Neste ficheiro colocamos o seguinte código:

chrome.browserAction.onClicked.addListener(function(tab)
{
   chrome.tabs.getSelected(null, function(tab)
   {
      chrome.tabs.sendMessage(tab.id, "");
   });
});

Explicando, estamos a dizer ao nosso background.js que assim que for feito um clique no ícone do plugin, este envia uma mensagem indicando que o clique foi efetuado. Na mensagem é obrigatório passarmos o id do tab em que estamos, bem como uma mensagem, que neste caso é uma string vazia.

Listener

Como vimos anteriormente, assim que o utilizador efetua o clique no botão do nosso plugin, é enviada uma mensagem. Mas para quem? É aqui que entra o ficheiro content.js, que definimos no manifest.json. No content.js temos o seguinte código:

chrome.extension.onMessage.addListener(function() {
   var width = $(window).width();
   var height = $(window).height();
   alert("Largura:" + width + "\nAltura: " + height);
});

O código acima, está à espera que seja enviada uma mensagem. Assim que a mesma é enviada este adiciona um listener, que vai fazer com que ele seja o receptor da mensagem, executando assim a sua função. Neste caso, irá mostrar-nos quais as medidas do nosso browser, no momento em que damos o clique no nosso plugin.

Utilização

Agora que temos o nosso plugin feito, vamos colocar o mesmo em funcionamento, mãos à obra!

Para isso, basta activarmos o modo de programador do Google Chrome. Abrimos a página dos plugins do Google Chrome e selecionamos a caixa que diz Modo de programador.

De seguida, clicamos em Carregar extensão descomprimida e indicamos onde está o directório criado anteriormente. Assim que estiver concluído, podemos ver o nosso recém criado plugin activado e pronto a utilizar.

Agora que está tudo terminado, podemos testar o nosso plugin!

Conclusões

Com este artigo aprendemos a dar os primeiros passos na criação de plugins para o Google Chrome.

Aproveito a ocasião para dar a conhecer um plugin desenvolvido por mim, que tem como objectivo desbloquear o conteúdo social em que somos obrigados a dar Like para que o possamos ver. O plugin chama-se Social Unlocker e podem obter mais informações em: http://www.rafaelalmeida.pt/socialunlocker/

Gostaria de agradecer ao Jorge Paulino pelo convite e pela oportunidade. Espero que tenham gostado e espero que este artigo sirva de ajuda para que possam criar os vossos plugins!

Revista PROGRAMAR