Extension Chrome : Le How To

Traduction du tutoriel du site Chromium qui héberge la version de développement de Chrome. Le document originel est sous licence Creative Common. Cette traduction peut être copiée librement sur papier. Ne pas la mettre sur un site Web, placer plutôt un lien sur cette page.

Pour commencer

Créez un dossier sur votre ordinateur pour y placer votre code. Pour simplifier, nous supposerons que le dossier se trouve à c:\myextension, mais il peut être n'importe où.

Dans ce dossier, créez un fichier texte appelé manifest.json et placer dedans le code qui suit:

  { 
       "format_version": 1, 
       "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
       "version": "1.0", 
       "name": "Ma Première Extension", 
       "description": "La première extension que j'ai faite." 
   } 

Voici quelques explications sur ce que représentent ces clés:

Créer dans votre dossier un fichier texte nommé hello_world.html, avec dedans ce texte:

    Bonjour, le Monde! 

Trouvez votre raccourci de Chrome dans l'interface de Windows (propriétés de l'icône) et ajouter ces options:

    chrome.exe - enable-extensions - load-extension = "c:\myextension" 

Lancer Chrome et chargez cette page:

chrome.exe --enable-extensions --load-extension="c:\myextension"

Vous devriez voir la page que vous venez de créer. Notez que vous pouvez modifier la page alors que Chrome est en cours d'exécution, appuyez sur recharger pour voir vos modifications.

Maintenant, charger:

chrome-ui://extensions/

Cette page liste toutes les extensions installées. Elle montre également toutes les erreurs qui ont eu lieu dans le système des extensions depuis son démarrage.

Notes

Scripts contenus

Les extensions peuvent inclure des "scripts contenus " qui sont des fichiers JavaScript qui sont exécutés dans le cadre du contexte des pages web chargées par le navigateur. Ceci est essentiellement similaire à l'extension Greasemonkey de firefox.

Pour ajouter un contenu texte, l'enregistrer dans le manifeste comme ceci:

{
       "format_version": 1, 
       "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
       "version": "1.0", 
       "name": "Ma Première Extension", 
       "description": "La première extension que j'ai faite." 
       "content_scripts": [ 
         { 
           "matches": "[* https://www.google.com/"], 
           "js": [ "foo.js"] 
         } 
       ] 
}

Ensuite, créez un fichier appelé foo.js dans votre répertoire avec ce code:

   document.images [0]. src = "http://bit.ly/1293Af"; 
   document.images [0]. height = ""; 

Lancer Chrome à nouveau avec les options et aller sur https://www.google.com. Vous devriez voir votre image en lieu et place du logo Google.

Notes

Code interdit

A partir de la version 18 de Chrome, pour mettre fin aux vulnérabilité dans les extensions, et sachant qu'il est possible à une page web de detecter la présence d'une extension dans le navigateur, certains types de codes sont interdits:

Il est possible d'empêcher la détection de la présence d'une extension par les sites malveillants en utilisant manifest_version 2 (voir documentation sur le site de Google).

Plugins NPAPI

Les extensions Chrome peuvent contenir des composants binaires sous la forme de plugins NPAPI. Les plugins NPAPI sont difficiles à faire et expliquer comment est hors du sujet de ce document. Si vous avez un plugin NPAPI que vous souhaitez inclure dans une extension Chrome, créez un dossier dans votre extension (par exemple "plugins"), et ajouter ce dossier dans votre manifeste comme ceci:

   { 
       "format_version": 1, 
       "id": "00123456789ABCDEF0123456789ABCDEF0123456", 
       "version": "1.0", 
       "name": "Ma Première Extension", 
       "description": "La première extension que j'ai faite." 
       "plugins_dir": "plugins" 
  } 

Installation automatique

  1. Lancer Chrome.
  2. Cliquer sur le menu outils, représenté par une clé en haut à droite. Cela ouvre un menu déroulant.
  3. Cliquer dans ce menu sur la ligne outils pour ouvrir second menu déroulant.
  4. Cliquer sur Extension.
  5. Ouvrir le mode développeur en cliquant sur l'option à droite.
  6. Cliquer sur "Load unpacked extension" ou "Charger l'extension non empaquetée", et indiquer le répertoire qui contient votre code.
  7. La commande "Pack extension" crée un paquetage pour ajouter votre extension à la gallerie.

Plus d'informations