piatto del giorno: applicazioni per chrome
google chrome è un browser estremamente versatile, aperto e estendibile
le funzionalità di google chrome come firefox possono essere estese con plugin o applicazioni
nello sviluppo di una web app di tipo business o un'app per android sarebbe bello offrire un'esperienza utente completa offrendo anche applicazioni ed estensioni su google chrome che sta diventando sempre più una piattaforma desktop completa, pensando poi a chrome os....
così ecco dei brevi post per la creazioni di applicazioni ed estensioni su chrome
creazione di YAHWA (yet another hello world application)
ingredienti base:
- file html
- file manifest.json
- file icona
premessa: tipi di estensione
ci sono 4 tipi di estensioni possibili:
- browser actions: aggiungono un'icona a destra della barra indirizzi (ad.es. per mostrare una popup)
- page actions: mostrano un'icona all'interno della barra indirizzi
- desktop notifications: mostrano notifiche
- omnibox: aggiungono funzionalità alla barra indirizzi con parole chiave predefinite
e ora creiamo un'applicazione base browser action
creiamo la cartella chromeapp-master. All'interno della carella creiamo tre file :
ecco un esempio minimo di configurazione basilare:
creiamo la cartella chromeapp-master. All'interno della carella creiamo tre file :
- file manifest.json
- file icona
- file html
file manifest.json
il file manifest.json contiene tutte le specifiche dell'applicazione, i permessi etcecco un esempio minimo di configurazione basilare:
{
"name": "hello",
"manifest_version": 2,
"version": "0.1",
"description": "descrizione applicazione hello",
"icons": { "128": "icon.png" },
"browser_action": {
"default_title": "",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
il file è un semplice file html che nel nostro caso contiene il famoso "Hello World":
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<p>
<strong>Hello World!</strong>
</p>
</body>
</html>
"name": "hello",
"manifest_version": 2,
"version": "0.1",
"description": "descrizione applicazione hello",
"icons": { "128": "icon.png" },
"browser_action": {
"default_title": "",
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
file icona
l'immagine icona è preferibile sia png con trasparenza e come inserito nel file manifest json deve essere di dimensioni 128x128px
file *.html
la parte importate è il parametro browser_action > popup.html che contiene la vista dell'applicazioneil file è un semplice file html che nel nostro caso contiene il famoso "Hello World":
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<p>
<strong>Hello World!</strong>
</p>
</body>
</html>
caricamento
ora si deve caricare l'applicazione su chrome
per effettuare il caricamento richiamare la pagina delle estensioni "chrome://extensions/"
in modalità sviluppatore selezionare "carica estensione non pacchettizzata" e selezionare la cartella creata "yahwa"
risultato
a destra della barra indirizzi ritroviamo la nostra icona che se selezionata ci mostra la popup con Hello World!
ok e ora per provare senza scrivere codice ecco il link sul repo di github