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

 (github.com/cezaraugusto)
4 points par GN⁺ 2024-05-02 | 1 commentaires | Partager sur WhatsApp
  • Extension.js est un CLI pour créer des extensions web pour Chrome, Edge et Firefox, qui permet de démarrer le développement avec seulement npx extension@latest create my-extension et npm run dev
  • L’objectif est de réduire la fragmentation de Manifest V3, les différences entre navigateurs, l’absence de hot reload pour les scripts de contenu et les pipelines de build séparés par cible à un flux de développement sans configuration
  • Il fournit le Hot Module Replacement pour les scripts d’arrière-plan, de contenu, de popup et d’options, et prend en charge en priorité les composants React, Vue, Svelte, Preact ainsi que TypeScript
  • extension build --zip permet de créer un ZIP de production pour soumission au Chrome Web Store, à Edge Add-ons et à Firefox AMO, avec aussi des builds par navigateur comme --browser=firefox
  • Il peut aussi être adopté dans des extensions existantes en ajoutant extension@latest comme dépendance de développement et en reliant les scripts build, dev et preview

Le problème qu’Extension.js veut résoudre

  • Extension.js est un outil CLI pour créer des extensions Chrome, Edge et Firefox
  • Le flux d’utilisation de base consiste à créer un nouveau projet puis à lancer le serveur de développement
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Il fonctionne avec npm, pnpm, yarn et bun
  • La documentation, les templates et les exemples sont disponibles respectivement sur Documentation, Templates et Examples

Expérience de développement et fonctionnalités clés

  • L’accent est mis sur la réduction des problèmes rencontrés dans le développement d’extensions de navigateur : fragmentation de Manifest V3, différences entre navigateurs, absence de hot reload pour les scripts de contenu et pipelines de build propres à chaque cible
  • Le Hot Module Replacement s’applique aux scripts background, content, popup et options
    • Cela inclut aussi les composants React, Vue, Svelte et Preact
  • Manifest V3 est utilisé par défaut, avec des adaptateurs automatiques pour les cibles Chrome, Edge et Firefox
  • Un seul CLI permet d’exécuter l’extension sur Chrome, Edge, Firefox ainsi que sur des binaires basés sur Chromium ou Gecko
  • Il vise le zero config, sans webpack, rollup ni plugins à maintenir
  • TypeScript, React, Vue, Svelte et Preact sont pris en charge en priorité
  • extension build --zip permet de créer un build de production adapté aux soumissions au Chrome Web Store et à Firefox Add-ons
  • Il peut aussi être ajouté à une extension existante comme unique devDependency

Différences avec les autres outils de développement d’extensions

  • Extension.js présente ses différences fonctionnalité par fonctionnalité pour les utilisateurs ayant essayé Plasmo, WXT ou CRXJS
  • Les exemples GitHub peuvent être exécutés directement
  • Il fournit des binaires de navigateur gérés
    • Exemple : extension install firefox télécharge un build Firefox isolé
  • Le HMR cross-browser pour les scripts de contenu est intégré et ne nécessite pas de plugin séparé
  • Il permet de créer un ZIP de production pour soumission aux stores
    • Exemple : extension build --zip
  • Il n’est pas lié à un framework
  • Il est possible de spécifier des binaires Chromium et Gecko personnalisés
    • --chromium-binary
    • --gecko-binary

Frameworks et navigateurs pris en charge

  • Les frameworks pris en charge et les exemples d’exécution sont fournis sous forme de templates ou d’exemples
  • Les flags liés au navigateur peuvent être utilisés avec extension dev, extension start et extension preview
    • --browser <chrome | edge | firefox> permet de choisir le navigateur
    • --chromium-binary <path-to-binary> permet de spécifier un binaire Chromium personnalisé
    • --gecko-binary <path-to-binary> permet de spécifier un binaire Gecko ou Firefox personnalisé
  • Les navigateurs pris en charge sont Google Chrome, Microsoft Edge, Mozilla Firefox, les navigateurs basés sur Chromium et ceux basés sur Gecko
  • Apple Safari est indiqué comme Next

Build, packaging et navigateurs gérés

  • Le build de production s’exécute avec npx extension@latest build
  • Le package ZIP pour soumission aux stores est généré avec npx extension@latest build --zip
  • Les builds par navigateur sont également possibles
    • Exemple : npx extension@latest build --browser=firefox --zip
  • Des flags de build utiles sont fournis
    • --zip : package en ZIP pour l’upload sur les stores
    • --zip-source : inclut les fichiers source pour la revue du code source par les stores
    • --zip-filename <name> : contrôle le nom du fichier de sortie
    • --polyfill : active le polyfill webextension cross-browser
  • Extension.js peut télécharger et gérer des binaires de navigateur isolés pour des sessions de développement propres
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Extensions existantes et exécution d’exemples

  • Pour une extension existante, il s’installe comme dépendance de développement
    • npm install extension@latest --save-dev
  • Il peut être utilisé en reliant extension build, extension dev et extension preview dans les scripts de package.json
    • npm run dev : développement
    • npm run build : build de production
    • npm run preview : vérification de la sortie de production
  • Les exemples de Chrome Extension Samples peuvent être récupérés et exécutés directement
  • La communauté et les exemples sont disponibles sur Discord, GitHub issues et examples
  • La licence est MIT

À lire aussi

1 commentaires

 
GN⁺ 2024-05-02
Commentaires sur Hacker News

  • Super projet. Je me demande si je pourrais l’utiliser aussi pour mon extension (https://github.com/herrherrmann/omnivore-list-popup)
    Jusqu’ici, je gérais moi-même via des scripts le build de l’extension et le mode développement, mais je regardais déjà si web-ext pouvait simplifier ça
    Cela dit, mon navigateur principal est Firefox, et Extension.js ne semble pas encore le prendre totalement en charge

    • Un module Mozilla Add-On peut s’exécuter sur Chrome ou Edge avec le flag --polyfill, mais pour l’instant il faut encore ajouter l’extension manuellement dans Firefox
      Il est prévu d’ajouter prochainement la prise en charge de Firefox, mais pour le moment il n’y a pas de lanceur de navigateur

  • C’est exactement l’outil qu’il me faut en ce moment. Merci de l’avoir créé et partagé, et j’espère que la prise en charge de Firefox arrivera bien
    Issue sur la prise en charge de Firefox : https://github.com/cezaraugusto/extension.js/issues/5

    • Ce serait particulièrement utile si ça pouvait aider à gérer les exigences contradictoires de manifest.json
      Par exemple, la différence entre event pages et background service workers, ou les cas où les permissions exigées ou interdites varient selon les navigateurs
    • Ce serait bien d’ajouter plus de détails dans l’issue GitHub sur le support Firefox. La communauté pourra peut-être aider à résoudre ça

  • Je suis un peu perplexe. J’ai déjà écrit une extension uniquement pour Chrome en JavaScript, et au départ il suffisait surtout de copier quelques fichiers depuis le site de documentation des extensions Chrome
    Je n’ai pas configuré d’IDE particulier, et je ne vois pas trop ce qu’il faudrait faire de plus
    J’aimerais comprendre ce que cet outil apporte au-delà de copier quelques fichiers. Est-ce surtout du support multi-navigateurs ou du support multilingue ?

    • Dans ce cas, Extension.js peut gérer des détails de configuration faciles à rater dans le développement web classique
      Après avoir copié quelques fichiers depuis la documentation des extensions Chrome, il faut encore activer soi-même le « mode développeur » dans le navigateur et ajouter les fichiers. Quand on modifie le code, il faut rafraîchir manuellement plusieurs contextes d’exécution affectés par l’extension pour voir les changements. Et si on veut tester sur plusieurs navigateurs, il faut répéter ce processus pour chacun
      Si on veut utiliser des dépendances packagées comme TypeScript ou des frameworks JavaScript, il faut soit dépendre d’un framework d’abstraction d’extensions existant et apprendre une nouvelle façon de faire, soit monter soi-même une configuration avec des outils comme webpack, Parcel ou esbuild. À ce stade, le développement d’extensions de navigateur peut vite devenir complexe et frustrant
      Extension.js simplifie tout cela en automatisant le bundling et l’exécution de l’extension dans un navigateur de développement. Il prend en charge le rechargement automatique dans tous les contextes d’exécution, y compris ceux hors HTML/CSS/JavaScript dans le navigateur, et il supporte aussi des dépendances de code comme TypeScript et React par simple installation, sans magie de configuration supplémentaire. Le tout fonctionne aussi simultanément sur plusieurs navigateurs

  • Beau projet. J’ai créé ma première extension Chrome avec https://crxjs.dev/vite-plugin/getting-started, mais il a fallu pas mal bricoler pour que le style fonctionne correctement
    C’était peut-être simplement parce que c’était mon premier développement d’extension de navigateur : https://chromewebstore.google.com/detail/bettermenu-for-door...
    J’ai encore beaucoup à faire, donc je vais aussi jeter un œil à ce projet

  • Vraiment chouette. Même le README est magnifique et très soigné
    Google Play est tellement mal fichu que je repoussais le moment d’ajouter une extension à mon app, mais je pense essayer ça

  • Très sympa. Je me demande comment ça se compare à un framework similaire comme Plasmo
    https://www.plasmo.com/

    • À mon avis, la plus grande différence est que Plasmo est un framework. Donc pour créer une nouvelle extension, il faut apprendre son abstraction et s’appuyer sur des exemples conçus pour elle
      Il faut aussi suivre des fichiers de configuration et certaines conventions qui ne sont pas forcément liées directement aux extensions de navigateur
      À l’inverse, Extension.js permet de créer une extension avec les API d’extension standard et n’abstrait que les fichiers de configuration. Il n’y a pas besoin d’apprendre les détails propres à l’outil. Donc si des exemples Chrome ou MDN fonctionnent avec le fichier manifeste comme source unique de vérité, il n’y a pas besoin de les refactorer pour les utiliser avec Extension.js, ce qui facilite le démarrage d’un nouveau projet et la création d’un prototype
    • Plasmo a l’air très utile. Je me demande si tu l’as déjà utilisé en pratique pour développer des extensions

  • J’ai déjà créé quelques extensions. L’une était un petit délire : quand imgur a changé la couleur du cœur et que tout le monde s’en plaignait, j’ai fait une extension pour la modifier
    À chaque fois que je crée une extension Chrome, je ressens fortement le syndrome de l’imposteur. Étrangement, lancer un nouveau projet me paraît toujours très difficile, donc ce genre d’outil serait vraiment appréciable

    • Je compatis totalement. J’ai l’impression que le développement d’extensions devrait être amusant à la base. J’espère qu’Extension.js t’aidera sur ton prochain projet

  • J’aime bien. Ce serait bien d’ajouter aussi un peu de magie pour la communication entre l’extension et les onglets
    Chaque fois que je crée une extension, lire le DOM ou envoyer des messages depuis l’extension vers l’onglet actif est toujours pénible

    • Plasmo a une bibliothèque de messagerie qui vaut peut-être le détour
      https://docs.plasmo.com/framework/messaging
    • Ce n’est pas prévu pour l’instant, mais il doit sûrement déjà exister de bonnes bibliothèques sur npm
    • Je serais curieux de savoir ce qui, dans ce processus, te frustre ou te paraît particulièrement confus

  • J’ai ajouté une issue. Le support de Safari devrait être relativement simple avec l’outil CLI safari-web-extension-converter d’Apple

  • Ça a l’air bien. Je vais essayer ça sur mon extension Vim for Docs
    C’est dommage que Firefox ne soit pas pris en charge, mais en même temps il n’existe pas vraiment d’outil de build d’extensions qui supporte à la fois Firefox et les navigateurs basés sur Chromium

    • Le support de Firefox est prévu pour la prochaine mise à jour. Tu peux t’en réjouir