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 :
Ce qui va ouvrir un onglet avec le contenu suivant :
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.
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.
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 :
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 :
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 :
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.
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.