Criando um plugin para Chrome

O browser Chrome hoje é um dos mais utilizados (para mim o mais utilizado, não conheço programadores que não o estão usando), por isso, outro dia estava pensando em como desenvolver um plugin para o meu chrome para minhas necessidades. Eis que acho um tutorial básico na revista PROGRAMAR edição 44.


Eis uma "psicografia" :-D do artigo da revista.


O plugin que vamos criar, mostrara as dimensões do browser.

Para isso você deve conhecer um pouco de HTML, CSS e JavaScript.

Todas as extensões (plugins) para o chrome, web app ou temas tem um arquivo formatado, chamado de manifest. Neste caso manifest.json, que fornece importantes informações.

Segue nosso código do manifest.json abaixo. Os únicos campos realmente necessários são: name e version.

{
"manifest_version": 2,
"name": "Ruller",
"description": "Este plugin diz-nos quais as medi- das 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"] } ]
} ! 

Após isso, criaremos o arquivo background.js, definido no manifest. Ele serve como "vigia", fica na espera que o utilizador o chame. Vocês podem notar que estamos a espera do evento de clique.

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

No código acima, como nós vimos, estamos esperando o clique do mouse. O utilizador clica no nosso plugin e envia uma mensagem, mas para quem? Para isso nós definimos o nosso arquivo content.js, segue abaixo o código.

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

Agora nós já temos todos nosso código, só precisamos nos atentar a duas coisas: esse plugin necessita o framework JQuery, logo temos de importar primeiro o JQuery. E fazer um teste do nosso plugin.

Vou colocar esse dois passos no meu próximo post.