Show HN : création d’un outil CLI pour générer des extensions web sans configuration de build

Présentation d’Extension.js

• Extension.js est un outil de développement d’extensions web cross-browser de type plug-and-play qui ne nécessite aucune configuration.
• Il prend en charge par défaut TypeScript, WebAssembly, React et le JavaScript moderne, ce qui permet de créer des extensions multi-navigateurs.

Créer une nouvelle extension

• Vous pouvez créer facilement une nouvelle extension avec les commandes ci-dessous

  npx extension create my-extension
  cd my-extension
  npm run dev
  

• Une fois la commande exécutée, une nouvelle instance de navigateur s’ouvre et vous pouvez commencer à développer immédiatement.

Utiliser Chrome Extension Samples

• Vous pouvez démarrer rapidement le développement en utilisant des exemples du dépôt Chrome Extension Samples.
  1. Ouvrez un terminal
  2. Accédez au répertoire où créer le projet
  3. Exécutez la commande suivante

     npx extension dev <sample-name>
     

  • Remplacez <sample-name> par le nom de l’exemple à utiliser depuis Chrome Extension Samples
• Exemple : demande de l’échantillon page-redder

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
  

Utiliser les Chrome Extension Samples sur Microsoft Edge

• Extension.js prend en charge plusieurs navigateurs, y compris Microsoft Edge.
• Démarrage d’une extension compatible Edge :
  1. Ouvrez un terminal
  2. Accédez au répertoire du projet souhaité
  3. Exécutez la commande suivante

     npx extension dev <sample-name> --browser=edge
     

  • Remplacez <sample-name> par le nom de l’échantillon à utiliser
• Exemple : exécuter l’échantillon magic8ball sur Edge

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge 
  

Exécuter des modules Mozilla sur Edge

• Pour réduire l’écart entre Firefox et Edge, les extensions Mozilla peuvent être exécutées sur Edge.
  1. Accédez au répertoire du projet
  2. Utilisez la commande suivante

     npx extension dev <addon-name> --browser=edge --polyfill=true
     

  • Importez l’extension Mozilla et ajustez-la pour Edge
• Exemple : exécuter l’exemple Apply CSS de MDN WebExtensions Examples sur Edge

  npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
  

Utiliser Extension.js pour une extension existante

• Si une extension existante utilise déjà un gestionnaire de paquets, vous pouvez l’installer puis exécuter les scripts générés par Extension.js.
  1. Installez extension en tant que devDependency

     npm install extension --save-dev
     

  2. Raccordez les scripts npm aux commandes Extension.js

     {
       "scripts": {
         "build": "extension build", 
         "dev": "extension dev",
         "start": "extension start"  
       },
       "devDependencies": {
         "extension": "latest"
       }
     }
     

• Utilisez npm run dev en développement, npm run start pour la visualisation en production et npm run build pour la création du build de production.

Utiliser un navigateur spécifique pour le développement

• Prise en charge des navigateurs de bureau

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

• ☑️ = fonctionnel avec une forte probabilité, mais le lanceur de navigateur n’est pas pris en charge
• Prise en charge des navigateurs mobiles

Firefox Android	iOS Safari
⛔️	⛔️

• Quand vous ciblez un navigateur précis, passez le flag --browser aux commandes dev/start
  • Exemple : npx extension dev path/to/extension --browser=edge
• Astuce : passer --browser="all" charge tous les navigateurs disponibles en une seule fois.

Opinion de GN⁺

• Extension.js paraît être un outil puissant pour le développement d’extensions cross-browser. Le fait qu’il puisse être utilisé immédiatement sans configuration et de manière multi-navigateurs pourrait réduire considérablement le temps de développement.
• Le fait aussi de pouvoir réutiliser des exemples existants comme Chrome Extension Samples ou MDN WebExtensions Examples est un atout important. Les développeurs débutants devraient pouvoir démarrer facilement.
• Cependant, il semble que certains navigateurs comme Firefox ou Safari ne soient pas encore totalement pris en charge, il faut donc rester prudent. Si vous ciblez un navigateur précis uniquement, il peut être pertinent d’utiliser les outils de développement dédiés à ce navigateur.
• Je suis curieux de connaître les avantages et les inconvénients d’Extension.js par rapport à des outils similaires comme Plasmo ou WebExtensions API. Il faut aussi vérifier son support des spécifications récentes, notamment Manifest V3.

[GN⁺]

Avis sur Hacker News

• Extension.js, un framework pratique pour le développement d’extensions Chrome, a été présenté
  • Le support actuel de Firefox n’est pas encore parfait
• D’autres développeurs ont aussi partagé leurs expériences de difficultés lors du développement d’extensions Chrome
  • L’application des styles était particulièrement compliquée
  • On s’attend à ce qu’Extension.js résolve ces difficultés
• Extension.js a également reçu des éloges pour la qualité de sa documentation README
• Même un développeur qui hésitait à ajouter une extension à une application à cause de la complexité de Google Play envisage maintenant de l’utiliser
• Des avis ont été exprimés en faveur de l’ajout dans Extension.js d’une communication entre l’extension et les onglets
  • Il était peu pratique de lire depuis le DOM ou d’envoyer des messages vers l’onglet actif depuis l’extension
• Une question a été soulevée sur la comparaison avec des frameworks similaires comme Plasmo
• Le syndrome de l’imposteur rencontré lors du développement d’extensions Chrome a été évoqué
  • Créer un nouveau projet est difficile
  • On espère qu’Extension.js permettra d’y remédier
• Concernant le support de Safari, il a été suggéré qu’il serait relativement simple en utilisant l’outil CLI safari-web-extension-converter
• En se basant sur une expérience antérieure de développement d’extensions Chrome, certains ont exprimé leur curiosité sur les atouts d’Extension.js
  • Qu’offre-t-il au-delà de la simple copie de fichiers ?
  • Un support multi-plateforme ? Un support multilingue ?
• Des attentes ont été exprimées vis-à-vis d’Extension.js par un développeur qui avait ressenti un manque d’outils pour le développement d’extensions Chrome