Skip to main content
Hier erfährst du, wie du die Mellowtel-Bibliothek in dein Chrome-/Edge-Erweiterungsprojekt implementierst. Geschätzte Zeit zur Fertigstellung: 5-7 Minuten.

Einhaltung der Browser-Richtlinien

Mellowtel entspricht den Browser-Richtlinien, wenn die Integration die Wahl und Einstellungen der Benutzer respektiert. Die offiziellen Mellowtel-Plugins sind auf Chrome und Edge verfügbar. Bald werden wir sie auch bei anderen großen Browsern einreichen. Chrome: https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc Edge: https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi Bei Chrome können einige Entwickler auf Probleme mit der Single-Purpose-Policy stoßen, die besagt, dass ein Plugin nur eine klar definierte Funktionalität haben darf (wird jedoch oft inkonsistent bei Erweiterungen mit mehreren Funktionen interpretiert). In diesen Fällen empfehlen wir Entwicklern, ihren persönlichen Link zu teilen und Benutzer zu bitten, das offizielle Mellowtel Chrome-Plugin zu installieren, das den einzigen Zweck hat, Entwicklern zu ermöglichen, dank Benutzern, die sie durch das Teilen ihrer ungenutzten Ressourcen unterstützen möchten, zu verdienen. Entwickler können ihren Link vom Mellowtel-Dashboard erstellen und Benutzer zum offiziellen Mellowtel Chrome-Plugin weiterleiten. Wenn du stattdessen ein Plugin auf Chrome hast, das im Bereich des AI-Bandbreitenteilens operiert und das der einzige Zweck des Plugins ist, kannst du Mellowtel direkt in dein Plugin integrieren. Edge, Firefox oder Safari haben diese Richtlinie nicht, daher können Entwickler die Bibliothek auch direkt in ihre Produkte integrieren und sicherstellen, dass sie ihre Benutzer fragen, ob sie sie unterstützen möchten oder nicht, und ihnen immer eine einfache Möglichkeit bieten, ihre Einstellungen jederzeit direkt im Plugin zu ändern.

Empfohlene Browser

Derzeit empfehlen wir, Mellowtel in Edge-Plugins zu integrieren, da wir noch daran arbeiten, die Firefox- und Safari-Versionen der Bibliothek zu optimieren.

Anforderungen

Bevor du beginnst, stelle sicher, dass:
  1. Dein Plugin verwendet Manifest V3.
  2. Dein Code in einer kompilierten Weise organisiert ist, indem du Webpack, Rollup oder andere Bundler verwendest. Wenn du keinen Bundler eingerichtet hast, folge zuerst der Anleitung hier

npm-Paket installieren

Um das npm-Paket zu installieren, kannst du den folgenden Befehl in deinem Terminal ausführen:
Wenn du Yarn als Paketmanager verwendest, kannst du den folgenden Befehl ausführen:

Implementierung entscheiden

Es gibt zwei Möglichkeiten, wie du die Bibliothek in deiner Erweiterung implementieren kannst. Wenn du die Erweiterung zum ersten Mal im Web Store veröffentlichst, folge Option 1. Wenn du die Erweiterung bereits im Web Store veröffentlicht hast, lies “Wie entscheiden?”

Wie entscheiden?

Wenn du deine Erweiterung aus dem Web Store installierst, erscheint dann ein Warnfenster, das um Erlaubnis fragt, “Alle deine Daten auf allen Websites zu lesen und zu ändern”? Es sieht so aus:
Wenn ja, kannst du Option 1 folgen. Wenn nicht, musst du Option 2 folgen.

Option 1

Wenn du die Erweiterung zum ersten Mal im Web Store veröffentlichst oder die Bibliothek in eine Erweiterung importierst, die um Erlaubnis bittet, auf allen Websites zu operieren, kannst du Option 1 folgen.

Manifest einrichten

In deiner manifest.json Datei ändere die permissions und host_permissions Abschnitte wie folgt:

Service Worker (Hintergrundskript) einrichten

In deiner Service Worker Datei musst du das mellowtel Paket importieren. Hinweis: Der Service Worker ist auch als Hintergrundskript bekannt. Du kannst den folgenden Code in deine Service Worker Datei kopieren und einfügen, indem du den configuration_key mit deinem eigenen Schlüssel änderst.
Importiere das mellowtel Paket
Du kannst dann Mellowtel(configuration_key, options?) verwenden, um eine neue Instanz des Mellowtel-Objekts zu erstellen. Das Mellowtel-Objekt ist dein Einstiegspunkt in den Rest des Mellowtel-SDKs. Dein configuration_key ist erforderlich, wenn du diese Funktion aufrufst, da er deine Erweiterung bei Mellowtel identifiziert. Du findest deinen configuration_key im Dashboard
Initialisiere Mellowtel, indem du die initBackground Methode aufrufst. Diese Methode wird das Mellowtel-Objekt initialisieren und die notwendigen Listener einrichten.

Inhalts-Skript einrichten

Du musst das mellowtel Paket auch in Inhalts-Skripten importieren. Dieses Inhalts-Skript sollte in all_frames und <all_urls> beim document_start ausgeführt werden. Wir empfehlen, ein neues Inhalts-Skript zu erstellen (z.B. content_start_mellowtel.js), in das du den folgenden Code kopieren und einfügen kannst. Ändere den configuration_key mit deinem eigenen Schlüssel.
Dann denke daran, auch dieses Inhalts-Skript in deiner manifest.json Datei im content_scripts Abschnitt neben jedem anderen Inhalts-Skript, das du bereits hast, hinzuzufügen. Du kannst den folgenden Code kopieren und einfügen, indem du den name_of_your_content_script.js mit dem von dir gewählten Namen änderst.

Opt-in/Opt-out-Logik einrichten

Um Mellowtel zu aktivieren, müssen Benutzer ausdrücklich in den Dienst einwilligen. Du kannst die Opt-in/Opt-out-Logik auf zwei Arten implementieren:
  1. Durch die empfohlene Implementierung mit der von Mellowtel bereitgestellten vorgefertigten Seite.
  2. Indem du deine eigenen benutzerdefinierten Opt-in/Opt-out-Elemente erstellst und die hier gezeigten Methoden verwendest hier
Wenn du dich entscheidest, deine eigenen Opt-in/Opt-out-Elemente zu erstellen, solltest du Mellowtel Elements in Betracht ziehen - vorgefertigte UI-Komponenten, die Benutzerzustimmung und Einstellungen mit minimalem Integrationsaufwand verwalten.
Wenn du die empfohlene Implementierung verwendest, öffne deine Service Worker Datei (auch bekannt als Hintergrundskript) und füge den folgenden Code hinzu:
Um deinen Benutzern die vollständige Kontrolle über ihre Bandbreite zu geben, ist es erforderlich, dass du ihnen eine leicht zugängliche Möglichkeit bietest, ihre Einstellungen jederzeit zu ändern. Du kannst einen Link generieren, indem du die Methode generateSettingsLink() verwendest. Diese Methode gibt einen Link zurück, der die Mellowtel-Einstellungsseite öffnet, auf der Benutzer jederzeit entscheiden können, ob sie sich ein- oder ausloggen möchten. Dieser Link sollte im Popup, auf der Optionsseite oder an jedem anderen Ort platziert werden, an dem Benutzer leicht darauf zugreifen können. Zum Beispiel kannst du ihn in eine openSettings() Funktion wie diese einfügen. Du kannst openSettings() bei einem Button-Klick oder einem anderen relevanten Ereignis aufrufen:
Perfekt! Jetzt bist du bereit, deine Erweiterung an den Web Store zu senden. Folge der Anleitung hier, um zu sehen, wie du deine Erweiterung einreichst

Option 2

Option 2 könnte deine Erweiterung potenziell deaktivieren, wenn sie nicht korrekt implementiert wird. Deshalb ist sie nicht für alle Benutzer verfügbar
Wenn du Option 1 nicht implementieren kannst, kontaktiere uns bitte auf Discord