Crea la tua prima app

Questo tutorial ti guida nella creazione della tua prima app di Chrome. Le app di Chrome hanno una struttura simile alle estensioni in modo che gli sviluppatori attuali riconoscano il manifest e i metodi di pacchettizzazione. Quando dovrai solo generare un file ZIP con il codice e le risorse per pubblicare i tuoi dell'app.

Un'app di Chrome contiene i seguenti componenti:

  • Il file manifest indica a Chrome la tua app, che cos'è, come lanciarla e i componenti aggiuntivi le autorizzazioni necessarie.
  • Lo script in background viene utilizzato per creare la pagina dell'evento responsabile della gestione della vita dell'app ciclo di lancio di Android.
  • Tutto il codice deve essere incluso nel pacchetto dell'app di Chrome. Sono inclusi HTML, JS, CSS e Native Client. moduli.
  • Anche tutte le icone e gli altri asset devono essere inclusi nel pacchetto.
di Gemini Advanced.

Passaggio 1: crea il manifest

Innanzitutto crea il file manifest.json (Formati: file manifest descrive questo manifest in dettaglio):

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

Passaggio 2: crea lo script in background

Ora crea un nuovo file denominato background.js con i seguenti contenuti:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

Nel codice di esempio riportato sopra, l'evento onLaunched viene attivato quando l'utente avvia l'app. it apre immediatamente una finestra per l'app con la larghezza e l'altezza specificate. Il tuo background lo script può contenere listener, finestre, messaggi di pubblicazione e dati di avvio aggiuntivi, che sono tutti utilizzata dalla pagina dell'evento per gestire l'app.

Passaggio 3: crea una pagina della finestra

Crea il tuo file window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Passaggio 4: crea le icone

Copia queste icone nella cartella dell'app:

Passaggio 5: avvia l'app

Abilita flag

Molte delle API delle app di Chrome sono ancora sperimentali, pertanto è necessario abilitare queste API in modo da puoi provarle:

  • Vai a chrome://flags.
  • Individua "API di estensioni sperimentali" e fai clic su "Abilita" .
  • Riavvia Chrome.

Carica la tua app

Per caricare l'app, apri la pagina di gestione di app ed estensioni facendo clic sull'icona delle impostazioni di Chrome e scegli Strumenti > Estensioni.

Assicurati che la casella di controllo Modalità sviluppatore sia stata selezionata.

Fai clic sul pulsante Carica estensione non pacchettizzata, vai alla cartella dell'app e fai clic su OK.

Apri una nuova scheda e avviala

Dopo avere caricato l'app, apri una pagina Nuova scheda e fai clic sull'icona della nuova app.

Oppure carica e avvia dalla riga di comando

Le seguenti opzioni della riga di comando per Chrome possono aiutarti a eseguire l'iterazione:

  • --load-and-launch-app=/path/to/app/ installa l'applicazione decompressa dal percorso specificato e e lo avvia. Se l'applicazione è già in esecuzione, viene ricaricata con i contenuti aggiornati.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll avvia un'app già caricata in Chrome. Non riavviare qualsiasi app precedentemente in esecuzione, ma avviare la nuova app con i contenuti aggiornati.