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

 (github.com/cezaraugusto)
4 Punkte von GN⁺ 2024-05-02 | 1 Kommentare | Auf WhatsApp teilen

Einführung in Extension.js

  • Extension.js ist ein Cross-Browser-Entwicklungstool für Extensions im Plug-and-Play-Stil, das ohne Build-Konfiguration auskommt.
  • Es unterstützt standardmäßig TypeScript, WebAssembly, React und modernes JavaScript, sodass plattformübergreifende Browser-Extensions erstellt werden können.

Erstellen einer neuen Erweiterung

  • Sie können mit dem folgenden Befehl einfach eine neue Erweiterung erstellen 
    npx extension create my-extension
cd my-extension
npm run dev
  • Nach dem Ausführen des Befehls öffnet sich sofort eine neue Browser-Instanz, in der Sie direkt mit der Entwicklung beginnen können.

Nutzung von Chrome Extension Samples

  • Sie können schnell starten, indem Sie Samples aus dem Chrome Extension Samples-Repository verwenden
    1. Terminal öffnen
    2. Zum Verzeichnis wechseln, in dem das Projekt erstellt werden soll
    3. Den folgenden Befehl ausführen 
      npx extension dev <sample-name>
    • <sample-name> ist durch den Namen des zu verwendenden Samples aus Chrome Extension Samples zu ersetzen.
  • Beispiel: page-redder-Sample anfordern 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Chrome Extension Samples in Microsoft Edge verwenden

  • Extension.js unterstützt verschiedene Browser, darunter Microsoft Edge.
  • So starten Sie eine Edge-kompatible Erweiterung:
    1. Terminal öffnen
    2. In das gewünschte Projektverzeichnis wechseln
    3. Den folgenden Befehl ausführen 
      npx extension dev <sample-name> --browser=edge
    • <sample-name> ist durch den Namen des zu verwendenden Samples zu ersetzen.
  • Beispiel: magic8ball-Sample in Edge ausführen 
    npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge

Mozilla-Add-ons in Edge ausführen

  • Um die Lücke zwischen Firefox und Edge zu schließen, können Mozilla-Add-ons in Edge ausgeführt werden
    1. In das Projektverzeichnis wechseln
    2. Den folgenden Befehl ausführen 
      npx extension dev <addon-name> --browser=edge --polyfill=true
    • Importieren Sie ein Mozilla-Add-on und passen Sie es für Edge an.
  • Beispiel: Apply CSS-Sample aus MDN WebExtensions Examples in Edge ausführen 
    npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

Extension.js in einer bestehenden Erweiterung verwenden

  • Wenn Ihre bestehende Erweiterung bereits einen Paketmanager nutzt, können Sie nach der Installation des Extension.js-Pakets Skripte erstellen und ausführen
    1. Installieren Sie extension als devDependency 
      npm install extension --save-dev
    2. Verbinden Sie npm-Skripte mit den Extension.js-Befehlen 
      {
  "scripts": {
    "build": "extension build", 
    "dev": "extension dev",
    "start": "extension start"  
  },
  "devDependencies": {
    "extension": "latest"
  }
}
  • Verwenden Sie während der Entwicklung npm run dev, für den Produktivmodus npm run start und für den Produktions-Build npm run build.

Bestimmten Browser für die Entwicklung auswählen

  • Desktop-Browser-Unterstützung
Brave Chrome Edge Firefox Opera Safari Vivaldi
☑️ ✅ ✅ ⛔️ ☑️ ⛔️ ☑️
  • ☑️ = hohe Wahrscheinlichkeit für Funktionalität, aber der Browser-Launcher wird nicht unterstützt
  • Mobile Browser-Unterstützung
Firefox Android iOS Safari
⛔️ ⛔️
  • Wenn Sie einen bestimmten Browser als Ziel haben, übergeben Sie das --browser-Flag an die Befehle dev/start.
    • Beispiel: npx extension dev path/to/extension --browser=edge
  • Hinweis: Wird --browser="all" übergeben, werden alle verfügbaren Browser auf einmal geladen.

Meinung von GN⁺

  • Extension.js wirkt wie ein mächtiges Tool für die Entwicklung plattformübergreifender Erweiterungen. Insbesondere weil es sofort einsatzbereit ist und mehrere Browser einfach unterstützt werden können, könnte es die Entwicklungszeit deutlich reduzieren.
  • Ein weiterer großer Vorteil ist, dass bestehende Samples wie Chrome Extension Samples oder die MDN WebExtensions Examples genutzt werden können. Auch Einsteigerkinder können so leicht starten.
  • Allerdings scheint die Unterstützung einiger Browser wie Firefox oder Safari noch nicht vollständig zu sein, daher ist Vorsicht geboten. Wenn Sie auf einen einzelnen Browser abzielen, sollten Sie ggf. die dedizierten Entwickler-Tools dieses Browsers in Betracht ziehen.
  • Ich bin gespannt auf die Stärken und Schwächen im Vergleich zu bestehenden Tools wie Plasmo, der WebExtensions API und ähnlichen Werkzeugen. Insbesondere lohnt es sich, die Unterstützung aktueller Spezifikationen wie Manifest V3 zu prüfen.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-05-02
Hacker News Kommentar
  • Ein hilfreiches Framework für die Entwicklung von Chrome-Erweiterungen namens Extension.js wurde vorgestellt
    • Die Firefox-Unterstützung ist derzeit noch nicht vollständig ausgereift
  • Andere Entwickler berichteten ebenfalls von Schwierigkeiten bei der Entwicklung von Chrome-Erweiterungen
    • Besonders das Anwenden von Styles war schwierig
    • Es wird erwartet, dass Extension.js diese Probleme löst
  • Die README-Dokumentation von Extension.js wurde ebenfalls gelobt
  • Ein Entwickler, der wegen der Komplexität von Google Play davor zurückschreckte, Erweiterungen zur App hinzuzufügen, zieht die Nutzung von Extension.js in Betracht
  • Ein Vorschlag war, dass die Kommunikation zwischen Erweiterung und Tab ebenfalls in Extension.js enthalten sein sollte
    • Das Auslesen aus dem DOM oder das Senden von Nachrichten von der Erweiterung an den aktiven Tab war unpraktisch
  • Es wurde die Frage nach einem Vergleich mit ähnlichen Frameworks wie Plasmo aufgeworfen
  • Das beim Entwickeln von Chrome-Erweiterungen auftretende Impostor-Syndrom wurde erwähnt
    • Das Erstellen neuer Projekte ist schwierig
    • Es wird erwartet, dass Extension.js hier Abhilfe schafft
  • Zur Safari-Unterstützung wurde angemerkt, dass dies mit dem CLI-Tool safari-web-extension-converter relativ einfach wäre
  • Basierend auf bisherigen Chrome-Erweiterungsprojekten wurde die Frage nach den Vorteilen von Extension.js gestellt
    • Was kann es mehr, als nur Dateien zu kopieren?
    • Browserübergreifende Unterstützung? Lokalisierung?
  • Ein Entwickler, der bei der Entwicklung von Chrome-Erweiterungen einen Mangel an Werkzeugen gespürt hat, äußerte Vorfreude auf Extension.js