Passa ai contenuti principali

chromeapp - interazione con il browser 2

ora implementiamo la nostra estensione come descritto nel precedente post

l'utente effettua click sull'estensione

nella nostra applicazione non cambia nulla

l'utente effettua un click sul pulsante screenshot

nel file popup.html aggiungiamo 
<!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>
                <button id="capture">capture</button>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>

</html>

e modifichiamo anche il file popup,js aggiungendo l'evento capture

$(document).ready(function() {
.....
$('#capture').on('click', function() {
      chrome.extension
             .getBackgroundPage()
             .capture();
    });
....
});

chrome.extensionì.getBackgroundPage().capture(); richiama la pagina backgroud.html dove c'è il codice che effettua la cattura

chrome effettua l'immagine del tab attivo

al file background.js  è stato aggiunto questo codice:
.....
var id = 100;

function capture() {

    chrome.tabs.captureVisibleTab({'format': 'png'}, function(img) {

        var screenshotUrl = img;

        //recupera il file locale html e lo trasforma in url
        var viewTabUrl = chrome.extension.getURL('screenshot.html?id=' + id++);

        chrome.tabs.create({
                url: viewTabUrl
            },
            function(tab) {

                var targetId = tab.id;
                chrome.tabs.onUpdated.addListener(function(tabId, infoTab) {
                    
                    //controllo che l'id tab aperto sia lo stesso
                    if (tabId != targetId) return;

                    //controllo che lo stato di caricamento sia completato
                    if (infoTab.status != "complete") return;

                    //se il tab è creato posso eliminare l'evento
                    chrome.tabs.onUpdated.removeListener(this);

                    //controllo fra le view dell'estensione quella che è stata aperta
                    //e passo l'immagine
                    var views = chrome.extension.getViews();

                    for (var i = 0; i < views.length; i++) {

                        var view = views[i];

                        //se la view ha lo stesso indirizzo url creato allora passo l'immagine
                        if (view.location.href == viewTabUrl) {
                            view.setScreenshotUrl(screenshotUrl);
                            break;
                        }

                    }
                });
            }
        );
    });
}

chrome.tabs.captureVisibleTab

permette di effettuare lo screenshot del tab attivo, "VisibleTab"
il metodo ha due parametri principali che indicano la tipologia di immagine, jpg o png, e l'immagine che il sistema ha realizzato, un flusso binario nella variabile img

chrome.extension.getURL

il metodo recupera il file screenshot.html dell'estensione e crea un url per visualizzarlo
il file screenshot.html è così formato
<html>
<head>
    <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>
</head>

<body class="container">
    <div class="row">
        <div class="span12 well">
            <h1>screenshot accquisito</h1>
            <img id="target" src="white.png">
            <p class="lead">right click to download</p>
        </div>
    </div>
    <script src="screenshot.js"></script>
</body>

</html>

contiene un tag img che conterrà lo screenshot acquisito
il file screenshot.js contiene semplicemente una funzione che modifica l'attributo src del tag img con il flusso binario ricevuto

function setScreenshotUrl(url) {
  document.getElementById('target').src = url;
}

chrome.tabs.create

questo metodo crea il tab in chrome
il metodo richiede due parametri principali: l'url, quella precedentemente creata con chrome.extension.getURL, e la funzione di callback di popolamento del tab con i dati di screenshot.html
quando il tab è creato, il DOM del tab non è subito disponibile
quindi per attendere che sia completo dobbiamo aggiungere un evento onUpdated.addListener che si attiva ogni volta che il tab viene aggiornato, come in fase di caricamento del documento
infatti all'interno dell'evento controlliamo che se infoTab.status != "complete"  deve uscire dall'evento
a questo punto che il tab è completo è ora di iniziare a popolarlo con lo screenshot

chrome.extension.getViews

recupera tutti i file html presenti nell'estensione e all'interno di un ciclo permette di controllare se la view ha lo stesso url, view.location.href == viewTabUrl, di quello generato precedentemente con chrome.extension.getURL

iniettiamo l'immagine

a questo punto è sufficiente iniettare lo stream immagine, view.setScreenshotUrl(screenshotUrl), alla view corretta, ossia al file screenshot.html
da notare che nel momento in cui si recupera la view, le funzioni js della view sono direttamente accessibile come se fossero incorporate 

avvio dell'applicazione

e ora avviamo......
OPS! errore... chrome non fa nulla
perchè?
se controlliamo in debug il motivo, la console restituisce un errore di permissions
chrome è restrittivo su molti aspetti ed è necessario istruire il browser sui permessi che l'estensione vuole utilizzare
nel nostro caso sono da aggiungere due permessi nel file manifest.json
{
.....
 "permissions": [
        "tabs",
        "http://*/*"
    ],
    "content_security_policy": "script-src 'self'; object-src 'self'"
...
}

"permissions": [ "tabs", "http://*/*"] indica che l'estensione vuole interagire con i tab del browser e con qualsiasi url
script-src 'self'; object-src 'self'  indica che ...bhe sto investigado, o volete che sappia proprio tutto? sono autodidatta

conclusione

ora avete un'infarinatura per la creazione di un'estensione chrome
nella prossima puntata e ultima provvederò a darvi una lista (???) di link dove trovare documentazione
per ora scaricate da github l'ultima versione e se riscontrate qualcosa che non va avvertitemi e fate un pull request


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

Vich Uploader: due note per ricordare un apio di aspetti

la documentazione del bundle symfony vich uploader è chiara, anche se non è perfetta
quindi ecco un paio di note per non incappare in errori sciocchi che però fanno perdere tempo.
la configurazione in config.yml contiene le specifiche di come devono essere trattati i files in upload
la configurazione ha un nome e si chiama mapping. nella documentazione del bundle è product_image
nell'entity che conterrà l'immagine è necessario specificare due campi: imageFile e imageName
imageFile contiene il riferimento alla classe symfony File, che è il file effettivo in upload. Il campo è definito come UploadableField e richiede due cose: il nome del mapping, ossia il nostro precedente product_image (!importantissimo) e il nome di una proprieta dove mettere il nome del file
Il form che effettua l'upload del file deve inserire nel builder un campo di tipo vich_file o vich_image e il nome di questo campo deve essere imageFile.
in fase di caricamento il bundle crea in automatico le cartell…

Trasferimento server to server (LINUX) della casella email

Oggi ho scoperto un tool veramente molto utile per il trasferimento server to servevr delle caselle email. Ed è acnhe veloce.
Si chiama imapsync [rif: https://imapsync.lamiral.info/ ]In pratica il tool da linea di comando si connette via imap al server email precedente e trasporta tutto al server di destinazioneLo uso quando faccio migrazioni di vps.Come funziona imapsync per sincronizzare e emailInternet è una risorsa. Da questo blog ho preso tutte le indicazioni https://www.jverdeyen.be/ubuntu/imapsync-on-ubuntu/Uso una distribuzione ubuntu 14.04. Non esiste un pacchetto precompilato da installare. imapsync si basa su perl. Ve lo ricordate? Mica è andato in disuso.Primo: si installano le dipendenze di imapsync per la migrazione mail server to serversudo apt-get install makepasswd rcs perl-doc libio-tee-perl git libmail-imapclient-perl libdigest-md5-file-perl libterm-readkey-perl libfile-copy-recursive-perl build-essential make automake libunicode-string-perl Secondo: si scarica i…