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......