Passa ai contenuti principali

applicazioni per chrome - introduzione

piatto del giorno: applicazioni per chrome

google chrome è un browser estremamente versatile, aperto e estendibile
le funzionalità di google chrome come firefox possono essere estese con plugin o applicazioni 
nello sviluppo di una web app di tipo business o un'app per android sarebbe bello offrire un'esperienza utente completa offrendo anche applicazioni ed estensioni su google chrome che sta diventando sempre più una piattaforma desktop completa, pensando poi a chrome os....
così ecco dei brevi post per la creazioni di applicazioni ed estensioni su chrome

creazione di YAHWA (yet another hello world application)

ingredienti base:

  • file html
  • file manifest.json
  • file icona

premessa: tipi di estensione

ci sono 4 tipi di estensioni possibili:

  1. browser actions: aggiungono un'icona a destra della barra indirizzi (ad.es. per mostrare una popup)
  2. page actions: mostrano un'icona all'interno della barra indirizzi
  3. desktop notifications: mostrano notifiche 
  4. omnibox: aggiungono funzionalità alla barra indirizzi con parole chiave predefinite
e ora creiamo un'applicazione base browser action
creiamo la cartella chromeapp-master. All'interno della carella creiamo tre file :
    1. file manifest.json
    2. file icona
    3. file html

    file manifest.json

    il file manifest.json contiene tutte le specifiche dell'applicazione, i permessi etc
    ecco un esempio minimo di configurazione basilare:
    {
      "name": "hello",
      "manifest_version": 2,
      "version": "0.1",
      "description": "descrizione applicazione hello",
      "icons": { "128": "icon.png" },
      "browser_action": {
          "default_title": "",
          "default_icon": "icon.png",
          "default_popup": "popup.html"
      }
    }

    file icona

    l'immagine icona è preferibile sia png con trasparenza e come inserito nel file manifest json deve essere di dimensioni 128x128px

    file *.html

    la parte importate è il parametro browser_action > popup.html che contiene la vista dell'applicazione
    il file è un semplice file html che nel nostro caso contiene il famoso "Hello World":
    <!DOCTYPE HTML>
    <html>
    <head></head>
      <body>
        <p>
          <strong>Hello World!</strong>
        </p>
      </body>
    </html>

    caricamento

    ora si deve caricare l'applicazione su chrome
    per effettuare il caricamento richiamare la pagina delle estensioni "chrome://extensions/"
    in modalità sviluppatore selezionare "carica estensione non pacchettizzata" e selezionare la cartella creata "yahwa"

    risultato

    a destra della barra indirizzi ritroviamo la nostra icona che se selezionata ci mostra la popup con Hello World!
    ok e ora per provare senza scrivere codice ecco il link sul repo di 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

    Develop Prestashop Module - puntata 1 creazione di un modulo prestashop

    la creazione o lo sviluppo di un modulo   Prestashop funziona sia per il front-end che il back-end del sistema la struttura di un modulo è fissa che si compone con una serie di step: file di configurazione file di installazione files controllers per l'amministrazione files controllers per il frontend files delle view creazione dell'infrastruttura base del modulo per Frontend all'interno della cartella modules di prestashop creare una cartella  esempio     <root>          |---modules                    |-----miomodulo naturalmente il nome del modulo lo potete personalizzare all'interno della cartella miomodulo  creare i seguenti file config.xml index.php miomodulo .php   <-- inserite il vostro nome modulo al posto di mio modulo index.php il codice di index php , file che dovrà essere inserito in ogni cartella : <?php /* ...

    Prestashop: override PayPal about.tpl

    Abbiamo incontrato una difficoltà nell'override del template "about.tpl" di PayPal su Prestashop. Abbiamo cercato sul forge di Prestashop e abbiamo trovato questo bug . Ora il consiglio che viene dato è quello di utilizzare il "core display method". Così dopo un po' di debug l'abbiamo fatto. Per abilitare all'override l'"about.tpl" di Prestashop è necessario modificare il file "modules/paypal/backaward_compatibility/Display.php": <?php /**  * Class allow to display tpl on the FO  */ class BWDisplay extends FrontController { // Assign template, on 1.4 create it else assign for 1.5 public function setTemplate($template) { if (_PS_VERSION_ >= '1.5') parent::setTemplate($template); else $this->template = $template; } // Overload displayContent for 1.4 public function displayContent() { parent::displayContent();                 echo Module::display('paypal', ...