Advertisement
  1. Code
  2. Tools & Tips
Code

Développement d’Extensions Google Chrome

by
Difficulty:IntermediateLength:LongLanguages:

French (Français) translation by Daszie Chan (you can also view the original English article)

Ce n’est pas un secret que mon navigateur préféré est Google Chrome. Je l’aime parce qu'il est rapide, fiable, il ne plante pas (très souvent), et il est assez beau. Il y a aussi autre chose que je trouve encore plus précieux. C’est le fait que vous pouvez construire une extension à l’aide uniquement du HTML, du CSS et de JavaScript. Je supporte toujours ces produits, qui sont ouverts à la communauté et Chrome se trouve être un de ces produits. Si vous avez besoin de quelque chose qui n’est pas encore implémenté, vous êtes libre de le développer vous-même.

Ainsi, à la fin de cet article, vous trouverez une extension Chrome fonctionnelle qui utilise la plupart des techniques expliquées ci-dessous. Vous pouvez télécharger le dernier exemple en utilisant le bouton de téléchargement de code source en haut de cette page.


Pourquoi vous devriez créer votre propre extension

J’encourage toujours les gens à utiliser les meilleurs outils pour accélérer leur flux de travail. Le logiciel que nous utilisons doit nous aider, nous ne devrions pas avoir à nous battre avec lui. Le développement d’extensions/plugins de votre éditeur favori ou de votre navigateur aide non seulement vous, mais aussi les autres programmeurs, qui seront tôt ou tard dans la même situation. S'il manque quelque chose, vous pouvez le construire vous-même et avec Chrome, c’est vraiment facile. La modélisation de votre environnement selon vos besoins est essentielle pour être hautement productif.


Développer & tester vos extensions

Heureusement, il existe un moyen de tester votre extension sans avoir à la charger sur la boutique en ligne de Chrome. Dans la barre d’adresse de votre navigateur, il suffit de taper :

Assurez-vous de cocher Mode Développeur et cliquez sur le bouton Charger l'extension non empaquetée... Ensuite il suffit de sélectionner le dossier de votre disque dur qui contient les fichiers de l’extension.

extensionspanel

Architecture

Voici un schéma d'une l’architecture pour une extension Chrome :

architecture

Et maintenant nous allons regarder de plus près chaque élément au sein de l’architecture.

Manifest

Le point d’entrée de votre extension est le fichier manifest.json. Il doit contenir un objet JSON valide. Par exemple :

Les propriétés requises sont name, version et manifest_version. Le version peut se situer entre un et quatre entiers séparés par des points. C’est quelque chose qui est utilisé par le système de mise à jour automatique de Google. Voilà comment il sait quand mettre à jour votre extension. La valeur de manifest_version doit être l'entier 2.

Le manifest peut contenir d’autres propriétés selon le type d’extension dont vous avez besoin, mais je vais décrire seulement celles que je trouve les plus intéressantes.

Background Pages

Chaque extension possède une page d’arrière-plan invisible qui est exécutée par le navigateur. Il existe deux types - les pages d’arrière-plan persistantes et les pages d'événement. Le premier est actif, tout le temps. Le second est actif uniquement lorsque c’est nécessaire. Google encourage les développeurs à utiliser les pages d’événement, car cela enregistre la mémoire et améliore les performances globales du navigateur. Toutefois, il est bon de savoir que c’est aussi où vous devriez mettre votre logique et initialisation principale. Normalement, l'arrière-plan/background script joue le rôle d’un pont entre les autres parties de l’extension.

Voici comment vous devez le décrire dans le manifest :

Comme vous l’aurez deviné, si la propriété persistant a la valeur false vous utilisez alors les pages d’événement. Dans le cas contraire, vous travaillez avec une page d’arrière-plan persistante.

Content Script

Si vous devez accéder au DOM de la page en cours, alors vous devez utiliser un script de contenu. Le code est exécuté dans le contexte de la page web actuelle, ce qui signifie qu’il sera exécuté à chaque actualisation. Pour ajouter ce script, utilisez la syntaxe suivante.

N’oubliez pas que la valeur de matches détermine pour quelles pages sera utilisé votre script. En savoir plus sur les modèles de matches ici.

User Interface

Il y a plusieurs façons de construire l’interface utilisateur de votre extension. Voici les quatre plus populaires.

Browser Action

La plupart des développeurs utilisent la propriété browser_action pour construire leurs plugins. Une fois que vous l'avez défini, une icône représentant votre extension sera mise sur le côté droit de la barre d’adresse. Utilisateurs peuvent ensuite cliquer sur l’icône et ouvrir une fenêtre pop-up qui est en fait le contenu HTML que vous contrôlez.

browseraction

Les fichiers manifest doivent contenir les données suivantes :

Le default_title est une petite info-bulle qui apparaît lorsque l’utilisateur survolera votre icône. default_popup est en fait le fichier HTML qui est chargé à l’intérieur de la fenêtre pop-up. Il y a aussi un badge que vous pouvez placer sur votre icône. Vous pouvez le faire à l’intérieur de votre background script. Par exemple :

C’est le code que j’ai utilisé pour produire l’image ci-dessus.

Page Action

La propriété page_action est similaire à browser action, mais l’icône s’affiche dans la barre d’adresse :

pageaction

La chose intéressante ici est que votre icône est cachée au départ, donc vous devez décider du moment pendant lequel vous voulez la montrer. Par exemple, dans l’image ci-dessus, l’icône RSS apparaît uniquement si la page actuelle contient un lien vers le flux RSS. Si vous avez besoin de voir votre icône tout le temps, il est bon d’utiliser browser_action directement.

Pour ajouter page action, tapez le code suivant dans votre manifest :

Contrairement à l’icône de browser action, l'icône de page action ne possède pas de badge.

DeveloperTools

J’utilise DeveloperTools beaucoup et il est bon de voir que Chrome propose une méthode pour ajouter de nouveaux onglets à ces outils. La première chose à faire est d’ajouter une page HTML qui sera chargée lorsque le panneau est ouvert :

Il n’y a pas besoin de mettre les éléments HTML à l’intérieur de la page, à l’exception de la liaison d'un fichier JavaScript, ce qui créera l’onglet :

Et incorporez ensuite le code suivant dans le fichier devtools.js :

Maintenant, le code ci-dessus va ajouter un nouvel onglet avec le nom de TheNameOfYourExtension et une fois que vous aurez cliqué dessus le navigateur chargera index.html à l’intérieur de DeveloperTools.

Omnibox

Le omnibox est le mot clé qui s’affiche dans la barre d’adresse de Chrome. Par exemple, si vous ajoutez la propriété suivante dans votre manifest :

Puis ajoutez le code ci-dessous, à l’intérieur de votre background script :

Vous devriez être capable de taper yeah à l’intérieur de la barre d’adresse. Ensuite, vous devriez voir quelque chose comme ceci :

omnibox

Appuyer sur la touche tab produira l’écran suivant :

omnibox2

Bien sûr à l’aide de l’API chrome.omnibox, vous prendre l’entrée d’utilisateur et de agir sur cette entrée.

Les APIs

Il y a un tas de choses différentes que vous pouvez faire dans votre extension. Par exemple, vous pouvez accéder aux favoris ou à l’historique de l’utilisateur. Vous pouvez déplacer, créer des onglets ou même redimensionner la fenêtre principale. Je vous recommande vivement de consulter la documentation pour avoir une meilleure idée de la façon d’accomplir ces tâches.

Ce que vous devez savoir, c’est que toutes les API ne sont pas disponibles dans toutes les parties de votre extension. Par exemple, votre script de contenu ne peut pas accéder à chrome.devtools.panels ou le script de votre onglet DeveloperTools ne peut pas lire le DOM de la page Donc, si vous vous demandez pourquoi quelque chose ne fonctionne pas, cela pourrait en être la raison.

Messaging

Comme je l’ai mentionné ci-dessus, vous n’avez toujours pas accès à l’API que vous souhaitez utiliser. Si tel est le cas, vous devez utiliser le passage de message. Il existe deux types de messaging - les demandes ponctuelles et les connexions longue durée.

Les demandes ponctuelles

Ce type de communication ne se produit qu’une seule fois. C'est-à-dire que vous envoyez un message et attendez une réponse. Par exemple, vous pouvez placer le code suivant dans votre background script :

Et utiliser alors le code d'en bas dans votre script de contenu :

Et voici comment vous pouvez obtenir des informations sur le DOM de la page en cours et l’utiliser dans votre background script, qui n'a normalement pas accès à ces données.

Connexions longue durée

Utilisez ce type de messaging si vous avez besoin d’une chaine de communication persistante. À l’intérieur de votre script de contenu, placez le code suivant :

Et puis dans le background script, utilisez ceci :

Substituer des Pages

La substitution de pages est une belle façon de personnaliser votre navigateur. Vous êtes également capable de remplacer certaines des pages par défaut de Chrome. Par exemple, vous pouvez créer votre propre page d’historique. Pour ce faire, ajoutez l’extrait de code suivant :

Les valeurs possibles de <page to override> sont bookmarks, history et newtab. C’est cool d’avoir une nouvelle page new tab.


Un exemple d'extension

Pour conclure cet article, j’ai décidé d’inclure un exemple simple, ainsi vous pourrez avoir une meilleure compréhension de l’ensemble du tableau. Cet exemple d'extension utilise la plupart des choses que j’ai décrites ci-dessus pour simplement définir une couleur d’arrière-plan #F00 pour toutes les div de la page en cours. N’hésitez pas à télécharger le code source en utilisant le bouton en haut de cet article.

Le fichier manifest

Bien sûr, j’ai commencé avec le fichier manifest :

Gardez en tête que vous pouvez organiser vos fichiers dans des dossiers. Aussi, faites attention à la propriété version. Vous devez mettre à jour cette propriété à chaque fois que vous voulez charger votre extension dans la boutique en ligne.

Script de fond

Les premières lignes obtiennent l'action de l’utilisateur depuis l’omnibox. Après cela, j’ai mis une demande ponctuelle d'auditeur, qui acceptera le message depuis l’icône browser action.

L’extrait de code suivant est une connexion longue durée avec l’onglet devtools (il n’est pas absolument nécessaire d’utiliser une connexion longue durée pour cela, je l’ai fait juste à des fins éducatives). À l’aide de ces auditeurs, je suis en mesure d’obtenir l’entrée de l’utilisateur et de l’envoyer au script de contenu, qui a accès aux éléments DOM. Le point clé ici est de sélectionner l’onglet que j’ai voulu manipuler et ensuite de lui envoyer un message. Enfin, j’ai mis un badge sur l’icône d’extension.

Browser Action

Nous commençons par notre fichier popup.html :

Ensuite, nous créons le fichier popup.js :

Le pop-up contient un seul bouton, et une fois que l’utilisateur clique dessus, il envoie un message au background script.

DeveloperTools

Pour le DeveloperTools, nous faisons presque la même chose que pour le pop-up, la seule différence étant que j’ai utilisé une connexion longue durée.

Script de contenu

Le script de contenu écoute un message, sélectionne toutes les div de la page en cours et modifie leur couleur d’arrière-plan. Faites attention à l’objet auquel j’ai joint l’auditeur. Dans le script de contenu c'est chrome.extension.onMessage.

Personnalisation de la page New Tab

La dernière chose que cette extension fait est personnaliser la page new tab. Nous pouvons le faire facilement simplement en mettant la propriété newtab au fichier newtab/newtab.html :

N’oubliez pas que vous ne pouvez pas créer une réplique de la page new tab par défaut. Le but de cette fonction est d’ajouter une fonctionnalité complètement différente. Voici ce que dit Google :

N’essayez pas d’imiter la page de nouvel onglet par défaut. Les APIs nécessaires pour créer une version légèrement modifiée de la page du nouvel onglet par défaut — avec des pages préférées, des onglets récemment fermés, des conseils, une d'image d’arrière-plan et ainsi de suite — n’existent pas encore. Jusqu'à ce que ce soit possible, il vaut mieux essayer de faire quelque chose de complètement différent.


Le débogage

Écrire une extension pour Google Chrome n’est pas toujours une tâche facile et vous rencontrerez probablement des problèmes. La bonne chose est que vous pouvez toujours utiliser la console pour vos variables pour aider avec le débogage. N’hésitez pas à ajouter console.log dans votre arrière-plan ou dans les scripts de contenu. Toutefois, cela ne fonctionne pas dans les scripts qui sont exécutés dans le cadre des outils de développeur, dans ce cas que vous pouvez envisager d’utiliser la méthode alert, car elle fonctionne partout.


Conclusion

À mon avis, Chrome est un des meilleurs navigateurs disponibles. Les développeurs de Google font des extensions de création relativement faciles en nous donnant la possibilité de les créer en HTML, CSS et JavaScript.

Oui, il y a certaines parties délicates, mais généralement, nous sommes en mesure de bons plugins. Gardez en tête que cet article ne couvre pas tout ce qui touche au développement d’extensions de Chrome. Il y a d’autres options utiles comme les menus contextuels, les pages d’options et les notifications. Pour les sujets que je n'ai pas couverts, veuillez vous reporter à la documentation pour plus d’informations.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.