Créer une extension Google Chrome

Fichier attachéTaille
Package icon Fichiers de l'extension MyIP30.05 KB

Depuis quelque temps je m'amuse avec le développement de petites extensions pour Google chrome. Je souhaite ici partager ce que j'en ai appris (pour ceux que cela intéresse et qui n'ont pas peur de l'anglais, la doc est ici).


Pour rappel, une extension est un petit additif qui vient se greffer à votre navigateur permettant d'en étendre les possibilités.

Par exemple, une des extensions que j'utilise le plus est Google Mail Checker, développée par Google, et qui vous permet de recevoir des notifications instantanées lorsque vous recevez un nouvel e-mail: grâce à cette extension, je n'ai plus besoin d'aller constamment dans gmail pour vérifier si j'ai du courrier.

Alors bien sûr, pour pouvoir utiliser cette extension, vous devez forcément avoir un compte gmail. Mais si vous utilisez autre chose que gmail, il est fort probable qu'il existe une extension permettant l'équivalent.


A l'heure où j'écris ces lignes, il en existe un peu plus de 13 000... Il y a donc de quoi s'amuser!
Ce qu'il faut savoir avant tout, c'est que créer une extension pour chrome est quelque chose de facile. Si vous savez faire un site web, alors vous saurez créer une extension.


Les extensions sont en effet construites avec du html et du JavaScript, principalement. Notez que pour des raisons de sécurité (mesure anti-piratage) Google vous demandera de payer 5$ pour pouvoir accéder à leur plateforme de création d’extensions. Plus d’infos ici : http://applications.developpez.com/actu/20145/La-galerie-d-extensions-de-Chrome-va-devenir-payante-pour-les-developpeurs-les-frais-d-enregistrements-lutteraient-contre-les-malwares/

Ma première extension

J’ai créé il y a quelque temps une extension ultra simple dont le seul but est d’afficher votre adresse IP. Elle se trouve ici.
Hé bien nous allons voir comment je m’y suis pris pour développer cette mini extension.


Pré requis :

  • Avoir un site web capable d’exécuter du PHP
  • Avoir le navigateur Google Chrome ;-)

Il existe certainement d’autres manières de faire, mais voilà comment j’ai procédé. J’ai créé une bête page web qui affiche l’adresse IP de celui qui la visite.

  • Créez un fichier PHP contenant le code ci-dessous :


echo $_SERVER['REMOTE_ADDR'];
?>


Ce code PHP affiche votre adresse IP. Pour voir le résultat, c’est par ici : http://www.astrofiles.net/WDG/chrome/ext/MyIP/

  • Créez un dossier sur votre ordinateur qui va contenir les fichiers de l’extension.
  • Créez un fichier que vous nommerez précisément manifest.json. Ce fichier contient toutes les informations nécessaires à l’extension, sous forme de clés et de valeurs.

Contenu de manifest.json :



{
"name": "My IP",
"version": "1",
"description": "Shows instantly your public ip adress",
"permissions": [
"notifications"
],
"browser_action": {
"default_icon": "myip16.png",
"popup": "popup.html"
},
"icons": {
"16": "myip16.png",
"48": "myip48.png",
"128": "myip128.png"
}
}



Name : Le nom de votre extension (obligatoire)

Version : la version de votre extension (obligatoire). Vous devez changer le numéro de version à chaque fois que vous mettez à jour votre extension.

Description : Une description qui indiquera à vos utilisateurs à quoi sert cette extension.

Permissions : Lorsque vous créez une extension, cela vous donne la possibilité d’interagir avec l’ordinateur qui exécute votre extension. Vous indiquez donc de quelles permissions vous avez besoin pour que votre extension puisse fonctionner. Ici nous n’avons besoin d’aucune permission particulière pour que notre extension s’exécute. J’ai mis « notifications » ici en permissions, mais en réalité je n’en ai pas besoin. C’est une permission qui permet d’afficher un message sur le bureau de l’ordinateur, comme par exemple « Vous avez un nouvel e-mail ! ».

Browser_action : Cette instruction signifie que l’on veut qu’une icône s’affiche à droite de la barre d’adresse de notre navigateur (default_icon). Elle signifie également que lorsqu’on clique sur cette icône, une page (html) va s’ouvrir (popup.html). Cela va ouvrir une mini-fenêtre juste sous votre icône.

Icons : La liste des icônes de votre extension à utiliser sous différents formats. Sur la page des extensions Google chrome, vous noterez que chaque extension dispose d’icônes plus ou moins grandes : pour l’affichage sur les pages des extensions Google, pour la gestion des extensions, etc.… Il vous faut donc créer quelques icônes sexy pour votre extension.
Veuillez noter qu’il existe beaucoup d’autres options que l’on peut entrer dans le manifest.json. Vous pouvez les trouver ici :http://code.google.com/chrome/extensions/manifest.html
Dans votre dossier contenant le fichier manifest.json, créez un fichier popup.html. C’est le fichier qui sera appelé lors du clic sur votre bouton d’extension.


Le fichier popup.html contient toutes les informations concernant l’exécution et l’affichage de votre extension.
Contenu de popup.html :




My IP Adress