applicazioni per chrome - introduzione

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:

  1. browser actions: aggiungono un'icona a destra della barra indirizzi (ad.es. per mostrare una popup)
  2. page actions: mostrano un'icona all'interno della barra indirizzi
  3. desktop notifications: mostrano notifiche 
  4. 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 :
    1. file manifest.json
    2. file icona
    3. file html

    file manifest.json

    il file manifest.json contiene tutte le specifiche dell'applicazione, i permessi etc
    ecco 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"
      }
    }

    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'applicazione
    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>

    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

    Commenti

    Post popolari in questo blog

    Ubuntu: La propria installazione di python è danneggiata. Correggere il collegamento simbolico «/usr/bin/python».

    Setup Google Tag Manager con PrestaShop per l'e-commerce avanzato