Tutorial – Créer une extension Google Chrome de A à Z

Avec le lancement du Chrome Web Store, j’ai eu envie d’apporter ma propre contribution. J’ai donc créé une extension pour ce si beau navigateur qu’est Google Chrome. Bon… Je l’avoue je suis un Google addict icon biggrin Tutorial   Créer une extension Google Chrome de A à Z !

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

A l’abordage les amis ! 8)

Partie codage :

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 :

{
  "manifest_version": 2,
  "name": "Mon Extension",
  "version": "0.1",
  "description": "Ouahhh ! C'est ma premiere extension Chrome !",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "fichier.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. Si vous êtes pressé, vous pouvez télécharger le pack de mes 3 icônes ici.

5. Créez un fichier HTML (ici, fichier.html) et placez-le dans le dossier.

6. Voici ce que vous allez mettre dans ce fichier :

<style>
body {
  min-width:180px;
  overflow-x:hidden;
}

</style>
<img src="http://goo.gl/ZXdlD"><img>
<br/>
HELLO WORLD !

Partie navigateur :

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

ResFinale Tutorial   Créer une extension Google Chrome de A à Z

 

You may also like...

11 Responses

  1. Led dit :

    une erreur s’affiche à chaque fois où j’essaye de « Charger l’extension non empaquetée »
    (Could not load extension from « C:\\….. » The ‘manifest_version’ key must be present and set to 2 (without cotes) )

  2. Led dit :

    En faite, j’ai cherché sur le net et j’ai trouvé la solution
    après la version 23 de GooGle Chrome et pour que le scipt fonctionne correctement, nous somme obligé de modifier le fichier manifest.json et d’ajouter cette ligne « manifest_version »: 2,
    Cependant après avoir ajouté ce bout de code j’ai une une icône toute blanche tout en haut a droite de mon navigateur mais en y cliquant le popup ne s’affiche pas !!! …

    • KoJi dit :

      Hey,
      J’ai le même soucis que toi…
      Mon icône d’extension apparaît en haut mais aucun popup ne s’ouvre lorsque je clique dessus…

  3. demenvil dit :

    Idem pour moi.
    La popup ne s’affiche pas.
    Je ne pense pas que le tuto soit à jours.
    Rien que le fait de devoir rajouter la version du manifest utilisé.
    A++

  4. demenvil dit :

    Voici le manifest valide pour une application en popup :

    {
    « manifest_version »: 2,
    « name »: « Mon Extension »,
    « version »: « 0.1″,
    « description »: « Ouahhh ! C’est ma premiere extension Chrome ! »,
    « icons »: { « 16″: « icon_016.png »,
    « 48″: « icon_048.png »,
    « 128″: « icon_128.png » },
    « browser_action »: {
    « default_icon »: « icon_016.png »,
    « popup »: « fichier.html »,
    « default_popup » : « fichier.html »
    },
    « permissions »: [
    "history"
    ]
    }

    Il faut bien rajouter cette ligne : « default_popup » : « fichier.html » dans l’objet browser_action.

    Voila bonne continuation !

  5. Adrien dit :

    Salut, si d’autre personne se retrouvent dans cette impasse c’est parce qu’il y à eu des mises à jour et ce tutoriel est obsolète.

    Pour l’onglet qui ne s’affiche pas il faut remplacer « popup » par « default_popup  »
    Et c’est comme ca pour plusieurs autre argument (voir faq -> https://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html ) En

  6. sangorys dit :

    A ce jour, il y a 2 modifications à faire sur ce tuto sur manifest.json :
    o Ajouter :  » manifest_version « : 2,
    o Remplacer : « popup » par « default_popup »

    Les internautes apprécieront si l’article était mis à jour !

    Merci

  7. Samir dit :

    Bonjour,
    j’ai vu que a votre fichier manifest.json tu n’a pas ajouter l’instruction : « manifest_version »: 2,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>