Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
19 septembre 2012 3 19 /09 /septembre /2012 17:54

Je souhaite grâce à quelques articles vous permettre de créer votre extension pour google chrome. Ce n'est pas très difficile et les utilisateurs adorent. Pourquoi s'en priver alors ? Le premier article sur le sujet, porte sur le fichier nommé manifest. Nous allons découvrir comment le construire !

 

1. A quoi sert un manifest pour google chrome ?

 

C'est un fichier qui va permettre au navigateur google chrome de trouver toutes les informations essentielles pour faire marcher votre extension. En effet, une extension (ou plugin) peut être très dangereux pour l'utilisateur puisque l'extension pourrait prendre le contrôle sur toutes les pages. Heureusement pour nous, google à décidé de sécuriser tout ça en créant un système de permission. Nous reviendrons là dessus, mais en un mot cela permet d'avertir l'utilisateur des sites sur lesquels l'extension à le droit d'agir.

Le manifest sert donc à déclarer de manière formelle l'extension.

 

 

2. Comprendre le manifeste de google chrome par l'exemple

 

Pour commencer voici un exemple très proche de celui sur le site de la documentation de google chrome afin de vous permettre de vous familiariser avec la syntaxe.

 

 

{
  // Obligatoire
  "name": "Mon extension",
  "version": "La version de mon extension",
  "manifest_version": 2,

  // Recommandé
  "description": "Une description de votre extension",
  "icons": { ... },
  "default_locale": "fr",

  // D'autres options...
  "browser_action": {...},
  "page_action": {...},
  "theme": {...},
  "app": {...},
  "permissions": [...],
}

Commençons par les informations obligatoires pour que votre manifeste pour google chrome marche. 

  • name : c'est le nom de votre extension, n'utilisez pas de caractères spéciaux, pas d'accents, etc.
  • version : c'est une chaîne de caractère. Utilisez votre propre nomenclature (exemple v1.0).
  • manifest_version : c'est la version du manifest à utiliser. Il faut mettre deux car la version 1 n'est plus supporté par google chrome.

Ensuite pour que ce soit mieux optimisé il est préférable d'entrer les infos suivantes :

  • une description : ici aussi, pas de caractères spéciaux.
  • des icons : voici la syntaxe...  16, 48 et 128 représentent le nombre de pixel de l'icon (il doit être carré). Le fichier se place dans le même répertoire que le manifeste.
  • "icons": { "16": "icon16.png",
               "48": "icon48.png",
              "128": "icon128.png" },
    


  • la langue : google met en avant les applications régionalisées. Donc, si vous faites une extension pour un plublique ciblé n'oublié pas de mettre la langue utilisée.

 

3. Les options fondamentales pour le manifest

 

Bon c'est bien jolie tout ça mais avec un manifeste comme ça, notre extension est reconnue par google chrome, mais elle ne sert à rien.  On va commencer par ajouter un icon à la barre d'outils. L'extension pour google chrome va prendre de la forme !

 

 

http://developer.chrome.com/stable/static/images/browser-action.png

Browser_Action

 

Il faut donc utiliser le paramètre browserAction pour afficher un icon dans la barre d'outils et pour exécuter une action quant on clique dessus. Voici un petit exemple :

Encore une fois, tous les fichiers sont à placer dans un même répertoire. C'est déjà mieux mais, la page html pour afficher du contenu dynamique ce n'est pas très funky. Notez que à ce stade là, vous pouvez utiliser du javascript dans votre page popup.html, mais il doit être complètement séparé du code html, c'est à dire dans un fichier *.js. Je vous recommande donc d'utiliser jquery sinon vous allez perdre pas mal de temps. Nous reviendrons là dessus dans un autre article.

{
  "name": "Le nom de mon extension",
  ...
  "browser_action": {
    "default_icon": "images/icon19.png", // en option (image 19x19px)
    "default_title": "Texte au survol",      // en option
    "default_popup": "popup.html"        // la page HTML à afficher en option
  },
  ...
}

 

 

Les permissions

 

Les permissions des extensions google chrome sont très importantes. Ce sont elles qui vont vous permettre d'accéder dynamiquement à des sites externes. 

Par exemple, vous souhaitez afficher dans votre page popup.html des informations mise à jour de manière régulière sur votre site internet. Pour cela vous allez faire une requête ajax sur la page qui contient les informations. La requête AJAX avec l'extension google chrome ne va aboutir que si vous avez ajouté votre site internet aux permissions.

 

"permissions": [
  "tabs", // pour pouvoir gérer les onglets ouvert
  "http://www.blogger.com/", // déclarer un site internet
  "http://*.google.com/" // * permet d'utiliser les sous domaines
],

 

Pour être plus exacte l'étoile remplace tous les caractères. Ainsi http://www.monsite.com/* vous permet d'accéder à toutes les pages du site.

 

Les contents scripts 

 

C'est un peu la magie des extensions, avec les contents scripts vous allez pouvoir prendre le contrôle d'une ou plusieurs pages. Un script va s'exécuter à chaque fois que l'utilisateur ouvre la page en question. Par exemple vous pouvez ajouter le logo de votre site sur toutes les pages (si vous faites ca, l'utilisateur va très vite désinstaller votre extension pour google chrome).

 

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.site1.com/*", "http://www.site2.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

 

Donc "matches" définit le sites sur lesquels les scripts seront exécutés. "CSS" appel des script css à exécuter et "js" des fichiers javascript. Ce système est très puissant.

 

 

4. Mettre en place l'extension

 

- Une fois que vous avez fait votre fichier dans votre éditeur de texte favori, nommez le manifest.json

- Lancez le navigateur google chrome et tapez dans la barre d'adresse chrome://extensions/

- Passez en mode développeur

- Cliquez sur le bouton "Charger l'extension non empaquetée" et sélectionnez le dossier qui contient le manifest et les autres fichiers.

- Et voilà votre première application marche.

 

J'espère que ce premier article sur les extensions pour google chrome vous à plu. La suite demain...

Partager cet article

Repost 0
Published by Paulux - dans Truc de Geek
commenter cet article

commentaires

Catégories