Dans ce post, nous avons le plaisir de partager avec vous quelques améliorations significatives qui ont permis de faire vos premiers pas avec l'extension Chrome et de vous donner quelques idées pour vous aider à concrétiser ce rêve.
L'ancien guide
Auparavant, le tutoriel "Premiers pas" de l'extension Chrome était un exemple d'extension basique. Il 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. Il comprenait également une page d'options où vous pouviez choisir l'une des quatre couleurs.
Cet exemple de base ne montre pas comment ajouter des fonctionnalités populaires présentes dans des extensions réelles. Il était temps de se réinventer.
Une nouvelle approche
Nous savons que les développeurs se basent sur notre documentation pour commencer leur parcours d'apprentissage avec 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:
- Introduction aux extensions
- Présente 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 inclut également les éléments à 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 à l'aide d'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 intéressant de savoir de combien de temps nous avons besoin pour finir de lire un article. Reading Time vous explique comment insérer un élément contenant le temps de lecture estimé sur chaque page de documentation de l'extension.
- Tutoriel sur le mode Sans distractions
- Supprimer les éléments superflus d'une page permet à notre esprit de se concentrer sur les informations les plus pertinentes. Le mode Sans distractions montre comment modifier le style de la page et masquer quelques éléments gênants.
- Tutoriel sur le gestionnaire d'onglets
- Lorsque vous effectuez des recherches sur le développement d'extensions, vous pouvez vous retrouver avec de nombreux onglets de documentation dans plusieurs fenêtres. Le gestionnaire d'onglets permet d'organiser 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 partagent également des conseils et des bonnes pratiques de développement. De plus, l'utilisation de ces extensions vous permettra 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 effectuera.
- Les leçons que nous allons aborder
- Ce que vous devez savoir avant de commencer
- Instructions détaillées pour créer l'extension
- Comment charger et tester l'extension
Si vous êtes prêt à relever un défi, nous avons inclus une section avec quelques idées sur la façon de personnaliser votre extension ou d'en ajouter d'autres.
Nous avons besoin de votre aide
Nous avons hâte de connaître votre avis ! 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 constitue une amélioration significative par rapport à l'ancien, mais nous ne nous arrêterons pas là. Nous allons continuer à améliorer et à étoffer notre documentation afin de répondre plus efficacement aux besoins de tous les développeurs d'extensions.
Photo par Vardan Papikyan sur Unsplash