Passa ai contenuti principali

chrome app - opzioni estensione

ogni estensione o applicazione per chrome può avere una serie di opzioni che ne personalizza il comportamento
vedremo ora come abilitare la gestione delle opzioni per le applicazioni o estensioni chrome che si creano e come personalizzare le pagine html utilizzando librerie come jQuery e BootStrap

attivazione pagina opzioni

la pagina delle opzioni per un'estensione di chrome si attiva impostando il parametro "options_page" nel file manifest.json con il nome della pagina contenente le nostre opzioni:
{
   .....
   "options_page": "options.html"
   .....
}

salvataggio delle opzioni

tutte le opzioni di qualsiasi estensione chrome sono salvate nel localstorage del browser, niente di più semplice

applicazione

riprendendo il nostro progetto chromeapp aggiungiamo al file manifest.json il parametro sopra definito e creiamo il file options.html
ecco il flusso esemplificativo della pagine opzioni che andremo a creare:

  • visualizzazione di un campo selezione con dei colori ; 
  • l'utente seleziona il colore
  • l'utente preme salva
  • l'applicazione salva il valore e stampa il messaggio di salvataggio avvenuto
  • l'utente aggiorna la pagina
  • l'applicazione recupera il valore salvato e lo presenta come selezionato
per semplificare il processo utilizzeremo jQuery, il plugin jQuery Storage Api, Bootstrap per la parte grafica
tutti i file js devono essere scaricati in locale pena un errore di chrome
inseriremo i vari file js all'interno della cartella "lib" appositamente creata
i file di boostrap saranno invece inseriti nella root del progetto

file options.html

il file options.html si preoccupa di caricare i plugin di jQuery e Bootstrap per i css e crea la  visualizzazione del campo di selezione
inoltre il file si preoccupa di caricare un'altro file options.js che gestisce la il salvataggio e recupero dei dati

<html>

<head>
    <title>My Test Extension Options</title>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/jQuery-Storage-API/jquery.storageapi.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="span8 offset2 well">
                <h1>colore favorito</h1>
                <select id="color" class="form-control">
                    <option value="red">sorro</option>
                    <option value="green">verde</option>
                    <option value="blue">blue</option>
                    <option value="yellow">giallo</option>
                </select>
                <br>
                <div id="status"></div>
                <button id="save" class="btn btn-info">salva</button>
            </div>
        </div>
    </div>

</body>

<script src="options.js"></script>

</html>


Quello che è importante sottolineare e che in questo processo all'interno del file manifest.json di chrome abbiamo solo specificato un file unico options.html mentre tutti i file relativi a questa mini applicazione sono stati caricati in maniera dinamica direttamente dalla pagina web

aggiornamento dell'applicazione su chrome

all'interno della pagina delle nostre applicazioni possiamo premere su ricarica e poi su opzioni e visualizzeremo la pagina delle opzioni

e ora potete scaricare il codice da github


Commenti

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

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

Questa è un problema, soprattutto se si vuole aggiornare la distribuzione.+
Dì la verità: hai pacioccato con le versioni di python vero? Volevi usare la 3.5 e non 2.7 e così hai aggiunto alternatives o manipolato il symlink.
No? io si.
Così in fase di aggiornamento mi sono bloccato.
Allora per risolverlo ecco la soluzione: elimina tuttle le eventuali alternative : sudo update-alternatives –remove-all pythoncrea il symlink alla 2.7 sudo ln -s /usr/bin/python3.5 /usr/bin/pythonaggiorna i permessi: sudo chmod 7777 /usr/bin/python
Ora funziona tutto.
La soluzione l’ho scovata qui: https://askubuntu.com/questions/448926/do-release-upgrade-python-install-is-corrupted

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…