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…

    Creare un ambiente di sviluppo PHP SYMFONY MYSQL DOCKER

    Preferisco Docker a Vagrant, più leggero. Ognuno naturalmente ha le sue preferenze.
    Docker lo trovo più facile e veloce da configurare.
    Non conosci Docker, vai sul sito e scoprirai un tool fantastico per "virtualizzare" le macchine, anche se non è il termine corretto.
    Docker crea un contenitore all'interno del tu S.O. senza però virtualizzare l'infrastruttura hardware.
    A me piace sviluppare con Symfony: W Symfony2!

    [update: ho trovato questa serie di post nuovi per lo sviluppo con symfony su docker
    https://blog.vandenbrand.org/2016/02/03/developing-symfony-applications-with-docker-series-part-i-getting-started/
    ]