Introduction à la programmation d'une extension Google Chrome

Date de publication : 10 décembre 2009

Par Sylvain Dangin
 

Ce tutoriel a pour but d'initier au développement d'une extension pour Google Chrome à l'aide d'un exemple simple.
7 commentaires Donner une note à l'article (5)

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Introduction
I-A. Connaissances nécessaires
I-B. Préparer l'environnement de travail
II. Créer une extension
II-A. Le commencement
II-B. Installation de l'extension
II-C. Mise en place de l'icône
II-D. Le popup
II-E. Interaction avec Google Chrome
III. Amélioration et debuggage
IV. Conclusion


I. Introduction

Ce tutoriel a pour but d'avoir une version française et améliorée (si possible) de celui de Google (http://code.google.com/chrome/extensions/getstarted.html).


I-A. Connaissances nécessaires

Pour comprendre ce tutoriel, il est nécessaire de connaître :

  • Les bases du langage HTML
  • Les bases du langage Javascript

I-B. Préparer l'environnement de travail

Pour développer une extension pour Google Chrome vous aurez besoin de :

  • Une version de Google Chrome permettant l'utilisation d'extensions (>= 4.0.429)
  • Un répertoire sur votre disque dur
  • Un éditeur de texte

II. Créer une extension

Le but de ce tutoriel va être de créer une extension pas à pas. La finalité sera un bouton ajouté à Google Chrome qui affichera un popup sous forme d'info-bulle contenant des liens vers 4 favoris sur lesquels on pourra cliquer pour accéder à la page.


II-A. Le commencement

Sur votre disque dur, créez un répertoire dans lequel vous allez éditer un fichier nommé manifest.json. Il va contenir les informations de l'extension.

  • name : Son nom (indispensable)
  • version : Son numéro de version (indispensable)
  • description : Sa description (optionnelle)
Ces informations seront codées sous cette forme : 

				{
				 "name": "Favoris Rapide",  // Nom
				 "version": "1.0",  // Version
				 "description": "Accéder à 4 favoris rapidement" // Description
				}
Pour réaliser des commentaires, il est nécessaire de mettre //, toute la suite de la ligne sera ignorée.

Comme on peut le constater, la syntaxe est très simple. Les paramètres comme les valeurs doivent être mis entre guillemets. Il faut faire attention à ne pas oublier les virgules entre chaque paramètre.


II-B. Installation de l'extension

Une fois le fichier enregistré, allez dans le panneau des extensions de Google Chrome :

Menu d'accès aux extensions
Ce qui va ouvrir un onglet avec le contenu suivant :

Panneau de configuration des extensions
En cliquant sur Developer mode, vous accèderez à certaines fonctions aidant au développement d'extension.

  • Load unpacked extension... : Charger une extension contenue dans un répertoire
  • Pack extension... : Créer un package d'extension
  • Update extensions now : Mise à jour de toutes les extensions
Cliquez sur Load unpacked extension..., puis indiquez votre répertoire de travail pour charger votre extension, ce qui aura pour effet de la rajouter à la liste.

Panneau de configuration des extensions avec l'extension créée
On voit donc que les informations sont bien affichées.


II-C. Mise en place de l'icône

Nous allons donc maintenant ajouter un icône à Google Chrome. Pour faire cela, il faudra ajouter un paramètre browser_action à notre fichier manifest.json en spécifiant certaines informations :

  • default_icon : Chemin de l'icône qui sera affiché (indispensable)
  • default_title : Titre affiché lors du survol de la souris sur l'icône (optionnel)
  • popup : Page qui pourra être ouverte à la façon d'une info-bulle lorsque l'utilisateur clique sur l'icône (optionnel)
Google conseille d'utiliser un icône de 19x19 pixels. Vous pouvez l'enregistrer sous différents formats. Pour ce tutoriel, il faudra créer un icône quelconque et de l'appeler icon.png.

En ajoutant ces informations au fichier manifest.json, nous obtenons : 

				{
				 "name": "Favoris Rapide",
				 "version": "1.0",
				 "description": "Accéder à 4 favoris rapidement",
				 "browser_action": {
				  "default_icon": "icon.png",  // Icone de l'extension
				  "default_title": "Favoris Rapide"  // Titre affiche sur le titre
				 }
				}
Pour voir le changement, il sera nécessaire de retourner à la liste des extensions puis de cliquer sur Rafraîchir, ce qui aura donc pour effet d'ajouter l'icône à Google Chrome.

Affichage de l'icône dans Google Chrome

II-D. Le popup

Maintenant que l'icône est en place, nous allons rajouter une page qui va s'ouvrir sous forme d'info-bulle sous le bouton. Cette page doit être écrite au format HTML. Ce fichier va se nommer, pour l'exemple, popup.html et contiendra pour le moment une simple liste avec des liens : 

				<html>
				 <head>
				  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				 </head>
				 <body>
				  <ul>
				   <li><a href="http://www.google.fr">Google</a></li>
				   <li><a href="http://mail.google.fr">Gmail</a></li>
				   <li><a href="http://www.developpez.com">Developpez.com</a></li>
				   <li><a href="http://www.01net.com">01net</a></li>
				  </ul>
				 </body>
				</html>
Un banal fichier HTML respectant les standards. Cependant il faudra de modifier le fichier manifest.json pour lier le bouton au fichier popup.html : 

				{
				 "name": "Favoris Rapide",
				 "version": "1.0",
				 "description": "Accedér à 4 favoris rapidement",
				 "browser_action": {
				  "default_icon": "icon.png",
				  "default_title": "Favoris Rapide",
				  "popup": "popup.html"
				 }
				}
Une fois de plus, cliquez sur Rafraichir pour avoir le résultat suivant :

Affichage du popup
Il est très simple d'embellir ce "popup" en utilisant un peu de CSS. Pour ce tutoriel, il sera plus facile de le mettre dans le même fichier, il faudra donc insérer ce code entre les balises <head> : 

				<style>
				 ul, li
				 {
				  list-style: none;
				  padding: 0;
				  margin: 0;
				 }
				
				 a
				 {
				  text-decoration: none;
				  font-weight: bold;
				  font-size: 16px;
				  display: block;
				  color: black;
				 }
				
				 a:hover
				 {
				  background-color: #DDDDDD;
				  -webkit-border-radius: 5px;
				 }
				</style>
Enfin la possibilité d'utiliser les standards CSS sans avoir à se soucier du résultat sous Internet Explorer

Ceci nous donne un résultat plus convenable :

Affichage du popup

II-E. Interaction avec Google Chrome

Le popup et les liens sont en place mais pourtant, le fait de cliquer sur les liens ne produit aucun effet. Il va falloir utiliser le javascript pour interagir avec Google Chrome. Nous allons donc modifier le fichier popup.html en ajoutant un évènement onclick sur tous les liens : 

				 <li><a href="" onclick="open_tab('http://www.google.fr')">Google</a></li>
				 <li><a href="" onclick="open_tab('http://mail.google.com')">Gmail</a></li>
				 <li><a href="" onclick="open_tab('http://www.developpez.com')">Developpez.com</a></li>
				 <li><a href="" onclick="open_tab('http://www.01net.com')">01net</a></li>
Puis nous allons écrire la fonction open_tab : 

				function open_tab(url)
				{
				  chrome.tabs.create({"url": url});
				}
Ici, on utilise la fonction create du module chrome.tabs permettant l'utilisation des onglets. Elle prend en paramètre un objet createProperties dont les attributs sont :

  • windowsId : Identifiant de la fenêtre
  • index : Position dans les onglets
  • url : URL de la page internet à ouvrir
  • selected : False si le nouvel onglet ne doit pas être sélectionné
Les informations sur les différentes APIs de Google Chrome sont accessibles à la page suivante : http://code.google.com/chrome/extensions/api_index.html.

Tous ces paramètres sont optionnels. C'est pourquoi seule l'URL a été utilisée dans l'exemple. Cependant l'accès à ce module doit être indiqué dans le fichier manifest.json : 

				{
				 "name": "Favoris Rapide",
				 "version": "1.0",
				 "description": "Accéder à 4 favoris rapidement",
				 "browser_action": {
				  "default_icon": "icon.png", 
				  "default_title": "Favoris Rapide", 
				  "popup": "popup.html"
				 },
				 "permissions": ["tabs"] // Ajoute la permission au module des onglets
				}
Voici le listing final de popup.html : 

				<html>
				 <head>
				  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				  <style>
				   ul, li
				   {
				    list-style: none;
				    padding: 0;
				    margin: 0;
				   }
				
				   a
				   {
				    text-decoration: none;
				    font-weight: bold;
				    font-size: 16px;
				    display: block;
				    color: black;
				   }
				
				   a:hover
				   {
				    background-color: #DDDDDD;
				    -webkit-border-radius: 5px;
				   }
				  </style>
				  <script type="text/javascript">
				   function open_tab(url)
				   {
				    chrome.tabs.create({"url": url});
				   }
				  </script>
				 </head>
				 <body>
				  <ul>
				   <li><a href="" onclick="open_tab('http://www.google.fr')">Google</a></li>
				   <li><a href="" onclick="open_tab('http://mail.google.com')">Gmail</a></li>
				   <li><a href="" onclick="open_tab('http://www.developpez.com')">Developpez.com</a></li>
				   <li><a href="" onclick="open_tab('http://www.01net.com')">01net</a></li>
				  </ul>
				 </body>
				</html>
Voila, un dernier rafraîchissement et vous avez maintenant une extension opérationnelle que vous pouvez modifier à votre guise.


III. Amélioration et debuggage

Si vous désirez améliorer le fichier popup.html puis par la suite le debugger comme une page web, vous allez devoir l'ouvrir dans chrome en utilisant l'identifiant de l'extension que l'on trouve sur la page des extensions :

Id de l'extension
Dans cet exemple, l'identifiant est hafjcklnjbeofmmefhhpeabpjdkepmai, pour accéder à la page popup.html, il faudra se rendre à l'url : chrome-extension://hafjcklnjbeofmmefhhpeabpjdkepmai/popup.html.

Debuggage de l'extension
Les modifications seront donc plus faciles à faire. Pour ouvrir le debugger, faites Ctrl+Maj+I. Pour la console javascript Ctrl+Maj+J.


IV. Conclusion

Google Chrome permet de réaliser des extensions très facilement avec peu de connaissances. Au fil des versions, certaines informations pourront ne plus être valides mais si vous suivez ces changements, il sera aisé de mettre à jour vos extensions. N'hésitez pas à me transmettre vos suggestions pour enrichir et améliorer ce document notamment si vous trouvez des explications peu claires, des passages de code non optimisés, ou toute autre remarque. Elles seront les bienvenues.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Développement Web

Blogs

Hébergement

 
Partenaires

Hébergement Web