Show HN: CLI-Tool zum Erstellen von Web-Erweiterungen ohne Build-Konfiguration

 (github.com/cezaraugusto)
4 Punkte von GN⁺ 2024-05-02 | 1 Kommentare | Auf WhatsApp teilen
  • Extension.js ist eine CLI zum Bauen von Web-Erweiterungen für Chrome, Edge und Firefox; mit npx extension@latest create my-extension und npm run dev kann man direkt mit der Entwicklung starten
  • Ziel ist es, Fragmentierung bei Manifest V3, browser­spezifische Unterschiede, fehlendes Hot Reloading für Content Scripts und separate Build-Pipelines pro Ziel auf einen konfigurationslosen Entwicklungsfluss zu reduzieren
  • Bietet Hot Module Replacement für Background-, Content-, Popup- und Options-Scripts und unterstützt React-, Vue-, Svelte- und Preact-Komponenten sowie TypeScript als First-Class-Citizens
  • Mit extension build --zip lassen sich Produktions-ZIPs für Einreichungen im Chrome Web Store, bei Edge Add-ons und Firefox AMO erstellen; auch browser­spezifische Builds wie --browser=firefox sind möglich
  • Lässt sich auch in bestehende Erweiterungen einführen, indem man extension@latest als Development Dependency hinzufügt und die Scripts build, dev und preview verknüpft

Welches Problem Extension.js lösen will

  • Extension.js ist ein CLI-Tool zum Erstellen von Erweiterungen für Chrome, Edge und Firefox
  • Der grundlegende Ablauf besteht darin, ein neues Projekt zu erzeugen und anschließend den Entwicklungsserver zu starten
    • npx extension@latest create my-extension
    • cd my-extension
    • npm run dev
  • Funktioniert mit npm, pnpm, yarn und bun
  • Dokumentation, Templates und Beispiele werden jeweils unter Documentation, Templates und Examples bereitgestellt

Developer Experience und Kernfunktionen

  • Der Fokus liegt darauf, Probleme bei der Entwicklung von Browser-Erweiterungen zu verringern: Fragmentierung bei Manifest V3, browser­spezifische Unterschiede, fehlendes Hot Reloading für Content Scripts und Build-Pipelines pro Ziel
  • Hot Module Replacement gilt für Background-, Content-, Popup- und Options-Scripts
    • Einschließlich React-, Vue-, Svelte- und Preact-Komponenten
  • Nutzt Manifest V3 standardmäßig und bietet automatische Adapter für die Ziele Chrome, Edge und Firefox
  • Mit einer einzigen CLI lassen sich Chrome, Edge, Firefox sowie Chromium- oder Gecko-basierte Binaries ansteuern
  • Strebt Zero Config an, ohne webpack, rollup oder zu wartende Plugins
  • Unterstützt TypeScript, React, Vue, Svelte und Preact als First-Class-Citizens
  • Mit extension build --zip lassen sich Produktions-Builds erstellen, die auf Einreichungen im Chrome Web Store und bei Firefox Add-ons zugeschnitten sind
  • Kann bestehenden Erweiterungen als einzelne devDependency hinzugefügt werden

Unterschiede zu anderen Tools für Erweiterungsentwicklung

  • Für Nutzer von Plasmo, WXT und CRXJS werden die Unterschiede von Extension.js nach Funktionen dargestellt
  • GitHub-Beispiele können direkt ausgeführt werden
  • Stellt verwaltete Browser-Binaries bereit
    • Beispiel: extension install firefox lädt einen isolierten Firefox-Build herunter
  • Cross-Browser-HMR für Content Scripts ist integriert; es muss kein separates Plugin angebunden werden
  • Kann Produktions-ZIPs für Store-Einreichungen erstellen
    • Beispiel: extension build --zip
  • Ist nicht an ein Framework gebunden
  • Benutzerdefinierte Chromium- und Gecko-Binaries können angegeben werden
    • --chromium-binary
    • --gecko-binary

Unterstützte Frameworks und Browser

  • Unterstützte Frameworks und ausführbare Beispiele werden als Templates oder Beispiele bereitgestellt
  • In extension dev, extension start und extension preview können browserbezogene Flags verwendet werden
    • Mit --browser <chrome | edge | firefox> wird der Browser ausgewählt
    • Mit --chromium-binary <path-to-binary> wird eine benutzerdefinierte Chromium-Binary angegeben
    • Mit --gecko-binary <path-to-binary> wird eine benutzerdefinierte Gecko- oder Firefox-Binary angegeben
  • Unterstützte Browser sind Google Chrome, Microsoft Edge, Mozilla Firefox sowie Chromium- und Gecko-basierte Browser
  • Apple Safari ist als Next markiert

Build, Packaging und verwaltete Browser

  • Produktions-Builds werden mit npx extension@latest build ausgeführt
  • ZIP-Pakete für Store-Einreichungen werden mit npx extension@latest build --zip erzeugt
  • Auch browser­spezifische Builds sind möglich
    • Beispiel: npx extension@latest build --browser=firefox --zip
  • Nützliche Build-Flags werden bereitgestellt
    • --zip: Paketiert als ZIP für Store-Uploads
    • --zip-source: Schließt Quelldateien für die Quellcodeprüfung des Stores ein
    • --zip-filename <name>: Steuert den Namen der Ausgabedatei
    • --polyfill: Aktiviert das Cross-Browser-WebExtension-Polyfill
  • Für saubere Entwicklungssitzungen kann Extension.js isolierte Browser-Binaries herunterladen und verwalten
    • npx extension@latest install firefox
    • npx extension@latest install --browser=all
    • npx extension@latest install --where

Bestehende Erweiterungen und Ausführen von Beispielen

  • In bestehenden Erweiterungen wird es als Development Dependency installiert
    • npm install extension@latest --save-dev
  • In den package.json-Scripts können extension build, extension dev und extension preview verknüpft und verwendet werden
    • npm run dev: Entwicklung
    • npm run build: Produktions-Build
    • npm run preview: Produktionsausgabe prüfen
  • Beispiele aus den Chrome Extension Samples können direkt abgerufen und ausgeführt werden
  • Community und Beispiele werden über Discord, GitHub issues und examples bereitgestellt
  • Die Lizenz ist MIT

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-05-02
Meinungen auf Hacker News

  • Cooles Projekt. Ich überlege, es auch für meine Erweiterung (https://github.com/herrherrmann/omnivore-list-popup) auszuprobieren.
    Bisher habe ich den Extension-Build und die Verwaltung des Entwicklungsmodus selbst per Skript erledigt, habe aber schon geschaut, ob sich das mit web-ext bequemer machen lässt.
    Mein Hauptbrowser ist allerdings Firefox, und Extension.js scheint Firefox noch nicht vollständig zu unterstützen.

    • Mozilla Add-ons können mit dem Flag --polyfill in Chrome oder Edge ausgeführt werden, aber derzeit muss man die Erweiterung in Firefox manuell hinzufügen.
      Firefox-Unterstützung ist zwar für die nähere Zukunft geplant, aber aktuell gibt es keinen Browser-Launcher.

  • Genau das Tool, das ich gerade brauche. Danke fürs Bauen und Teilen; ich hoffe, dass die Firefox-Unterstützung gut wird.
    Issue zur Firefox-Unterstützung: https://github.com/cezaraugusto/extension.js/issues/5

    • Besonders hilfreich wäre es, wenn es beim Umgang mit widersprüchlichen Anforderungen in der manifest.json helfen würde.
      Zum Beispiel gibt es Unterschiede zwischen Event Pages und Background Service Workern oder uneinheitliche Berechtigungen, die je nach Browser verlangt oder verboten werden.
    • Es wäre gut, wenn du im GitHub-Issue zur Firefox-Unterstützung mehr Details ergänzt. Die Community könnte vielleicht bei der Lösung helfen.

  • Ich bin etwas verwirrt. Ich habe schon einmal eine Chrome-only-Erweiterung in JavaScript geschrieben, und der Einstieg bestand im Wesentlichen darin, ein paar Dateien von der Dokumentationsseite für Chrome-Erweiterungen zu kopieren.
    Eine IDE-Konfiguration habe ich nicht vorgenommen, und ich weiß auch nicht so recht, was ich da tun müsste.
    Ich würde gern verstehen, was dieses Tool über das Kopieren einiger Dateien hinaus leistet. Geht es um Cross-Browser-Unterstützung oder um Unterstützung mehrerer Sprachen?

    • In solchen Fällen kann Extension.js die Konfigurationsdetails übernehmen, die man in der normalen Webentwicklung leicht übersieht.
      Nachdem man ein paar Dateien aus der Chrome-Extension-Dokumentation kopiert hat, muss man im Browser manuell den „Entwicklermodus“ aktivieren und die Dateien hinzufügen. Wenn man Code ändert, muss man die verschiedenen Ausführungskontexte, auf die die Browser-Erweiterung wirkt, manuell neu laden, um die Änderungen zu sehen. Will man in mehreren Browsern testen, muss man diesen Vorgang jeweils wiederholen.
      Wenn man Paketabhängigkeiten wie TypeScript oder ein JavaScript-Framework verwenden möchte, muss man entweder auf ein bestehendes Abstraktions-Framework für Erweiterungen setzen und dessen neuen Ansatz lernen oder selbst eine Konfiguration mit Tools wie webpack, Parcel oder esbuild erstellen. Spätestens dann kann die Entwicklung von Browser-Erweiterungen komplex und frustrierend werden.
      Extension.js vereinfacht das, indem es den Prozess automatisiert, die Erweiterung zu bündeln und in einem Entwicklungsbrowser auszuführen. Es unterstützt automatisches Neuladen in allen Ausführungskontexten, einschließlich Browser-Bereichen jenseits von HTML/CSS/JavaScript, und unterstützt Code-Abhängigkeiten wie TypeScript und React ohne zusätzliche Konfigurationsmagie, nur durch Installation. Es läuft auch gleichzeitig in mehreren Browsern.

  • Gutes Projekt. Meine erste Chrome-Erweiterung habe ich mit https://crxjs.dev/vite-plugin/getting-started gebaut, aber es war ziemlich aufwendig, die Styles richtig zum Laufen zu bringen.
    Vielleicht lag es auch daran, dass es meine erste Entwicklung einer Browser-Erweiterung war: https://chromewebstore.google.com/detail/bettermenu-for-door...
    Da noch viel zu tun ist, werde ich mir dieses Projekt ebenfalls ansehen.

  • Wirklich großartig. Sogar das README ist wunderschön gemacht.
    Weil Google Play so ein Durcheinander ist, habe ich es bisher aufgeschoben, meiner App eine Erweiterung hinzuzufügen, aber ich denke, ich werde das hier einmal ausprobieren.

  • Cool. Mich würde interessieren, wie es sich im Vergleich zu einem ähnlichen Framework wie Plasmo schlägt.
    https://www.plasmo.com/

    • Der größte Unterschied ist meiner Meinung nach, dass Plasmo ein Framework ist. Das heißt, um eine neue Erweiterung zu erstellen, muss man dessen Abstraktion lernen und sich auf Beispiele stützen, die auf diese Abstraktion zugeschnitten sind.
      Man muss außerdem Konfigurationsdateien und bestimmte Regeln befolgen, die nicht unbedingt direkt mit Browser-Erweiterungen selbst zu tun haben.
      Extension.js hingegen ermöglicht es, Erweiterungen mit den Standard-Extension-APIs zu bauen, und abstrahiert nur die Konfigurationsdateien. Man muss keine tool-spezifischen Details lernen. Wenn also Beispiele aus Chrome oder MDN mit der Manifest-Datei als einziger Grundlage funktionieren, müssen sie für Extension.js nicht refaktoriert werden. Dadurch wird es einfacher, neue Projekte zu starten und Prototypen zu bauen.
    • Plasmo sieht sehr nützlich aus. Ich frage mich, ob du es tatsächlich schon für die Entwicklung von Erweiterungen verwendet hast.

  • Ich habe ein paar Erweiterungen gebaut. Eine davon war eher zum Spaß: Als imgur die Herzfarbe geändert hat und alle unzufrieden waren, habe ich eine Erweiterung geschrieben, die diese Farbe wieder ändert.
    Jedes Mal, wenn ich eine Chrome-Erweiterung erstelle, bekomme ich starkes Impostor-Syndrom. Aus irgendeinem Grund ist es so schwierig, ein neues Projekt anzulegen; so ein Tool wäre wirklich großartig.

    • Kann ich komplett nachvollziehen. Erweiterungsentwicklung sollte doch eigentlich Spaß machen. Ich hoffe, Extension.js hilft dir beim nächsten Projekt.

  • Gefällt mir. Es wäre schön, wenn ihr auch etwas Magie über die Kommunikation zwischen Erweiterung und Tabs streuen würdet.
    Jedes Mal, wenn ich eine Erweiterung baue, ist es mühsam, den DOM zu lesen oder Nachrichten von der Erweiterung an den aktiven Tab zu senden.

    • Plasmo hat eine Messaging-Library, die einen Blick wert ist.
      https://docs.plasmo.com/framework/messaging
    • Das steht aktuell nicht auf dem Plan, aber in der Zwischenzeit gibt es auf npm bestimmt eine gute Library dafür.
    • Ich würde gern wissen, ob du genauer teilen kannst, was dabei besonders frustrierend oder verwirrend ist.

  • Ich habe ein Issue hinzugefügt. Safari-Unterstützung dürfte mit Apples CLI-Tool safari-web-extension-converter relativ einfach sein.

  • Sieht gut aus. Ich werde es einmal für meine Erweiterung Vim for Docs ausprobieren.
    Schade, dass Firefox nicht unterstützt wird, aber es gibt ohnehin kein Build-Tool für Erweiterungen, das sowohl Firefox als auch Chromium-basierte Browser unterstützt.

    • Firefox-Unterstützung kommt im nächsten Update. Du kannst dich darauf freuen.