chrome app - applicazione delle opzioni

abbiamo creato l'estensione di chrome come pupup e abbiamo creato la pagina delle opzioni di configurazione.
ora applichiamo la configurazione alla popup.

flusso

il flusso è semplice: 
  • l'utente fa click sull'estensione
  • l'estensione legge i dati del colore
  • il colore è applicato al background dell'estensione

codice

al codice della pop-up aggiungiamo le librerie jQuery e Storage API e Bootstrap
<!doctype html>
<html>

<head>
    <title>Ciao ragazzi!</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 style="padding: 30px">
    <div class="container">
        <div class="row">
            <div class="span4 offset2 well">
                <h1>hello world!</h1>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>

</html>
nel file popup.js è stata aggiunta la lettura della configurazione e l'applicazione del colore alla popup

$(document).ready(function() {

    var storage = $.localStorage;

    if (storage.isSet('color')) {

        var color = storage.get('color')
        $('body').css('background', color);
    }

});

più semplice di così
e ora potete scaricare l'esempio completo da github

comunque non è finita qui...... 

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