Actualinet.fr

Depuis quelque temps je m'amuse avec le développement de petites extensions pour Google chrome. Je souhaite ici partager ce que j'en ai appris (pour ceux que cela intéresse et qui n'ont pas peur de l'anglais, la doc est ici).

Pour rappel, une extension est un petit additif qui vient se greffer à votre navigateur permettant d'en étendre les possibilités.

Par exemple, une des extensions que j'utilise le plus est Google Mail Checker, développée par Google, et qui vous permet de recevoir des notifications instantanées lorsque vous recevez un nouvel e-mail: grâce à cette extension, je n'ai plus besoin d'aller constamment dans gmail pour vérifier si j'ai du courrier.

Alors bien sûr, pour pouvoir utiliser cette extension, vous devez forcément avoir un compte gmail. Mais si vous utilisez autre chose que gmail, il est fort probable qu'il existe une extension permettant l'équivalent.

A l'heure où j'écris ces lignes, il en existe un peu plus de 13 000... Il y a donc de quoi s'amuser!
Ce qu'il faut savoir avant tout, c'est que créer une extension pour chrome est quelque chose de facile. Si vous savez faire un site web, alors vous saurez créer une extension.

Les extensions sont en effet construites avec du html et du JavaScript, principalement. Notez que pour des raisons de sécurité (mesure anti-piratage) Google vous demandera de payer 5$ pour pouvoir accéder à leur plateforme de création d’extensions. Plus d’infos ici : http://applications.developpez.com/actu/20145/La-galerie-d-extensions-de-Chrome-va-devenir-payante-pour-les-developpeurs-les-frais-d-enregistrements-lutteraient-contre-les-malwares/

Ma première extension

J’ai créé il y a quelque temps une extension ultra simple dont le seul but est d’afficher votre adresse IP. Elle se trouve ici.
Hé bien nous allons voir comment je m’y suis pris pour développer cette mini extension.

Pré requis :

• Avoir un site web capable d’exécuter du PHP
• Avoir le navigateur Google Chrome ;-)

Il existe certainement d’autres manières de faire, mais voilà comment j’ai procédé. J’ai créé une bête page web qui affiche l’adresse IP de celui qui la visite.

• Créez un fichier PHP contenant le code ci-dessous :

<?php
echo $_SERVER['REMOTE_ADDR'];
?>

• Créez un dossier sur votre ordinateur qui va contenir les fichiers de l’extension.
• Créez un fichier que vous nommerez précisément manifest.json. Ce fichier contient toutes les informations nécessaires à l’extension, sous forme de clés et de valeurs.

Contenu de manifest.json :

{
"name": "My IP",
"version": "1",
"description": "Shows instantly your public ip adress",
"permissions": [
"notifications"
],
"browser_action": {
"default_icon": "myip16.png",
"popup": "popup.html"
},
"icons": {
"16": "myip16.png",
"48": "myip48.png",
"128": "myip128.png"
}
}

Name : Le nom de votre extension (obligatoire)

Version : la version de votre extension (obligatoire). Vous devez changer le numéro de version à chaque fois que vous mettez à jour votre extension.

Description : Une description qui indiquera à vos utilisateurs à quoi sert cette extension.

Permissions : Lorsque vous créez une extension, cela vous donne la possibilité d’interagir avec l’ordinateur qui exécute votre extension. Vous indiquez donc de quelles permissions vous avez besoin pour que votre extension puisse fonctionner. Ici nous n’avons besoin d’aucune permission particulière pour que notre extension s’exécute. J’ai mis « notifications » ici en permissions, mais en réalité je n’en ai pas besoin. C’est une permission qui permet d’afficher un message sur le bureau de l’ordinateur, comme par exemple « Vous avez un nouvel e-mail ! ».

Browser_action : Cette instruction signifie que l’on veut qu’une icône s’affiche à droite de la barre d’adresse de notre navigateur (default_icon). Elle signifie également que lorsqu’on clique sur cette icône, une page (html) va s’ouvrir (popup.html). Cela va ouvrir une mini-fenêtre juste sous votre icône.

Icons : La liste des icônes de votre extension à utiliser sous différents formats. Sur la page des extensions Google chrome, vous noterez que chaque extension dispose d’icônes plus ou moins grandes : pour l’affichage sur les pages des extensions Google, pour la gestion des extensions, etc.… Il vous faut donc créer quelques icônes sexy pour votre extension.
Veuillez noter qu’il existe beaucoup d’autres options que l’on peut entrer dans le manifest.json. Vous pouvez les trouver ici :http://code.google.com/chrome/extensions/manifest.html
Dans votre dossier contenant le fichier manifest.json, créez un fichier popup.html. C’est le fichier qui sera appelé lors du clic sur votre bouton d’extension.

Le fichier popup.html contient toutes les informations concernant l’exécution et l’affichage de votre extension.
Contenu de popup.html :

<html>
<head>
<title>My IP Adress</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
      display: none;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }
 
    #container {
      position: relative;
    }
 
    #placeholder,
    #module {
      width: 130px;
      height: 35px;
    }
 
    #module {
      position: absolute;
      top: 0;
      left: 0;
      border: 0;
      overflow: hidden;
    }
  </style>
 <script type="text/javascript">
    function init() {
        // Show the body so that the popup is actually visible
        document.body.style.display = 'block';
        setIframeUrl();
    }
 
    function setIframeUrl() {
      document.getElementById('module').src =
          'http://www.astrofiles.net/WDG/chrome/ext/MyIP/';
    }
   </script>
</head>
<body onload="init();">
  <div id="container">
    <div id="placeholder">
    </div>
    <iframe scrolling="no" id="module" src="about:blank">
  </div>
</body>
 </html>

Ce fichier contient les informations relatives à la taille de ma fenêtre pop-up (id #module dans le css), il fait appel à notre fichier PHP, grâce à la fonction JavaScript setIframeUrl.

Vous pouvez très bien adapter ce code pour créer d’autres extensions similaires, inutile de réinventer la roue à chaque fois.

Tester l'extension dans Chrome

Lorsque tous vos fichiers sont prêts, vous allez pouvoir tester le fonctionnement de votre extension dans votre navigateur. Pour cela, lancez Google chrome, et dans la barre d’adresses, tapez ceci :

chrome://extensions/

Cela vous mène directement à la liste de toutes les extensions que vous avez installées. C’est également ici que vous pouvez désactiver ou désinstaller des extensions, mais aussi tester vos propres extensions. Sur la droite, cliquez sur le lien « + mode développeur ».

Cela vous affiche quelques options supplémentaires. Ce qui nous intéresse, c’est le bouton « Charger l’extension non empaquetée… ». Cela va nous permettre d’indiquer à Google chrome qu’on a une nouvelle extension à tester. En cliquant sur ce bouton, une fenêtre s’affiche et vous permet de sélectionner le répertoire ou se trouve votre extension. Lorsque vous choisissez votre dossier et que vous cliquez sur ok, Chrome vérifié la validité de votre fichier manifest.json. S’il détecte une erreur, il vous le fait immédiatement savoir.

Votre extension est désormais installée sur votre poste, vous devriez voir une icône correspondante à droite de la barre d’adresse de votre navigateur.

En cliquant sur cette icône, vous devriez voir apparaître votre adresse IP.

Si votre extension fonctionne correctement, et que vous souhaitez la diffuser au grand public, vous avez deux possibilités :

•        Vous voulez que votre extension apparaisse dans la galerie officielle des extensions Google. Compressez le dossier de votre extension au format zip, puis rendez-vous ici pour uploader votre extension chez Google. Elle apparaitra sur la galerie des extensions au bout d’une minute ou deux: https://chrome.google.com/extensions/developer/dashboard

•        Vous ne voulez pas payer 5$ Juste pour diffuser votre extension chez Google ? C’est simple, il vous suffit de convertir votre répertoire contenant l’extension au format .crx (en allant dans le mode développeur vu plus haut, et en choisissant l’option « empaqueter l’extension… »), et de l’héberger sur votre site web. Vos visiteurs pourront la télécharger et l’installer. Lorsque vous créez une extension au format crx, elle se trouve dans le répertoire juste au dessus. Par exemple, si votre dossier d’extension est dans c:\mon_extension, votre fichier mon_extension.crx se trouvera dans c:\

Ou se trouvent les extensions sur mon poste ?

Si vous voulez inspecter les extensions de votre poste, sachez que vous les trouverez (sous Windows) ici : C:\Users\%userprofile%\AppData\Local\Google\Chrome\User Data\Default\Extensions

Les extensions sont stockées sur votre poste local dans des répertoires aux noms bizarres, par exemple : fifndhoeenoccaiohnkebjojmmmigigp. Ce nom correspond à l’identifiant unique de votre extension. Si vous souhaitez regarder le code d’une extension en particulier, il vous suffit d’aller dans chrome://extensions, et de repérer l’identifiant de l’extension qui est visible lorsque vous êtes en mode développeur, puis d’aller dans C:\Users\%userprofile%\AppData\Local\Google\Chrome\User Data\Default\Extensions ou vous retrouverez le répertoire correspondant à cet identifiant.

Si vous souhaitez accéder rapidement aux informations d’une extension sur le site des extensions de Google, il vous suffit de faire un clique-droit sur l’icône de votre extension près de la barre d’adresse, et de cliquer sur le nom de votre extension. Veuillez noter que d’autres options intéressantes s’affichent, comme la désactivation, la désinstallation, ou l’accès aux options de l’extension.

Mes extensions

Voilà les quelques extensions que j’ai créées :

The Apod : Cette extension vous permet de visualiser chaque jour une nouvelle image d’astronomie publiée par la Nasa, et de voir les images précédentes.

MyIP : L’extension que nous venons de voir.

BFMTV : Un accès rapide au direct de BFM TV.