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:
- Format_version (obligatoire): Indique la version du format de manifeste utiliser. À l'heure actuelle, il n'existe qu'une seule version, et il s'agit de la version 1.
- Id (obligatoire): Un identifiant unique pour l'extension. À l'heure actuelle, ce peut être n'importe quel numéro de 40 chiffres hexadécimaux, mais dans l'avenir, ce sera un hash SHA-1 de l'extension de la clé publique.
- Version (obligatoire): La version de votre extension. Vous pouvez utiliser n'importe quel nombre séparés par des points comme numéros de version.
- Name (obligatoire): Un nom lisible par l'homme pour l'extension.
- Description (facultatif): En option, une description de l'extension.
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
- --enable-extensions est snécessaire seulement durant la phase de développement du système et sera supprimé plus tard.
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
- Vous pouvez aussi vous référer à des ressources au sein de votre extension, par leur chemin complet, comme "chrome-extension://00123456789ABCDEF0123456789ABCDEF0123456/foo.gif".
- Les scripts contenu s'exécutent dans environnement séparé de celui de la page Web. Si la page Web définit les variables globales, le script ne peut les "voir" par défaut. Cela est fait exprès pour éviter les conflits avec la page. Si le script contenu doit interagir avec le scope global de la page, il peut y accéder en utilisant la variable globale contentWindow.
- Le script contenu peut être exécuté soit au début ou la fin d'un document. Par défaut, il l'est à la fin, mais vous pouvez dire à Chrome de le lancer au début, en ajoutant la ligne: "run_at": "document-start" pour l'entrée de votre script.
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:
- Le code relatif à HTTP comme le chargement de page.
- La génération de code dynamique.
- L'intruction eval sauf pour certaines d'entre elles où il est essentiel. Elle doit être remplacée par JSON.parse.
- Du code imbriqué <script> </script> dans l'extension.
- Le chargement de fichiers ou plugins est limité.
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.
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
- Lancer Chrome.
- Cliquer sur le menu outils, représenté par une clé en haut à droite. Cela ouvre un menu déroulant.
- Cliquer dans ce menu sur la ligne outils pour ouvrir second menu déroulant.
- Cliquer sur Extension.
- Ouvrir le mode développeur en cliquant sur l'option à droite.
- Cliquer sur "Load unpacked extension" ou "Charger l'extension non empaquetée", et indiquer le répertoire qui contient votre code.
- La commande "Pack extension" crée un paquetage pour ajouter votre extension à la gallerie.