Criando extensão para Google Chrome

Atualmente o browser do nosso computador é um dos softwares mais utilizados diariamente, adicionalmente, temos inúmeras extensões que acrescentam funcionalidades extra. Um extensão é um pequeno software desenvolvido para adicionar funcionalidades extra a softwares maiores, como o exemplo dos browsers que utilizamos. As extensões 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 a nossa própria extensão 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 diretó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 arquivo de manifesto, arquivo este que contém todas as informações do nosso plugin, chamado manifest.json. Este arquivo é nada mais nada menos do que um arquivo com o conteúdo em formato JSON.

Neste artigo vamos criar uma extensão para que nos informe quais as medidas do browser de uma forma simples. Para isso, criamos um arquivo 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 arquivo manifest.json que acabamos de criar, está atualmente na versão 2, sendo que arquivos na versão 1 não serão aceites pelos Google Chrome.
• name – Nome do nossa extensão, o que for definido neste campo será visível publicamente na página dos plugins do Chrome.
• description – Breve descrição da extensão, tal como o nome, a descrição será visível na página das extensões do Chrome.
• version – Versão atual do nossa extensão, deverá ser definido pelo programador.
• icons – Aqui definimos quais os arquivos 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 arquivos que fazem com que o nossa extensão 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 arquivo do jQuery e o content.js, arquivo que contém o código a ser desenvolvido. Aqui podemos acrescentar regras e carregar estes arquivos apenas em alguns websites, neste caso carregamos os arquivos para todos!

Background

O arquivo que definimos como background no manifesto, neste caso irá servir como “vigia”, estando à espera que o utilizador o chame. Neste arquivo 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 da extensão, 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 nossa extensão, é enviada uma mensagem. Mas para quem? É aqui que entra o arquivo 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 nossa extensão.

 

Utilização

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

Para isso, basta ativarmos o modo de programador do Google Chrome. Abrimos a página das extensões 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 diretório criado anteriormente. Assim que estiver concluído, podemos ver o nosso recém criada extensão ativado e pronto a utilizar.

Agora que está tudo terminado, podemos testar o nossa extensão!

Conclusões

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