Création d’une extension Chrome (Pt.1)
Google a introduit très récemment un système d’extensions dans son navigateur Chromium (La version développeur de Chrome).
Ce système est encore en développement mais il permet d’entrevoir les futures extensions qu’il sera possible de faire dans Chrome.
Je vais vous présenter ici un petit tutoriel en français.
Télécharger Chromium
Tout d’abord il faut télécharger la version de développeur de Chrome. La compilation du projet n’étant pas très simple d’accès (c’est peu de le dire), nous irons récupérer directement un installeur. Heureusement il existe un dépôt qui offre des versions compilées du navigateur, mis à jour très fréquemment. Ça se passe ici : http://build.chromium.org/buildbot/snapshots/.
Pour l’instant seul la version Windows supporte le système d’extension. Il suffit dans d’aller dans le dossier « chromium-rel-xp » et récupérer le fichier « mini_installer.exe » de la version la plus récente.
Chromimum s’installe dans les « Documents and Settings » de l’utilisateur courant sous Windows Xp. Par exemple « C:\Documents and Settings\matoeil\Local Settings\Application Data\Chromium\Application\chrome.exe »
Créer son extension Chromium
Cette partie est reprise du tutoriel présent sur le site de chromium et adaptée.
- Créez un dossier sur votre ordinateur qui va contenir le code de votre extension. Pour ce tutoriel, nous supposerons que le dossier en question sera « c:\myextension », mais il peut être placé n’importe où.
- Dans ce dossier, créez un fichier texte nommé « manifest.json » et écrivez dans celui-ci:
{ "name": "Ma première Extension", "version": "1.0", "description": "La première extension que je fais.", "toolstrips": [ "my_toolstrip.html" ] }
Note : Attention à bien encoder les fichiers en UTF-8
- Ajoutez dans le dossier un fichier texte nommé « my_toolstrip.html » et mettre le code suivant dans celui-ci:
<div class="toolstrip-button"> <span>Hello, World!</span></div>
- Trouvez le raccourci Chromium (par exemple, faites un clic-droit sur l’icône Chromium placé sur votre bureau et choississez « Propriétés ») et ajoutez dans ces paramètres de lancement « –enable-extensions » et « –load-extension ». Par exemple :
chrome.exe –enable-extensions –load-extension= »c:\myextension » - Rédémarrer Chromium. Vous devriez voir apparaître votre bouton dans une nouvelle barre d’outils présent dans le bas de la fenêtre de votre navigateur.
- Vous voulez peut-être que le bouton fasse quelque chose? Ok, créez un nouveau fichier texte, toujours dans le même dossier, et nommez-me « hello_world.html », et mettre ce code dedans.
- Maintenant changez le code dans « my_toolstrip.html » pour qu’il ressemble à cela:
<div class="toolstrip-button" onclick="window.open('hello_world.html')"> <span>Hello, World!</span></div>
- Redémarrez Chromium et cliquez sur le bouton.
- Vous pouvez faire une petite dance, vous venez de créer votre première extension Chromium
Vous trouverez ici tous les fichiers de cette extension.