[tuto] Créer une extension pour Google Chrome

Depuis la version 4, Chrome gère des extensions tout comme Firefox le faisait déjà depuis quelques temps. Ces extensions sont programmées en HTML/Javascript avec une API supplémentaire pour contrôler certaines fonctionnalités du navigateur.

Extension pour Google Chrome – Le principe

Le principe est simple et clair, en 4 parties :

• une page HTML de “background”
• un script Javascript sera exécuté sur les pages concernées pour ajouter des fonctionnalités à cette même page.
• éventuellement une page d’options
• une page HTML “popup” avec une icône associée

Le tout organisé grâce à un fichier JSON pour régulariser l’extension.

Créer une extension

Préparer le navigateur

Premièrement, il faut passer le navigateur en mode développeur :

tapez chrome://extensions/ dans la barre d’adresses

Puis ouvrez le mode développeur :

De là, il sera possible de charger l’extension en mode développeur.

Ensuite, une fois que vous aurez chargé l’extension il sera possible de la recharger, la désactiver ou la désinstaller. D’autres informations complémentaires sont affichées :

Décrire l’extension

L’extension doit être décrite dans un fichier JSON appelé Manifest.

http://code.google.com/chrome/extensions/manifest.html

Ce fichier Manifest contient les informations qui font des pages HTML et des fichier Javascript une extension et non une simple page web.

Le nom, le contexte d’application, l’icône… tout est décrit ici.

Construire l’extension

Le centre reste le fichier Javascript qui s’appliquera à l’ensemble des pages décrites dans le Manifest. Le navigateur intègre le script dans toutes les pages. Les possibilités du Javascript sont énormes à condition seulement de connaitre les pages auxquelles elles s’appliquent. Il faut réfléchir à des méthodes simples et efficaces pour relever les évènements de la page ou retrouver une zone de texte à remplir.

Par exemple, évitez de vous baser sur l’ID ou le nom d’un élément (zone de texte, bouton, balise div, …) qui est susceptible de changer. Si des outils tels que le GWT (Google Web Toolkit) ou JSQuery ont été utilisés, cette technique ne fonctionnera pas.

L’API de Chrome vous permettra, par exemple, d’accéder à l’onglet actif ou encore de manipuler la barre omnibox :http://code.google.com/chrome/extensions/api_index.html

La page popup peut utiliser le même fichier Javascript que celui qui servira à toutes les pages.

Quelques conseils

Pour construire une extension, il ne faut pas voir ça comme une page web malgré le fait que ce soit du HTML et du Javascript.

Si vous faites une extension qui agit sur des pages, elle doit plutôt être construite comme un programme qui doit analyser et modifier une page existante. Par exemple, récupérer un clic sur un zone de texte ou encore une combinaison de touches. L’extension est un greffon qui se base à l’origine sur une page web chargée par le navigateur.

Attention aux boucles infinies et aux doublons par rapport à des fonctions javascript existantes. Une extension ne doit pas ralentir le navigateur ou même tuer l’intérêt d’une page ou d’une application web.

Le navigateur Chrome est simple, l’API et le développement d’extensions sont simples. Par conséquent, une extension doit être simple et se contenter d’une seule fonctionnalité. Pour des choses plus complexes, il existe les Applications Web dans Chrome que je décrirai plus tard.

Un tutoriel complet est présent sur le site Zengularity