Sous Google Chrome j’aime bien avoir des raccourcis vers certains sites quand j’ouvre un nouvel onglet. Pour faciliter ma navigation j’installe donc des applications du genre raccourci vers Twitter ou raccourci vers Pocket.
Sauf qu’il y a quelques temps je souhaitais ce type d’appli pour Google Plus et pas moyen d’en trouver une! Vu la facilité de création de ces machins, je vais vous expliquer comment créer une application simple pour Google Chrome.
Une Web app (apparemment c’est comme ça que ça s’appelle) est composée de deux fichiers principalement: l’icône de l’application et son code (appelé manifest). Vous pouvez commencer par la partie que vous voulez, ici je commence par l’icône.
L’image finale doit avoir une taille exacte de 128×128 pixels, sauf que au sein de cette image il est préférable que votre icône soit d’une taille réelle de 96×96 pixels, laissant ainsi une bordure de 16pixels de chaque côté de l’icône. Je pense que cette recommandation est suggérée car lorsque l’on clique sur l’icône d’une Web app celle-ci s’agrandit légèrement (indication permettant à l’utilisateur de capter qu’il avait cliqué). Votre image doit être au format PNG.
Pour en savoir plus lisez la documentation sur les images pour les applications web google chrome.
Le code est ici très simple, on souhaite juste lancer le chargement d’une URL, il se décompose donc en 3 parties: la description, l’action, et les permissions. Le délimitations du code permettant de savoir quand il commence et quand il se termine sont celles régulièrement employées pour délimiter le code d’une fonction, à savoir les accolades ouvrantes/fermantes { et }
On commence donc notre code par l’accolade ouvrante { et on décrit notre application:
{ //on commence notre code
"name": "Google Plus",
"description": "A simple shortcut to Google Plus",
"version": "1.0",
"icons": { "128": "128.png"},On y renseigne le nom de l’app, sa description, son numéro de version et le nom de fichier de l’icône. C’est pas bien compliqué, le point important est surtout de bien mettre le bon nom de fichier pour votre icône qui dans mon cas est 128.png
Ensuite il faut rajouter que l’on souhaite lancer une URL lorsque l’on clique sur notre application:
"app": {
"urls": ["http://yann.me"],
"launch": { "web_url": "http://plus.google.com" }
},La première URL est l’adresse de votre site, ici yann.me et la seconde est l’adresse du site que l’on souhaite lancer en l’occurence Google plus.
On fini notre code par les permissions et l’accolade fermante }
"permissions": ["unlimitedStorage","notifications"]
} //on termine notre codeEn indiquant «unlimitedStorage» et «notifications» dans les permissions, on autorise l’application à utiliser les fonctionnalités de HTML5.
{
"name": "Google Plus",
"description": "A simple shortcut to Google plus",
"version": "1.0",
"icons": { "128": "128.png"},
"app": {
"urls": ["http://yann.me"],
"launch": { "web_url": "http://plus.google.com" }
},
"permissions": ["unlimitedStorage","notifications"]
}Placez votre code dans un fichier nommé «manifest.json»
Vous vous retrouvez donc avec un dossier contenant manifest.json et votre icône. Maintenant comment faire pour installer ça?
C’est facile: vous allez dans Google Chrome puis dans Outils -> Extensions, vous cochez la case «Mode développeur» et vous aurez accès au bouton « Charger l’extension non empaquetée » qui vous permettra de sélectionner votre application.
Si vous le souhaiter, vous pouvez également empaqueter au format CRX votre application avec le bouton «Empaqueter l’extension».
Vous trouverez plus de détails dans la documentation des applications web pour Google Chrome.
Commentaires