Concours d'extensions Google Chrome : apprendre à créer sa 1ère extension

Google chromeGoogle France a lancé un concours d’extensions Chrome réservé aux développeurs français , à l’occasion de la diffusion de la conférence annuelle Google I/O. Vous trouverez plus d’informations ici :

https://sites.google.com/site/chromextensions/

Alors je me suis dis : c’est l’occasion d’apprendre quelque chose de nouveau tout en ayant un but, une dead-line, une récompense à la fin (et oui tous les participants auront droit à un t-shirt Google 😉 ) et bien sûr de vous faire partager tout ça !

Qu’est-ce qu’une extension ?

C’est une sorte de package que l’on active dans son navigateur et qui contient des fichiers HTML, CSS, JavaScript, des images, bref tout ce dont vous pouvez avoir besoin. Ces fichiers vont apparaître sous forme d’une icône à côté ou carrément dans la barre d’adresse de votre navigateur et vont interagir avec l’utilisateur, ses onglet ouverts, lui fournir des informations ,etc.

Il existe 2 types d’extensions :

  • les browser action : elles se trouvent à droite de la barre d’adresse de votre navigateur et fonctionnent silencieusement en permanence quelque soit le site sur lequel vous êtes.

browser extension

  • et les pages action : elles sont dans la barre d’adresse et proposent une action spécifique qui dépend du site que vous visitez.

page action

Chaque extension est composée de :

  • un manifeste (manifest.json) : ce fichier sert à initialiser l’extension et fournit au navigateur une description, une icône pour l’extension, la liste des permissions nécessaires si l’on accède à des sites distants, etc.
  • un ou plusieurs fichier HTML/CSS : ils permettent de mettre en forme le contenu de l’extension.
  • si besoin, des fichiers JavaScript ou autres dont vous pourriez avoir besoin.

Voici donc un petit tutoriel pour créer votre première extension pour Google Chrome.

  1. Vous devez créer un dossier dans lequel vous allez placer tous vos fichiers en rapport avec votre extension.
  2. Dans ce dossier, créez un fichier nommé « manifest.json » et copiez/collez le code suivant dedans :
  3. {
    "name": "MaGzine.Biz Extension",
    "version": "1.0",
    "description": "Pour ne rien louper sur MaG'zine.biz.",
    "browser_action": {
    "default_icon": "MaGzinebiz.png"
    },
    "permissions": [
    "http://www.magzine.biz/*",
    "http://*/*",
    "https://*/*",
    "tabs"
    ]
    }
  4. Enregistrez cette icône dans le même dossier :MaGzinebizCa y est votre extension peut être lancée via le menu Extensions de Chrome (clic sur l’icône de clé à molette puis sur Extensions) , déroulez les options du mode développeur (Mode développeur en haut à droite), cliquez  sur « Charger l’extension non empaquetée… » et enfin sélectionnez le dossier contenant votre extension. L’icône de votre extension devrait apparaître !
    extensionMagzine
    Nous allons maintenant lui faire faire quelque chose.
  5. Ouvrez votre fichier « manifest.json » et trouvez la ligne « browser_action »:[ et remplacez le bloc par ce code :
  6. "browser_action": {
    "default_icon": "MaGzinebiz.png",<strong>
    "popup": "popup.html"</strong>
    
  7. Dans votre dossier, créez un nouveau fichier appelé « popup.html » et ajoutez-lui ce code :
  8. [gview file= »http://www.magzine.biz/wp-content/uploads/codeextchrome.pdf »%5D

  9. Retournez sur la page de gestion des extensions et rechargez votre extension. Vous devriez obtenir ceci :extensionMagzine2

Félicitations !! Vous venez de créer votre 1ère extension pour Google Chrome 😀 Vous pouvez télécharger les sources de cette extension ici.

Pour aller plus loin, retrouvez toutes les infos sur le site des développeurs de Google (en anglais) : http://code.google.com/chrome/extensions/getstarted.html

Publicités

À propos de marinemat15

Diplômée ingénieure en informatique, j'aime particulièrement les technologies web et mobile. Je partage mes centres d'intérêt (high-tech, Android, linux et l'open source...) sur les réseaux sociaux (Twitter, Google ) et sur ce blog :-). Et quand je ne suis pas devant l'écran, je roule en moto !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :