Google, Chrome, Webapplication, Webstore – Créer sa première extension puis sa première Google Chrome Webapplication

Le cercle vertueux suscité par l’App Store d’Apple a fait des émules quant à son modèle de création et de distribution d’applications sur le Web. Avec l’irruption en force des navigateur Chrome Web et de Firefox, on voit tout naturellement se profiler à l’horizon une plate-forme de distribution d’extensions fonctionnelles en vue d’accroître les capacités du navigateur. Pour Chrome, c’est le Google Chrome Web Store, c’est à cette plate-forme et à la relative facilité de création d’applications que notre article est consacré.

Il est sans doute important de retenir deux informations essentielles concernant cette révolution technologique en train de naitre :

1. Cet écosystème d’applications va à terme se substituer aux programmes installés sur votre machine, sur le “desktop” en s’appuyant ostensiblement sur le Cloud Computing.
2. Le marché de la création de site a toutes les chances d’être litteralment atomisé, laminé par l’apparition de ces nouvelles plate-formes. Le paradigme n’est plus d’avoir un site sous un CMS ou pas, la priorité est d’avoir une API capable de se greffer à toutes ses plates-formes existantes et futures qui font du navigateur, le logiciel à tout faire et l’interface unique pour atteindre l’utilisateur final, en somme le nouveau système d’exploitation de la prochaine décennie.

Pour se familiariser avec le Cloud Computing, vous pouvez vous reporter à un de nos précédents articles qui traite de la menace écologique que peut constituer le cloud computing mais en présente aussi les avantages.

• Ecologie, HTML5, Flash, cloud computing – Un aperçu de l’impact écologique de la société de l’information

Créer un extension

La première chose à faire est de créer ce que google nomme un manifest file qui sera une sorte de descriptif de ce que votre webapp sera. Un classique en programmation. Par analogie, pour ceux d’entre vous qui connaissent le développement de module sous Drupal par exemple cela équivaut au fichier .info

Il existe deux variables importantes à retenir : elles doivent impérativement être présentes dans votre fichier “manifest” au format .json

“web_url”
Specifies the page that the browser shows when a user launches the app.

“urls”
Specifies the starting URLs of all other web pages that are in the app. In this example, both http://mysubdomain.example.com/page1.html and http://mysubdomain.example.com/subdir/page2.html would be in the app. You don’t need to specify the URLs for included files or for assets such as images. Currently, the domain name must be followed by at least one character (“/”).

Pour information, dans un fichier .json, vous êtes en javascript, vous pouvez donc placer des commentaires pour expliciter votre code.

/* ceci est une première façon de faire un commentaire */
// ceci est une deuxième façon de faire un commentaire

La version du JSON effectivement publiée, cette fois-ci sans les commentaires.
C’est un pré-requis pour publier sur la plate-forme.

	{
	  "name": "3wdoc Test App 1",
	  "description": "3WDOC Studio will come soon !",
	  "version": "0.0.0.1",
	  "icons": {
	    "128": "3wdoc_128.png"
	  },
	  "app": {
	    "urls": [
	      "http://www.3wdoc.com/"
	    ],
	    "launch": {
	      "web_url": "http://www.3wdoc.com/"
	    }
	  }
	}

Le fichier image 3wdoc_128.png

Charger votre extension

Empaqueter votre extension

Il faut sélectionner le répertoire contenant votre extension

Une fois l’opération terminée, vous possédez deux fichiers .pem et .crx

L’extension de fichier .crx est une extension liée au navigateur Google Chrome. Ce fichier est une sorte de fichier d’archive. Il n’est utile que si vous publiez votre extension en utilisant le Chrome Developer Dashboard ou encore lorsque vous souhaitez distribuer une version non-public, par exemple, pour les testeurs alpha de votre fichier .crx.
Quant au fichier .pem, il contient la clé privée, qui vous sera utile pour les mises à jour ultérieures de votre webapplication sur Chrome Webstore.

Source : http://code.google.com/chrome/extensions/packaging.html

Créer une webapp

C’est l’étape suivante, elle consiste essentiellement à faire un fichier zip de votre répertoire. Deux choses importantes avant de vous lancer dans l’envoie de votre fichier .zip contenant votre web application Google Chrome Webstore.

1. Il est important d’enlever l’ensemble de vos commentaires du fichier .json qui sert de base à votre webapplication. C’est ce fichier qui sera placé sur la plate-forme Google Chrome Webstore.
2. Il faut pour publier votre webapp que le nom de domaine attaché à votre webapp soit vérifié par Google. C’est à dire que Google s’assure que vous êtes bien le titulaire de ce nom de domaine.

Un mode de vérification possible pour attester de la propriété du domaine : Il vous suffit d’insérer une balise meta dans le fichier index de votre site

<meta name="google-site-verification" content="a_jk_98-anKDojGPC9t9JKcHEs8mjqH4oVsPvB-Plls" />

Faire sa page sur le Google Chrome Webstore

Il faut se rendre ensuite cette adresse, dans le tableau de bord que met à votre disposition Google :
https://chrome.google.com/webstore/developer/dashboard

Il faudra ensuite au minimum choisir une langue et envoyer au moins une capture d’écran de votre application. La taille de l’image doit faire 400x275 en pixels.

Si vous souhaitez personnaliser plus encore cette page, vous pouvez ajouter un en-tête spécifique de la taille suivante 570x275 en pixels.

N’oubliez pas d’enlever les commentaires du fichier .json

N’oubliez pas de faire valider votre nom de domaine au préalable

Quelques personnalisation possibles de votre page : une capture d’écran de votre application en 400x275 pixels

Quelques personnalisation possibles de votre page : un en-tête spécifique de 400x275 pixels

Quelques vidéos

4 vidéos plutôt synthétiques sur des points essentiels pour créer une bonne webapp sur le Google Chrome Webstore.

1. VIDEO 1 – Une bonne introduction au développement sur le coeur applicatif des google app. C’est en python forcément !
2. VIDEO 2 – Une réponse essentielle à la question mais qu’est qu’une web app ?
3. VIDEO 3 – Les gestes qui sauvent pour créer sa première extension pour Chrome !
4. VIDEO 4 – Pas à pas la dernière étape de publication d’une web app sur le Google Chrome Webstore

VIDEO 1 – Developing and deploying an application on Google App Engine

VIDEO 2 – Chrome Web Store – What’s a web app?

VIDEO 3 – Google Chrome Extensions: How to build an extension

VIDEO 4 – How to upload your webapp to the chrome webstore : 5 mn

En savoir plus