chrome app - background.html

le pagine background.html sono script che vengono eseguiti in background.

i vantaggi delle pagine  background.html è che sono in grado di comunicare con ogni scheda e ogni estensione nel tuo browser

non importa quante schede o finestre sono aperte, queste pagine possono rilevarne facilmente i cambiamenti in corso

inoltre queste pagine possono comunicare facilmente con il browser e vari script

contengono anche il comportamento dell'estensione

<html>

   <script>

     console.log ("Ciao Mondo!");

   <script>

</ html>

un file background.html non è altro che codice Javascript

queste pagine sono sempre aperte, sono sempre in esecuzione in modalità nascosta, in background, ciò significa che al momento dell'avvio di Chrome, le pagine di sfondo vengono caricate

aggiungiamo la pagina di background

aggiungiamo ora al nostro progetto la pagina background.html e inseriamo la logica dell'applicazione

pagina opzioni

nella pagina opzioni possiamo estrarre le seguenti funzionalità:

• salvataggio dell'opzione
• recupero dell'opzione
• controllo esistenza dell'opzione

function saveOption(data) {
    var storage = $.localStorage;
    $(data).each(function(i, e) {
        storage.set(i, e);
    });
}
function getOption(option) {
    var storage = $.localStorage;
    if (isOption(option)) {
        return storage.get(option);
    }
}
function isOption(option) {
    var storage = $.localStorage;
    return storage.isSet(option);
}

queste tre funzioni sono messe nel codice javascript del file background.html

<!doctype html>

<html>

<head>

    <script src="lib/jquery.min.js"></script>

    <script src="lib/jQuery-Storage-API/jquery.storageapi.min.js"></script>

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

</head>

<body></body>

</html>

ora possiamo utilizzare le funzioni di background.js in maniera globale all'interno dell'estensione

ecco lo script options.js con l'utilizzo delle funzioni globali di background

$(document).ready(function() {

    var storage = $.localStorage;

    if (chrome.extension.getBackgroundPage().isOption('color')) {

        var _color = chrome.extension.getBackgroundPage().getOption('color');

        $('#color').find('option').each(function(idx, el) {

            if ($(el).val() == _color) {

                el.selected = true;

            }

        });

    }

    $('#save').on('click', function() {

        var _color = $('#color').find('option:selected').val();

       chrome.extension

             .getBackgroundPage()

            .saveOption(

              [{

                'value': _color,

                'key': 'color'

              }]);

        $('#status').html('opzione salvata');

    })

});

chrome.extension.getBackgroundPage()  restituisce un oggetto window in cui sono incorporate le nostre funzioni chrome.extension.getBackgroundPage().saveOption(...)

l'utilizzo delle pagine background non si limita a offrire un metodo per condividere le funzioni fra tutti gli script ma anche per gestire e controllare i cambiamenti nel browser

infatti abbiamo introdotto l'api chrome.* che scopriremo più avanti

e ora a scaricare il codice da github