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 ficheiromanifest.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 nomanifest.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 ocontent.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!