Une nouvelle façon de vous lancer dans le développement d'extensions Chrome

Amy Steam
Amy Steam

Dans cet article, nous sommes heureux de vous présenter quelques améliorations importantes apportées à l'expérience de démarrage de l'extension Chrome, ainsi que quelques façons de participer à ce rêve.

L'ancien guide

Auparavant, le tutoriel de mise en route des extensions Chrome était un exemple d'extension de base qui modifiait la couleur d'arrière-plan de la page active lorsque l'utilisateur cliquait sur un bouton dans la fenêtre pop-up de l'extension. Elle comprenait également une page d'options dans laquelle vous pouviez choisir l'une des quatre couleurs.

Cet exemple de base ne montre pas comment ajouter les fonctionnalités populaires présentées dans des extensions réelles. Le moment était venu de faire évoluer le système.

Une nouvelle approche

Nous savons que les développeurs s'appuient sur notre documentation pour entamer leur parcours de formation sur les extensions Chrome. Notre objectif est de proposer un parcours accessible, adapté aux débutants et pertinent. Au lieu d'essayer d'améliorer l'exemple du tutoriel existant, nous avons décidé de partir de zéro.

Présentation de la nouvelle collection "Premiers pas" améliorée:

Principes de base des extensions
Aborde brièvement certains concepts fondamentaux du développement d'extensions Chrome, tels que les technologies Web et les composants d'extension couramment utilisés. Il indique également les points à prendre en compte lors de la conception et de la distribution d'une extension dans le Chrome Web Store.
Principes de base du développement
Présente le workflow de développement des extensions en créant un exemple Hello, Extensions. Il explique comment charger l'extension pendant le développement, localiser les journaux et les erreurs, choisir une structure de projet et utiliser Typescript.
Tutoriel sur le temps de lecture
Il est utile de savoir combien de temps nous avons besoin pour terminer la lecture d'un article. Cette section vous explique comment insérer un élément contenant le temps de lecture estimé sur chaque page de documentation d'une extension.
Tutoriel sur le mode Sans distractions
Le fait de désencombrer une page nous permet de nous concentrer sur les informations les plus pertinentes. Le mode Sans distractions montre comment modifier le style de la page et masquer quelques éléments indésirables.
Tutoriel sur le gestionnaire d'onglets
Lorsque vous cherchez à développer des extensions, vous pouvez vous retrouver avec de nombreux onglets de documentation dans différentes fenêtres. Le Gestionnaire d'onglets organise les onglets de documentation de votre extension Chrome et du Chrome Web Store.

Non seulement ces tutoriels vous expliquent comment créer des extensions réelles, mais ils vous donnent aussi des conseils de développement et des bonnes pratiques. En outre, leur utilisation permet d'améliorer votre expérience lorsque vous lisez leur documentation.

Que se passe-t-il ensuite ?

Chaque tutoriel comprend les sections suivantes:

  • Tâche que l'extension exécutera.
  • Les leçons qui seront abordées
  • Ce que vous devez savoir avant de commencer
  • Des instructions détaillées pour créer l'extension
  • Comment charger et tester l'extension.

Si vous aimez les défis, nous avons inclus une section contenant quelques idées pour personnaliser votre extension ou en ajouter d'autres.

Nous avons besoin de votre aide

Votre avis nous intéresse. Si vous constatez des erreurs ou des incertitudes dans ces guides, veuillez signaler un bug sur notre dépôt GitHub.

Nous pensons que ce nouveau guide de démarrage représente une amélioration significative par rapport à l'ancien, mais nous ne comptons pas nous arrêter là. Nous allons continuer à améliorer et à développer notre documentation afin de mieux répondre aux besoins de tous les développeurs d'extensions.


Photo par Vardan Papikyan, publiée sur Unsplash