Créer votre première application

Ce tutoriel vous explique comment créer votre première application Chrome. La structure des applications Chrome est similaire aux extensions afin que les développeurs actuels reconnaissent le fichier manifeste et les méthodes de packaging. Lorsque vous il vous suffit de créer un fichier ZIP contenant votre code et vos éléments afin de publier l'application.

Une application Chrome contient les composants suivants:

  • Le fichier manifeste fournit à Chrome des informations sur votre application, de quoi il s'agit, comment la lancer et plus encore les autorisations requises.
  • Le script en arrière-plan permet de créer la page d'événement chargée de gérer la durée de vie de l'application. d'un cycle.
  • L'intégralité du code doit être incluse dans le package de l'application Chrome. Cela inclut les langages HTML, JS, CSS et Native Client modules.
  • Toutes les icônes et tous les autres éléments doivent également être inclus dans le package.

Étape 1: Créez le fichier manifeste

Commencez par créer votre fichier manifest.json (Formats: fichiers manifestes décrit ce fichier manifeste dans détaillée):

{
  "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 exécuté en 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 se déclenche lorsque l'utilisateur démarre l'application. Il ouvre immédiatement une fenêtre pour l'application de la largeur et de la hauteur spécifiées. Votre arrière-plan peut contenir des écouteurs, des fenêtres, des messages post-message et des données de lancement supplémentaires, qui sont tous utilisée par la page de l'événement pour gérer l'application.

Étape 3: Créer une page de fenêtre

Créez le fichier window.html :

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

Étape 4: Créez les icônes

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

Étape 5: Lancez votre application

Activer les indicateurs

De nombreuses API des applications Chrome sont encore au stade expérimental. Vous devez donc activer les API expérimentales pour vous pouvez les essayer:

  • Accédez à chrome://flags.
  • Recherchez les "API Extensions expérimentales" et cliquez sur leur "Activer". .
  • Redémarrez Chrome.

Charger votre application

Pour charger votre application, affichez la page de gestion des applications et des extensions en cliquant sur l'icône des paramètres Chrome et sélectionnez 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 votre application chargée, ouvrez une page "Nouvel onglet" et cliquez sur l'icône de votre nouvelle application.

Possibilité de charger et de lancer l'application à partir de la ligne de commande

Ces options de ligne de commande de 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 indiqué, et le lance. Si l'application est déjà en cours d'exécution, elle est rechargée avec le contenu mis à jour.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll lance une application déjà chargée dans Chrome. Il ne fait pas redémarre toute application en cours d'exécution, mais la nouvelle application est lancée avec le contenu mis à jour.