Passa ai contenuti principali

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 

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…