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": "[* http://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 http://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".
- A l'heure actuelle, un seul fichier JS est possible comme script contenu. Cette limitation sera levéee dans une future version.
- Une future version permettra également d'ajouter la possibilité d'injecter des CSS, en utilisant une clés "css".
- 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.
- Plus de détails sur la syntaxe pour les correspondances peuvent être trouvés ici: http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/url_pattern.h
- 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.
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"
}
Empaqueter la distribution
Pour empaqueter votre extension et la distribuer, assurez-vous d'abord que vous avez installé Python 2.6, puis télécharger ce script. Exécuter le script de la façon suivante:
chromium_extension.py --indir="c:\myextension" --outfile="myextension.crx"
Cela produira un fichier .crx qui peut être installé en le faisant glisser sur Chrome. À l'heure actuelle, il ne se passe rien, sauf le téléchargement de l'interface utilisateur lorsque vous installez une extension de cette façon, mais elle s'installe.
Notes
- Il est clair que nous devrons avoir une meilleure façon de produire ces fichiers un jour. Il y aura probablement une interface utilisateur dans Chrome pour vous y aider.
- En outre, a l'avenir, cette section devrait montrer la façon d'utiliser le service de développeur web pour mettre en ligne votre extension.