duminică, 5 august 2012

Crearea unei extensii / plugin pentru browser-ul Google Chrome


In articolul anterior am raspuns unei provocari lansate de Refresh.ro si am creat foarte rapid o extensie pentru Google Chrome care te redirecteaza catre Google.ro atunci cand accesezi o pagina web care contine cuvantul "Iliescu". Ideea se pare ca prins foarte bine asa ca m-am gandit sa postez si un tutorial pentru a va arata cat de usor se poate crea un plugin pentru Chrome daca aveti cunostinte HTML, Javascript si putin timp pentru a studia documentatia.

Pentru inceput, o extensie trebuie sa aiba un fisier de configurare, in el se trec detalii precum numele extensiei, o descriere, o iconita, scripturile care ruleaza in background, permisiunile de care are nevoie pentru a functiona. In cazul Chrome fisierul de configurare se numeste manifest.json

{
  "name": "No more Iliescu",
  "version": "1.0",
  "description": "Redirecteaza paginile care contin cuvantul \"Iliescu\"",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "manifest_version": 2
}

In traducere libera, aplicatia va rula un script in background (background.js) de fiecare data cand se acceseaza o pagina web (vezi permisiunea "http://*/*", "https://*/*") si cerem permisiunea de a accesa tab-urile pentru ca avem nevoie de informatii despre continutul paginii, url, id-ul tab-ului curent.

Mai jos este continutul fisierului background.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == "complete")
    {
        var codem = "var text = document.body.innerHTML; var pattern = /iliescu/i; if(text.match(pattern)) { window.location.href='http://google.ro'; }";
  chrome.tabs.executeScript( tab.id, { code: codem });
    }
});

Este destul de simplu de inteles ce face scriptul acesta. Cu ajutorul API-ului Chrome "ascultam" evenimentele din tab-ul curent folosind chrome.tabs.onUpdated.addListener(), in momentul in care pagina s-a incarcat complet (status "complete") atribuim variabilei codem o valoare de tip sir de caractere care contine un cod javascript.
Cod javascript care va fi executat in tab-ul curent prin intermediul chrome.tabs.executeScript(), functie ce primeste ca parametri id-ul tab-ului deschis in acest moment si variabila care contine codul javascript de executat.

Toata "magia" este creata de codul javascript din variabila codem:
var text = document.body.innerHTML; // luam continutul html al paginii
var pattern = /iliescu/i; // expresie regulata pentru a gasi in text cuvantul "iliescu"
if(text.match(pattern)) { // daca in text este gasit cuvantul nostru
   window.location.href='http://google.ro'; // redirecteaza catre pagina dorita
}

Pentru a testa extensia in browser trebuie sa mergeti in pagina de Extensii (Meniu -> Instrumente -> Extensii), sa va asigurati ca modul "Dezvoltator" este activat:


Si incarcati directorul care contine fisierele extensiei apasand pe butonul "Incarcati extensiile neimpachetate...".

Daca totul este in regula si aplicatia este gata de "productie" apasati pe butonul "Creati un pachet pentru extensie...", alegeti directorul in care se afla fisierele si apasati butonul "Creati un pachet pentru extensie".
In acest moment se va genera fisierul ".crx" care reprezinta installer-ul extensiei si un fisier ".pem" care trebuie pastrat intr-un loc sigur pentru ca il veti folosi in viitor cand vreti sa impachetati versiunile viitoare ale aplicatiei.

Mai departe tine de voi cum popularizati aceasta extensie, daca o introduceti in Chrome Web Store sau o raspanditi prin mijloace proprii.