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

    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/
    ]

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

    Google Tag Manage e E-commerce Avanzato all’interno della documentazione ufficiale è descritto sia il processo che il codice di implementazione per il monitoraggio avanzato dell’e-commerce
    In breve il codice da inserire deve essere un array tipo dataLayer che contiene una serie di informazioni per il monitoraggio di:
    impressioni di prodotto e di categoriadettaglio di prodottocheckoutacquisto Sono presenti anche i meccanismi per il monitoraggio delle promozioni, per l’annullamento ordine e per l’aggiunta dinamica del prodotto in carrello
    Nel caso del modulo BwAnalytics sono monitorati i primi 4.
    Google Tag Manager L’attivazione dell’ecommerce avanzato si effettua sulla vista di Google Analytics e si impostano i nomi degli step del processo di checout mappati all’interno del codice
    Limpostazione di Google Tag Manager per l’e-commerce avanzato richiede la greazione di 3 tag:
    impressioni e dattagli categoria e prodottocheckout acquisto pagine prestashop coinvolte Su prestashop le pagine di…