journey
title Votre Parcours de Développement d’Extension de Navigateur
section Fondation
Comprendre les navigateurs: 3: Student
Apprendre les types d’extensions: 4: Student
Configurer le développement: 4: Student
section Développement
Construire l’interface: 4: Student
Ajouter des fonctionnalités: 5: Student
Gérer les données: 5: Student
section Intégration
Tester dans le navigateur: 5: Student
Déboguer les problèmes: 4: Student
Affiner l’expérience: 5: Student
Sketchnote par Wassim Chegham
Les extensions de navigateur sont des mini-applications qui améliorent votre expérience de navigation web. À l'image de la vision originale de Tim Berners-Lee pour un web interactif, les extensions étendent les capacités du navigateur au-delà de la simple consultation de documents. Des gestionnaires de mots de passe qui sécurisent vos comptes aux sélecteurs de couleurs qui aident les designers à choisir les teintes parfaites, les extensions résolvent les défis quotidiens de la navigation.
Avant de créer votre première extension, comprenons comment fonctionnent les navigateurs. Tout comme Alexander Graham Bell devait comprendre la transmission du son avant d'inventer le téléphone, connaître les fondamentaux du navigateur vous aidera à créer des extensions qui s'intègrent parfaitement aux systèmes existants.
À la fin de cette leçon, vous comprendrez l'architecture des navigateurs et aurez commencé à construire votre première extension.
mindmap
root((Architecture du Navigateur))
Core Components
Moteur de Rendu
Moteur JavaScript
Pile Réseau
API de Stockage
User Interface
Barre d'Adresse
Gestion des Onglets
Favoris
Icônes d'Extension
Extension System
Fichiers Manifest
Scripts de Contenu
Pages d'Arrière-Plan
Fenêtres Popup
Security Model
Politique de Même Origine
API des Permissions
Sécurité du Contenu
Mondes Isolés
Development Tools
Intégration DevTools
Console de Débogage
Moniteur de Performance
Inspecteur d'Extension
Un navigateur web est essentiellement un interprète sophistiqué de documents. Lorsque vous tapez "google.com" dans la barre d'adresse, le navigateur effectue une série complexe d'opérations - il demande du contenu à des serveurs du monde entier, puis analyse et affiche ce code sous forme de pages web interactives que vous voyez.
Ce processus reflète la conception du premier navigateur web, WorldWideWeb, créé par Tim Berners-Lee en 1990 pour rendre les documents hyperliés accessibles à tous.
✅ Un peu d'histoire : Le premier navigateur s'appelait 'WorldWideWeb' et a été créé par Sir Timothy Berners-Lee en 1990.
Quelques navigateurs anciens, via Karen McGrane
Le processus entre la saisie d'une URL et l'affichage d'une page web implique plusieurs étapes coordonnées qui se déroulent en quelques secondes :
sequenceDiagram
participant User
participant Browser
participant Extension
participant DNS
participant Server
User->>Browser: Tape l'URL et appuie sur Entrée
Browser->>Extension: Déclenche l'événement beforeRequest
Extension->>Extension: Vérifie si l'URL doit être modifiée
Browser->>DNS: Recherche l'adresse IP du serveur
DNS->>Browser: Renvoie l'adresse IP
Browser->>Server: Demande le contenu de la page web
Server->>Browser: Envoie HTML, CSS et JavaScript
Browser->>Extension: Déclenche l'événement beforeResponse
Extension->>Extension: Modifie le contenu si nécessaire
Browser->>User: Affiche la page web complète
Extension->>User: Affiche les mises à jour de l'interface de l'extension
Voici ce que ce processus accomplit :
- Traduit l'URL lisible par l'humain en une adresse IP du serveur via une requête DNS
- Établit une connexion sécurisée avec le serveur web en utilisant les protocoles HTTP ou HTTPS
- Demande le contenu spécifique de la page web au serveur
- Reçoit le balisage HTML, le style CSS et le code JavaScript du serveur
- Rend tout le contenu en une page web interactive que vous voyez
Les navigateurs modernes offrent de nombreuses fonctionnalités que les développeurs d'extensions peuvent exploiter :
| Fonctionnalité | But | Opportunités pour les extensions |
|---|---|---|
| Moteur de rendu | Affiche HTML, CSS et JavaScript | Modification de contenu, injection de styles |
| Moteur JavaScript | Exécute le code JavaScript | Scripts personnalisés, interactions API |
| Stockage local | Sauvegarde des données localement | Préférences utilisateur, données en cache |
| Pile réseau | Gère les requêtes web | Surveillance des requêtes, analyse des données |
| Modèle de sécurité | Protège les utilisateurs contre les contenus malveillants | Filtrage de contenu, améliorations de sécurité |
Comprendre ces fonctionnalités vous aide à :
- Identifier où votre extension peut apporter le plus de valeur
- Choisir les bonnes API de navigateur pour la fonctionnalité de votre extension
- Concevoir des extensions qui fonctionnent efficacement avec les systèmes du navigateur
- Assurer que votre extension respecte les meilleures pratiques de sécurité du navigateur
Les différents navigateurs implémentent les standards avec de légères variations, semblables à la manière dont différents langages de programmation peuvent traiter un même algorithme différemment. Chrome, Firefox et Safari ont chacun des caractéristiques uniques que les développeurs doivent prendre en compte lors du développement d'extensions.
💡 Astuce pro : Utilisez caniuse.com pour vérifier quelles technologies web sont supportées sur les différents navigateurs. Cela est précieux lors de la planification des fonctionnalités de votre extension !
Points clés pour le développement d'extensions :
- Testez votre extension sur les navigateurs Chrome, Firefox et Edge
- Adaptez votre code aux différentes API d'extensions et formats de manifestes des navigateurs
- Gérez les différences de performance et limitations
- Fournissez des solutions de secours pour les fonctionnalités spécifiques à certains navigateurs qui pourraient ne pas être disponibles
✅ Insight analytique : Vous pouvez déterminer quels navigateurs vos utilisateurs préfèrent en installant des outils analytiques dans vos projets web. Ces données vous aident à prioriser les navigateurs à supporter en premier.
Les extensions de navigateur résolvent des problèmes courants de navigation web en ajoutant des fonctionnalités directement à l'interface du navigateur. Plutôt que de nécessiter des applications séparées ou des flux de travail complexes, les extensions fournissent un accès immédiat à des outils et fonctionnalités.
Ce concept reflète la façon dont les pionniers de l'informatique, comme Douglas Engelbart, envisageaient d'augmenter les capacités humaines grâce à la technologie - les extensions augmentent la fonctionnalité basique de votre navigateur.
quadrantChart
title Catégories d’Extensions de Navigateur
x-axis Simple --> Complexe
y-axis Usage Personnel --> Outils Professionnels
quadrant-1 Outils de Développeur
quadrant-2 Solutions d’Entreprise
quadrant-3 Utilitaires Personnels
quadrant-4 Applications de Productivité
Ad Blockers: [0.3, 0.2]
Password Managers: [0.7, 0.3]
Color Pickers: [0.4, 0.8]
Code Formatters: [0.8, 0.9]
Note Taking: [0.6, 0.5]
Video Downloaders: [0.5, 0.2]
Time Trackers: [0.7, 0.6]
Screenshot Tools: [0.4, 0.4]
Catégories populaires d'extensions et leurs bénéfices :
- Outils de productivité : gestionnaires de tâches, applications de prise de notes, et chronomètres qui vous aident à rester organisé
- Améliorations de sécurité : gestionnaires de mots de passe, bloqueurs de publicités, et outils de confidentialité qui protègent vos données
- Outils pour développeurs : formateurs de code, sélecteurs de couleur, et utilitaires de débogage qui facilitent le développement
- Amélioration du contenu : modes lecture, téléchargeurs vidéo, et outils de capture d'écran qui améliorent votre expérience web
✅ Question de réflexion : Quelles sont vos extensions de navigateur préférées ? Quelles tâches spécifiques accomplissent-elles, et comment améliorent-elles votre expérience de navigation ?
Compréhension de l'architecture du navigateur : Avant de passer au développement d'extensions, assurez-vous de pouvoir :
- ✅ Expliquer comment les navigateurs traitent les requêtes web et affichent le contenu
- ✅ Identifier les composants principaux de l'architecture du navigateur
- ✅ Comprendre comment les extensions s'intègrent à la fonctionnalité du navigateur
- ✅ Reconnaître le modèle de sécurité qui protège les utilisateurs
Auto-test rapide : Pouvez-vous tracer le chemin depuis la saisie d'une URL jusqu'à l'affichage d'une page ?
- Résolution DNS convertit l'URL en adresse IP
- Requête HTTP récupère le contenu du serveur
- Analyse traite le HTML, CSS, et JavaScript
- Rendu affiche la page web finale
- Extensions peuvent modifier le contenu à plusieurs étapes
Comprendre le processus d'installation d'une extension vous aide à anticiper l'expérience utilisateur lorsque des personnes installent votre extension. Le processus d'installation est standardisé sur les navigateurs modernes, avec de légères variations dans la conception de l'interface.
Important : Assurez-vous d'activer le mode développeur et d'autoriser les extensions provenant d'autres magasins lors du test de vos propres extensions.
Lorsque vous développez et testez vos propres extensions, suivez ce flux de travail :
flowchart TD
A[Écrire le code] --> B[Construire l'extension]
B --> C{Première installation ?}
C -->|Oui| D[Charger non empaqueté]
C -->|Non| E[Recharger l'extension]
D --> F[Tester la fonctionnalité]
E --> F
F --> G{Fonctionne correctement ?}
G -->|Non| H[Déboguer les problèmes]
G -->|Oui| I[Prêt pour les utilisateurs]
H --> A
I --> J[Publier sur le store]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
# Étape 1 : Construisez votre extension
npm run buildCe que cette commande accomplit :
- Compile votre code source en fichiers prêts pour le navigateur
- Regroupe les modules JavaScript en paquets optimisés
- Génère les fichiers finaux de l'extension dans le dossier
/dist - Prépare votre extension pour l'installation et le test
Étape 2 : Accédez aux extensions du navigateur
- Ouvrez la page de gestion des extensions de votre navigateur
- Cliquez sur le bouton "Paramètres et plus" (l'icône
...) en haut à droite - Sélectionnez "Extensions" dans le menu déroulant
Étape 3 : Chargez votre extension
- Pour une nouvelle installation : choisissez
charger l’extension non empaquetéeet sélectionnez votre dossier/dist - Pour les mises à jour : cliquez sur
rechargerà côté de votre extension déjà installée - Pour les tests : activez le "Mode développeur" pour accéder à des fonctionnalités supplémentaires de débogage
✅ Note : Ces instructions pour le développement s'appliquent spécifiquement aux extensions que vous créez vous-même. Pour installer des extensions publiées, rendez-vous dans les magasins officiels d’extensions de navigateur comme le Microsoft Edge Add-ons store.
Comprendre la différence :
- Installations en développement vous permettent de tester des extensions non publiées durant le développement
- Installations en magasin offrent des extensions validées, publiées et mises à jour automatiquement
- Installation par sideload permet d’installer des extensions hors des magasins officiels (requiert le mode développeur)
Nous allons créer une extension de navigateur qui affiche l'empreinte carbone de la consommation énergétique de votre région. Ce projet illustre les concepts essentiels du développement d'extensions tout en créant un outil pratique pour la sensibilisation environnementale.
Cette approche suit le principe de "l'apprentissage par la pratique" qui s’est avéré efficace depuis les théories éducatives de John Dewey - combinant compétences techniques avec des applications concrètes et significatives.
Avant de commencer le développement, rassemblons les ressources nécessaires et les dépendances :
Accès API requis :
- Clé API CO2 Signal : Entrez votre adresse email pour recevoir votre clé API gratuite
- Code région : Trouvez le code de votre région grâce à Electricity Map (par exemple, Boston utilise 'US-NEISO')
Outils de développement :
- Node.js et NPM : Outil de gestion de paquets pour installer les dépendances du projet
- Code de départ : Téléchargez le dossier
startpour commencer le développement
✅ En savoir plus : Améliorez vos compétences en gestion de paquets avec ce module Learn complet
Comprendre la structure du projet aide à organiser le travail de développement efficacement. Comme la Bibliothèque d'Alexandrie était organisée pour un accès facile au savoir, une base de code bien structurée rend le développement plus efficace :
project-root/
├── dist/ # Built extension files
│ ├── manifest.json # Extension configuration
│ ├── index.html # User interface markup
│ ├── background.js # Background script functionality
│ └── main.js # Compiled JavaScript bundle
├── src/ # Source development files
│ └── index.js # Your main JavaScript code
├── package.json # Project dependencies and scripts
└── webpack.config.js # Build configuration
Ce que chaque fichier accomplit :
manifest.json: Définit les métadonnées, permissions et points d'entrée de l'extensionindex.html: Crée l'interface utilisateur visible quand les utilisateurs cliquent sur votre extensionbackground.js: Gère les tâches en arrière-plan et les écouteurs d'événements du navigateurmain.js: Contient le JavaScript final regroupé après le processus de buildsrc/index.js: Contient le code principal de développement qui sera compilé enmain.js
💡 Conseil d'organisation : Stockez votre clé API et le code région dans une note sécurisée pour y accéder facilement pendant le développement. Vous aurez besoin de ces valeurs pour tester la fonctionnalité de l'extension.
✅ Note de sécurité : Ne jamais commettre de clés API ou d’identifiants sensibles dans votre dépôt de code. Nous vous montrerons comment les gérer en toute sécurité dans les étapes suivantes.
Nous allons maintenant construire les composants de l'interface utilisateur. L'extension utilise une approche à deux écrans : un écran de configuration pour la configuration initiale et un écran de résultats pour l'affichage des données.
Cela suit le principe de divulgation progressive utilisé dans la conception d'interface depuis les débuts de l'informatique - révéler les informations et options dans une séquence logique pour éviter de surcharger les utilisateurs.
Vue de configuration - Configuration utilisateur initiale :
Vue des résultats - Affichage des données d'empreinte carbone :
Le formulaire de configuration recueille les données de configuration utilisateur lors de la première utilisation. Une fois configurées, ces informations sont conservées dans le stockage du navigateur pour les sessions futures.
Dans le fichier /dist/index.html, ajoutez cette structure de formulaire :
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>Ce que ce formulaire accomplit :
- Crée une structure de formulaire sémantique avec des labels appropriés et des associations d’éléments
- Active l'autocomplétion du navigateur pour une meilleure expérience utilisateur
- Exige que les deux champs soient remplis avant soumission grâce à l'attribut
required - Organise les champs avec des classes descriptives pour faciliter le style et le ciblage JavaScript
- Fournit des instructions claires pour les utilisateurs qui configurent l'extension pour la première fois
Ensuite, créez la zone de résultats qui affichera les données d'empreinte carbone. Ajoutez ce HTML sous le formulaire :
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>Ce que cette structure fournit :
loading: Affiche un message de chargement pendant la récupération des données APIerrors: Montre les messages d'erreur si les appels API échouent ou si les données sont invalidesdata: Contient les données brutes pour le débogage durant le développementresult-container: Présente les informations formatées de l’empreinte carbone aux utilisateursclear-btn: Permet aux utilisateurs de changer de région et reconfigurer l’extension
Installons maintenant les dépendances du projet et testons le processus de build :
npm installCe que ce processus d’installation accomplit :
- Télécharge Webpack et autres dépendances de développement spécifiées dans
package.json - Configure la chaîne de compilation pour compiler le JavaScript moderne
- Prépare l’environnement de développement pour la construction et le test de l’extension
- Active le regroupement, l’optimisation et la compatibilité multi-navigateurs du code
💡 Insight sur le build : Webpack regroupe votre code source de
/src/index.jsdans/dist/main.js. Ce processus optimise votre code pour la production et assure la compatibilité avec les navigateurs.
À ce stade, vous pouvez tester votre extension :
- Exécutez la commande de build pour compiler votre code
- Chargez l'extension dans votre navigateur en utilisant le mode développeur
- Vérifiez que le formulaire s'affiche correctement et a un aspect professionnel
- Contrôlez que tous les éléments du formulaire sont correctement alignés et fonctionnels
Ce que vous avez accompli :
- Construit la structure HTML de base pour votre extension
- Créé les interfaces de configuration et de résultats avec un balisage sémantique approprié
- Mis en place un workflow de développement moderne utilisant des outils standards de l'industrie
- Préparé les bases pour ajouter des fonctionnalités JavaScript interactives
Progrès dans le développement de l'extension : Vérifiez votre compréhension avant de continuer :
- ✅ Pouvez-vous expliquer le rôle de chaque fichier dans la structure du projet ?
- ✅ Comprenez-vous comment le processus de build transforme votre code source ?
- ✅ Pourquoi séparons-nous la configuration et les résultats dans différentes sections de l'interface utilisateur ?
- ✅ Comment la structure du formulaire soutient-elle à la fois l’utilisabilité et l’accessibilité ?
Compréhension du workflow de développement : Vous devriez maintenant être capable de :
- Modifier le HTML et le CSS pour l'interface de votre extension
- Exécuter la commande de build pour compiler vos changements
- Recharger l'extension dans votre navigateur pour tester les mises à jour
- Déboguer les problèmes en utilisant les outils de développement du navigateur
Vous avez terminé la première phase du développement d’une extension de navigateur. Comme les frères Wright ont d'abord dû comprendre l'aérodynamique avant de réussir le vol, comprendre ces concepts fondamentaux vous prépare à construire des fonctionnalités interactives plus complexes dans la prochaine leçon.
Utilisez le mode Agent pour relever le défi suivant :
Description : Améliorez l'extension de navigateur en ajoutant la validation de formulaire et des retours utilisateur pour améliorer l'expérience lors de la saisie de clés API et de codes régionaux.
Consigne : Créez des fonctions de validation JavaScript qui vérifient si le champ de clé API contient au moins 20 caractères et si le code de région suit le format correct (comme 'US-NEISO'). Ajoutez un retour visuel en changeant la bordure des champs en vert pour les entrées valides et en rouge pour celles invalides. Ajoutez aussi un bouton bascule pour afficher/masquer la clé API pour des raisons de sécurité.
En savoir plus sur le mode agent ici.
Jetez un œil à un magasin d’extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers d'une manière intéressante. Que découvrez-vous ?
Dans cette leçon, vous avez appris un peu sur l'histoire du navigateur web ; profitez-en pour découvrir comment les inventeurs du World Wide Web ont envisagé son usage en lisant plus sur son histoire. Quelques sites utiles incluent :
L'Histoire des Navigateurs Web
Une interview de Tim Berners-Lee
- Ouvrir la page des extensions Chrome/Edge (chrome://extensions) et explorer celles que vous avez installées
- Regarder l’onglet Réseau des DevTools de votre navigateur lors du chargement d’une page web
- Essayer de visualiser le code source d’une page (Ctrl+U) pour voir la structure HTML
- Inspecter n’importe quel élément d’une page web et modifier son CSS dans DevTools
- Terminer le quiz post-leçon et comprendre les fondamentaux du navigateur
- Créer un fichier manifest.json basique pour une extension de navigateur
- Construire une extension simple « Hello World » qui affiche un popup
- Tester le chargement de votre extension en mode développeur
- Explorer la documentation des extensions pour votre navigateur cible
- Compléter une extension fonctionnelle et utile
- Découvrir les scripts de contenu, scripts en arrière-plan, et interactions popup
- Maîtriser les API de navigateur comme le stockage, les onglets, et la messagerie
- Concevoir des interfaces conviviales pour votre extension
- Tester votre extension sur différents sites et scénarios
- Publier votre extension sur la boutique d'extensions du navigateur
- Créer plusieurs extensions répondant à différents besoins utilisateurs
- Apprendre les API avancées du navigateur et les meilleures pratiques de sécurité
- Contribuer à des projets open source d’extensions de navigateur
- Maîtriser la compatibilité multi-navigateurs et l’amélioration progressive
- Créer des outils et modèles de développement d’extensions pour d'autres
- Devenir un expert des extensions browser aidant d’autres développeurs
timeline
title Progression du développement d'extensions de navigateur
section Fondations (15 minutes)
Compréhension du navigateur : Architecture de base
: Processus de rendu
: Points d'intégration des extensions
section Configuration (20 minutes)
Environnement de développement : Structure du projet
: Configuration des outils de build
: Mode développeur du navigateur
: Processus de chargement de l'extension
section Conception de l'interface (25 minutes)
Expérience utilisateur : Structure HTML
: Style CSS
: Validation des formulaires
: Design responsive
section Fonctionnalité principale (35 minutes)
Intégration JavaScript : Gestion des événements
: Interactions avec l'API
: Stockage des données
: Gestion des erreurs
section APIs du navigateur (45 minutes)
Intégration plateforme : Système de permissions
: APIs de stockage
: Gestion des onglets
: Menus contextuels
section Fonctionnalités avancées (1 semaine)
Extensions professionnelles : Scripts en arrière-plan
: Scripts de contenu
: Compatibilité multi-navigateurs
: Optimisation des performances
section Publication (2 semaines)
Distribution : Soumission sur le store
: Processus de révision
: Retours des utilisateurs
: Gestion des mises à jour
section Niveau expert (1 mois)
Écosystème des extensions : APIs avancées
: Meilleures pratiques de sécurité
: Fonctionnalités d'entreprise
: Intégration de frameworks
Après avoir terminé cette leçon, vous disposez maintenant de :
- Connaissances en architecture de navigateur : Compréhension des moteurs de rendu, des modèles de sécurité et de l’intégration des extensions
- Environnement de développement : Chaîne d’outils moderne avec Webpack, NPM et capacités de débogage
- Base UI/UX : Structure HTML sémantique avec modèles de divulgation progressive
- Sensibilisation à la sécurité : Compréhension des permissions navigateur et des bonnes pratiques de développement sécurisées
- Concepts multi-navigateurs : Connaissance des considérations de compatibilité et des approches de test
- Intégration d’API : Fondations pour travailler avec des sources de données externes
- Workflow professionnel : Procédures de développement et de test standards de l’industrie
Applications réelles : Ces compétences s’appliquent directement à :
- Développement web : Applications monopage et applications web progressives
- Applications de bureau : Electron et logiciels desktop basés sur le web
- Développement mobile : Apps hybrides et solutions mobiles web
- Outils d’entreprise : Applications de productivité internes et automatisation des workflows
- Open Source : Contribution à des projets d’extensions de navigateur et aux standards web
Niveau supérieur : Vous êtes prêt à ajouter des fonctionnalités interactives, à travailler avec les API navigateur, et à créer des extensions qui résolvent de vrais problèmes utilisateurs !
Avertissement :
Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous fassions tout notre possible pour garantir l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.