Mellowtel ohne Bundler für Browser-Erweiterungen Leitfaden

Dieser Leitfaden erklärt, wie du Mellowtel in deine Browser-Erweiterung integrierst, ohne Bundler wie Webpack oder Vite zu verwenden. Stattdessen verwendest du eine einzelne vorgefertigte Datei, die sowohl in Content Scripts als auch in Service Workern funktioniert.

Projektsetup

Beginne mit einer grundlegenden Struktur für Browser-Erweiterungen:

your-extension/
├── icons/
├── popup/
│   ├── popup.html
│   └── popup.js
├── background.js           # Dein Service Worker
├── content_script.js
├── manifest.json
└── mellowtel.js           # Wird im nächsten Schritt hinzugefügt

Das Mellowtel-Bundle erhalten

Du hast zwei Möglichkeiten, die mellowtel.js Datei für deine Erweiterung zu erhalten:

Option 1: Vorbereitete Datei verwenden

Der einfachste Weg, um zu beginnen, ist die Verwendung der vorgefertigten mellowtel.js Datei aus dem mellowtel-bundled Repository.

Gehe zum mellowtel-bundled Repository
Lade die mellowtel.js Datei herunter
Kopiere sie in dein Erweiterungsverzeichnis

Option 2: Eigenes Bundle generieren

Wenn du das Bundle lieber selbst generieren möchtest, folge diesen Schritten:

Temporäres Bundling-Verzeichnis erstellen

Erstelle ein temporäres Verzeichnis, um Mellowtel zu installieren und das Bundle zu generieren:

mkdir mellowtel-bundling
cd mellowtel-bundling
npm init -y
npm install mellowtel

Dies erstellt einen separaten Ordner mit dem Mellowtel-Paket, den du nur zum Bundling verwendest.

Mellowtel mit esbuild bündeln

Erstelle innerhalb des mellowtel-bundling Verzeichnisses ein einzelnes Bundle, das sowohl in Service Workern als auch in Content Scripts funktioniert:

npx esbuild node_modules/mellowtel/dist/index.js --bundle --format=iife --global-name=Mellowtel --footer:js="globalThis.Mellowtel = Mellowtel.default" --platform=browser --outfile=mellowtel.js --minify --legal-comments=none

Dieser Befehl:

Nimmt die Mellowtel-Quelle aus node_modules/mellowtel/dist/index.js
Bündelt alle Abhängigkeiten in eine einzelne Datei
Verwendet das IIFE-Format mit einem globalen Namen für universelle Kompatibilität
Fügt einen Footer hinzu, um den Standardexport global verfügbar zu machen
Optimiert für die Browserumgebung und minimiert die Ausgabe
Erstellt mellowtel.js im Bundling-Verzeichnis

Das Bundle in deine Erweiterung kopieren

Nachdem du den esbuild-Befehl ausgeführt hast, kopiere die generierte Datei in dein Erweiterungsverzeichnis:

cp mellowtel.js ../your-extension/

Jetzt kannst du das temporäre Bundling-Verzeichnis löschen, da du nur die Ausgabedatei benötigst:

cd ..
rm -rf mellowtel-bundling

Dein Erweiterungsordner enthält jetzt die gebündelte Mellowtel-Datei, die einsatzbereit ist.

Dein Manifest konfigurieren (Beide Optionen)

Unabhängig davon, welche Option du oben gewählt hast, konfiguriere dein manifest.json, um das Mellowtel-Bundle in Content Scripts einzuschließen:

{
  "manifest_version": 3,
  "name": "Dein Erweiterungsname",
  "version": "1.0",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["mellowtel.js", "content_script.js"]
    }
  ],
  "permissions": [
    "storage",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]
}

Wichtig:

Das Feld "type": "module" ermöglicht ES-Modulimporte in deinem Service Worker.
In dem Content Scripts Array muss mellowtel.js vor content_script.js geladen werden, damit die Mellowtel-Globale Variable verfügbar ist, wenn dein Content Script ausgeführt wird.

Mellowtel in deiner Erweiterung verwenden

Für deinen Service Worker (background.js), importiere die gebündelte Datei:

// background.js
import './mellowtel.js';

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Ersetze mit deinem Konfigurationsschlüssel
    await mellowtel.initBackground();
})();

Für Content Scripts ist Mellowtel als globale Variable verfügbar (kein Import nötig, da es über das Manifest geladen wird):

// content_script.js
// Mellowtel ist als globale Variable aus mellowtel.js verfügbar

(async () => {
  const mellowtel = new Mellowtel("<configuration_key>"); // Ersetze mit deinem Konfigurationsschlüssel
  await mellowtel.initContentScript();
})();

Deine Erweiterung testen

Um deine Erweiterung zu testen:

Gehe zu chrome://extensions/ in Chrome (oder das Äquivalent in anderen Browsern)
Aktiviere den “Entwicklermodus”
Klicke auf “Entpackt laden” und wähle dein Erweiterungsverzeichnis aus

Dieser Ansatz bietet dir die Vorteile der Nutzung von Mellowtel, ohne die Komplexität eines vollständigen Build-Systems wie Webpack oder Vite einrichten zu müssen.

​Projektsetup

​Das Mellowtel-Bundle erhalten

​Option 1: Vorbereitete Datei verwenden

​Option 2: Eigenes Bundle generieren

​Temporäres Bundling-Verzeichnis erstellen

​Mellowtel mit esbuild bündeln

​Das Bundle in deine Erweiterung kopieren

​Dein Manifest konfigurieren (Beide Optionen)

​Mellowtel in deiner Erweiterung verwenden

​Deine Erweiterung testen