Comment créer une extension Google Chrome

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 :

LooksLikeThis 300x169 Tutorial   Créer une extension Google Chrome de A à Z

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",
    "default_popup": "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>
<img src="http://goo.gl/ZXdlD"><img>
<br/>
HELLO WORLD !

1. Ouvrez le navigateur Google Chrome.

2. Cliquez sur toolsmenu Tutorial   Créer une extension Google Chrome de A à Z et choisissez « Outils » puis « Extensions ».

3. Passez en mode développeur en cliquant sur Mode Dev Tutorial   Créer une extension Google Chrome de A à Z.

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 icon wink Tutorial   Créer une extension Google Chrome de A à Z

Comments are closed.