Comment commencer à développer des extensions de navigateur

Bien que développer des extensions de navigateur utilise les technologies frontend, les interfaces et les modes de fonctionnement sont différents de ceux des pages web, donc trouver quelques frameworks de développement peut considérablement améliorer l’efficacité. Et le développement d’extensions de navigateur est encore un domaine de niche comparé au développement web et d’applications, la communauté de développeurs n’est clairement pas aussi animée que celle des autres. Heureusement, tous les outils de développement nécessaires sont disponibles, voici un aperçu de ceux que j’ai utilisés.

Maintenant, le développement d’extensions pour tous les navigateurs principaux suit une norme unifiée : manifest v3, donc le processus de développement et la stack technologique sont similaires. Il peut y avoir des différences dans certains détails, je marquerai les endroits que j’ai rencontrés.

Frameworks de développement

Un framework de développement qualifié doit au minimum établir la structure du repo, supporter le hot reload pour le débogage, supporter les suggestions de types d’interface d’extension de navigateur, etc. Choisissez une de ces stacks technologiques.

Template de repository de code

React + typescript + vite + monorepo : https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Plus précisément, c’est un template, pas un framework. Il contient les fonctionnalités qu’un framework de développement devrait avoir. Pour un développement d’extension de navigateur avec des interfaces pas trop complexes, je préfère personnellement un template de repository qui montre tous les détails plutôt qu’un framework qui cache les détails d’implémentation.

• Supporte HMR, sourcemap, etc.
• Utilise pnpm + turbo pour gérer le monorepo
• Fournit l’implémentation de toutes les fonctionnalités d’extension Chrome, y compris la page d’accueil des onglets, devtools, la barre latérale, etc., pratique pour référence et remplacement
• Build pour Chrome, Firefox et tous les navigateurs principaux. Compatibilité par défaut pour Firefox
• Pas de détails cachés, tout le code est affiché, facile à comprendre et modifier

Plasmo

Si vous n’aimez pas le template ci-dessus, vous pouvez considérer le framework Plasmo

• Supporte React, Vue, Angular et autres frameworks principaux
• Supporte les fonctionnalités de débogage comme HMR
• Utilise Parcel pour le build, pas vite
• Certains détails (comme la génération du manifest, le processus de rendu de l’UI content) sont encapsulés, difficile à comprendre

Débogage

• Charger l’extension
  • Exécuter npm dev dans le repo
  • Ouvrir les extensions dans Chrome : chrome://extensions/
  • Activer le “Mode développeur” -> Cliquer sur “Charger l’extension non empaquetée” -> Sélectionner le dossier de sortie compilé
• Le débogage se fait via les chrome devtools
  • Content scripts : Dans l’onglet “Sources”, sélectionner “Content scripts” pour déboguer le code
  • Background script s’exécute dans un service worker, donc ouvrir chrome://extensions/ -> Trouver l’extension -> Cliquer sur service worker pour déboguer le code