Creare un’estensione per Google Chrome
Chrome, il browser web di google, ormai non ha più bisogno di presentazioni. Le sue prestazioni, le tab sandboxed e la sua dedizione agli standard web, aiutato dal motore di rendering WebKit, lo rendono un ottima scelta come browser predefinito.
Quello che gli manca ancora è un buon parco di estensioni. Da questo punto di vista Firefox parte avvantaggiato, ma la situazione sul fronte Chrome si sta lentamente sbloccando e nelle ultime versioni in sviluppo è già possibile usare userscripts (gli script Greasemonkey di Firefox) e estensioni, con tanto di sito dedicato.
In questo mio primo articolo vorrei quindi introdurvi allo sviluppo di estensioni per Chrome, io utilizzerò Chromium su Linux ma il processo non dovrebbe essere dissimile.
L’estensione che andremo a sviluppare andrà ad aggiungere un’icona in fondo alla barra degli indirizzi (chiamate pageActions) che ci permetterà di interrogare un servizio online per recuperare i dati da whois del dominio che stiamo visualizzando.
A questo indirizzo potete trovare l’attuale documentazione relativa allo sviluppo di estensioni per Chrome: code.google.com/chrome/extensions
Struttura dell’estensione
Creiamo una cartella “whois_checker” destinata a contenere i sorgenti.
Un’estensione Chrome è descritta dal suo manifest file “manifest.json”, un file JSON posizionato nella root della cartella.
{
"name": "WhoIS Checker",
"description": "Adds one-click whois check to your toolbar",
"version": "1.0",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"background_page": "background.html",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["get_domain.js"]
}
],
"icons": { "48": "info-48.png" },
"page_actions": [
{
"id": "WhoIsPageAction",
"name": "Check whois for this domain",
"icons": ["info-16.png"]
}
]
}
Oltre ai parametri auto-esplicativi come name, description, version, etc… i parametri cui prestare più attenzione in questo caso sono 3:
- background_page: Permette di specificare uno script che verrà eseguito singolarmente, ovvero, indipendentemente dal numero di tab/finestre aperte, ci sarà sempre e comunque un solo script in esecuzione.
- content_scripts: Sono script che vengono eseguiti all’interno della pagina visualizzata e quindi sono in grado di alterarne o leggerne il contenuto. Per ogni tab/finestra aperta ci sarà quindi uno di questi script in esecuzione.
- page_actions: Definisce delle azioni da associare alla tab corrente. Appaiono come icone contenute all’interno della barra degli indirizzi.
Analisi
Uno script viene eseguito al caricamento di ogni pagina (get_domain.js) e passerà l’informazione del dominio (window.location.hostname) allo script in background.html.
if (window == top) {
// Passiamo l'hostname alla background page
chrome.extension.connect().postMessage(window.location.hostname);
}
In background.html vengono attivati i listener che servono ad “ascoltare” i messaggi passati dai content_script e ricevuto un dominio valido (escludiamo gli indirizzi IP), abilitiamo esplicitamente la pageAction che a questo punto verrà mostrata nella barra degli indirizzi
var pageActionId = "WhoIsPageAction";
var hostnames = {};
chrome.extension.onConnect.addListener(function(port) {
// Funzione chiamata del contentScript get_domain.js, che ci passer l'hostname della tab corrente
port.onMessage.addListener(function(hostname) {
// Niente whois sugli IP
if (!/^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$/.exec(hostname)) {
// Estraiamo il dominio di secondo livello dall'hostname
var matches = /[^\.]+\.[^\.]+$/.exec(hostname);
if (matches.length==1) {
hostnames[port.tab.id] = matches[0];
// Se tutto andato a buon fine, abilitiamo la pageAction
chrome.pageActions.enableForTab(pageActionId, {tabId: port.tab.id, url: port.tab.url, title: "Check WhoIs", iconId: 0});
}
}
});
});
Con un’altro listener creiamo un’azione per la pageAction, dove, dopo aver recuperato la tab in uso, creiamo un url che punta al servizio online di query whois con il nostro dominio tra i parametri. Con questo url, apriamo una nuova tab del browser e il gioco è fatto
chrome.pageActions[pageActionId].addListener(function(pageActionId, pageActionInfo) {
chrome.windows.getCurrent(function(window) {
chrome.tabs.get(pageActionInfo.tabId, function(tab) {
// Assicuriamoci che la finestra sia ancora selezionata
if (window.focused) {
// Creaiamo l'url del servizio di query whois e apriamolo in una nuova tab
var url = "http://artera.it/whois?s=" + encodeURIComponent(hostnames[pageActionInfo.tabId]);
chrome.tabs.create({url: url, windowId: window.windowId});
}
});
});
});
Rimane solo da fare un po’ di pulizia alla chiusura della tab
chrome.tabs.onRemoved.addListener(function(tabId) {
hostnames[tabId] = null;
});
Testare l’estensione
Durante lo sviluppo dell’estensione è possibile provarla e ricaricarla “al volo” senza doverla prima pacchettizare.
Ecco come fare:
Aprire una nuova tab su chrome://extensions , viene visualizzata una lista delle estensioni installate sul browser.
Cliccare su “+ Developer tools” e quindi su “Load unpacked Extension…”, selezionare quindi la cartella dell’estensione, che apparirà immediatamente in lista e potrà essere ricaricata a piacimento.
Pagina estensione | Installa | Sorgenti
Bravo Max, fai un po’ di estensioni che poi abbandono Firefox che mi mangia tutta la RAM 🙂
E’ anche il mio obiettivo, ma purtroppo al momento sono un po’ limitate rispetto a quello che si può fare per Firefox. Speriamo per il futuro…
io ho poche nozioni di programmazione, ma mi sto sfasciando la testa per fare un estensione che:
nel sito XXX
cerchi le parole YYY e ZZZ e le modifichi in YYYKKK e ZZZKKK.
Quest’estensione io l’ho già su FF e volevo riportarla su Crhome… ma fino ad ora nada, non ci riesco! 🙁
@Pietro: l’estensione che ti serve dovrebbe essere abbastanza semplice. Hai bisogno di un javascript in content_scripts che viene incluso nella pagina web che stai visitando. Questo script poi deve eseguire (al domready o sul load) un ciclo su tutti i tag rilevanti e fare un replace del testo.
Se hai bisogno che l’estensione venga applicata solo ad alcuni siti devi lavorare preferibilmente sui permissions nel manifest.json (ad es: http://google.it/*) o altrimenti controllare window.location.hostname ogni volta.
A me servirebe un’estenzione che andreppe a ripetermi delle azioni in automatico in una pagina web…
ma non riesco a capire come far.
Ciao Marc, questo articolo è molto vecchio e dubito ti possa essere ancora utile dato che sono cambiate molte cose in chrome nel frattempo.
In ogni caso sono quasi sicuro che non ci sia bisogno di crearti la tua estensione a mano. Ci sono molte estensioni nello store che potrebbero fare al caso tuo. Prova questa: iMacros for Chrome
Ciao!