Ce tutoriel va vous apprendre à créer une très simple extension pour Chrome. Vous allez ajouter une icône qui, lorsqu’on clique dessus, affiche une page générée automatiquement. L’icône et la page ressembleront à ça :
1. Commençons par créer un dossier qui va contenir tous les fichiers de l’extension.
2. Créez dans ce dossier le fichier « manifest.json » . Ce fichier sera le manifeste… Quèsaco ?! C’est un fichier au format JSON qui fournit les informations importantes de votre extension.
3. Voici ce que vous allez mettre dans ce fichier :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{ "name" : "Mon Extension" , "version" : "0.1" , "description" : "Premiere extension Chrome pour Icare Design!" , "icons" : { "16" : "icon16.png" , "48" : "icon48.png" , "128" : "icon128.png" }, "browser_action" : { "default_icon" : "icon16.png" , " : "index.html" }, "permissions" : [ "history" ] } |
(vous pouvez vous rendre sur cette page pour en apprendre beaucoup plus sur le manifeste et son utilité.)
4. Créez 3 icônes au format PNG et aux dimensions suivantes : 16×16, 48×48 et 128×128. Puis placez-les dans le même dossier.
Bien entendu, il faut nommer ces fichiers du même nom que dans le manifeste.
5. Créez un fichier HTML (ici, index.html) et placez-le dans le dossier.
6. Voici ce que vous allez mettre dans ce fichier :
1
2
3
4
5
6
7
8
9
10
|
< style > body { min-width:180px; overflow-x:hidden; } </ style > < br /> HELLO WORLD ! |
1. Ouvrez le navigateur Google Chrome.
2. Cliquez sur et choisissez « Outils » puis « Extensions ».
3. Passez en mode développeur en cliquant sur .
4.Cliquez sur « Charger l’extension non empaquetée » et choisissez le dossier contenant tous nos fichiers.
L’icône de votre extension apparaît ! Il suffit de cliquer sur l’icône et un pop-up apparaît