Passa ai contenuti principali

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

    Post popolari in questo blog

    install language on osTicket

    this simple guide aims you to install and configure your language on osTicket i written this guide based on forum post http://osticket.com/forum/discussion/76252/installing-language-pack

    Trasferimento server to server (LINUX) della casella email

    Oggi ho scoperto un tool veramente molto utile per il trasferimento server to servevr delle caselle email. Ed è acnhe veloce.
    Si chiama imapsync [rif: https://imapsync.lamiral.info/ ]In pratica il tool da linea di comando si connette via imap al server email precedente e trasporta tutto al server di destinazioneLo uso quando faccio migrazioni di vps.Come funziona imapsync per sincronizzare e emailInternet è una risorsa. Da questo blog ho preso tutte le indicazioni https://www.jverdeyen.be/ubuntu/imapsync-on-ubuntu/Uso una distribuzione ubuntu 14.04. Non esiste un pacchetto precompilato da installare. imapsync si basa su perl. Ve lo ricordate? Mica è andato in disuso.Primo: si installano le dipendenze di imapsync per la migrazione mail server to serversudo apt-get install makepasswd rcs perl-doc libio-tee-perl git libmail-imapclient-perl libdigest-md5-file-perl libterm-readkey-perl libfile-copy-recursive-perl build-essential make automake libunicode-string-perl Secondo: si scarica i…

    Vich Uploader: due note per ricordare un apio di aspetti

    la documentazione del bundle symfony vich uploader è chiara, anche se non è perfetta
    quindi ecco un paio di note per non incappare in errori sciocchi che però fanno perdere tempo.
    la configurazione in config.yml contiene le specifiche di come devono essere trattati i files in upload
    la configurazione ha un nome e si chiama mapping. nella documentazione del bundle è product_image
    nell'entity che conterrà l'immagine è necessario specificare due campi: imageFile e imageName
    imageFile contiene il riferimento alla classe symfony File, che è il file effettivo in upload. Il campo è definito come UploadableField e richiede due cose: il nome del mapping, ossia il nostro precedente product_image (!importantissimo) e il nome di una proprieta dove mettere il nome del file
    Il form che effettua l'upload del file deve inserire nel builder un campo di tipo vich_file o vich_image e il nome di questo campo deve essere imageFile.
    in fase di caricamento il bundle crea in automatico le cartell…