abbiamo creato l'estensione di chrome come pupup e abbiamo creato la pagina delle opzioni di configurazione.
ora applichiamo la configurazione alla popup.
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
Posta un commento