Créer votre première application

Ce tutoriel explique comment créer votre première application Chrome. Les applications Chrome sont structurées de la même manière que les extensions afin que les développeurs actuels reconnaissent le fichier manifeste et les méthodes de packaging. Lorsque vous avez terminé, il vous suffit de générer un fichier ZIP contenant votre code et vos éléments pour publish votre application.

Les applications Chrome contiennent les composants suivants:

  • Le fichier manifeste indique à Chrome sa nature, sa nature, comment la lancer et les autorisations supplémentaires dont elle a besoin.
  • Le script d'arrière-plan permet de créer la page d'événements chargée de gérer le cycle de vie de l'application.
  • L'ensemble du code doit être inclus dans le package de l'application Chrome. Cela inclut les modules HTML, JS, CSS et Native Client.
  • Toutes les icônes et autres éléments doivent également être incluses dans le package.

Étape 1: Créez le fichier manifeste

Commencez par créer votre fichier manifest.json. (Formats: Manifest Files décrit ce fichier manifeste en détail):

{
  "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" }
}

Étape 2: Créez le script d'arrière-plan

Créez ensuite un fichier nommé background.js avec le contenu suivant:

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

Dans l'exemple de code ci-dessus, l'événement onLaunched est déclenché lorsque l'utilisateur démarre l'application. Il ouvre ensuite immédiatement une fenêtre pour l'application dont la largeur et la hauteur sont spécifiées. Votre script d'arrière-plan peut contenir des écouteurs, des fenêtres, des messages publiés et des données de lancement supplémentaires, qui sont tous utilisés par la page d'événement pour gérer l'application.

Étape 3: Créez une page de fenêtres

Créez le fichier window.html :

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

Étape 4: Créer les icônes

Copiez ces icônes dans le dossier de votre application:

Étape 5: Lancez votre application

Activer les indicateurs

De nombreuses API d'applications Chrome en sont encore au stade expérimental. Vous devez donc les activer pour pouvoir les tester:

  • Accédez à chrome://flags.
  • Recherchez la section "API des extensions expérimentales", puis cliquez sur le lien "Activer".
  • Redémarrez Chrome.

Charger votre application

Pour charger votre application, ouvrez la page de gestion des applications et des extensions en cliquant sur l'icône des paramètres Chrome et en sélectionnant Outils > Extensions.

Assurez-vous que la case Mode développeur est cochée.

Cliquez sur le bouton Charger l'extension non empaquetée, accédez au dossier de votre application, puis cliquez sur OK.

Ouvrir un nouvel onglet et lancer

Une fois l'application chargée, ouvrez une page "Nouvel onglet" et cliquez sur l'icône de votre nouvelle application.

Charger et lancer depuis la ligne de commande

Les options de ligne de commande suivantes dans Chrome peuvent vous aider à effectuer des itérations:

  • --load-and-launch-app=/path/to/app/ installe l'application non empaquetée à partir du chemin d'accès donné et la lance. Si l'application est déjà en cours d'exécution, elle est actualisée avec le contenu mis à jour.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll lance une application déjà chargée dans Chrome. Elle ne redémarre aucune application en cours d'exécution, mais lance la nouvelle application avec le contenu mis à jour.