> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Integriere Mellowtel in deine Chrome-/Edge-Erweiterung

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](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc)

Edge: [https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi](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](https://www.mellowtel.com/dashboard/support-with-mellowtel) erstellen und Benutzer zum offiziellen [Mellowtel Chrome-Plugin](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc) 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](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3).
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](/browser-plugins/static-to-webpack)

# npm-Paket installieren

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

```npm theme={null}
npm install mellowtel
```

<Accordion title="Yarn">
  Wenn du Yarn als Paketmanager verwendest, kannst du den folgenden Befehl ausführen:

  ```yarn theme={null}
  yarn add mellowtel
  ```
</Accordion>

# 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:

<Frame caption="Warnfenster, das um Erlaubnis fragt, alle deine Daten auf allen Websites zu lesen und zu ändern">
  <img src="https://mintcdn.com/mellowtel/-NaMUO-H7VMwBlS7/images/alert_web_store.png?fit=max&auto=format&n=-NaMUO-H7VMwBlS7&q=85&s=c26c3ab1b347d62e376b28ec4c0766a7" width="898" height="282" data-path="images/alert_web_store.png" />
</Frame>

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](https://developer.chrome.com/docs/extensions/reference/manifest) Datei ändere die `permissions` und `host_permissions` Abschnitte wie folgt:

```json theme={null}
{

  "permissions": [
    "storage",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]

}
```

### Service Worker (Hintergrundskript) einrichten

In deiner [Service Worker](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) 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.

```javascript theme={null}
import Mellowtel from "mellowtel";

let mellowtel;

(async () => {
    mellowtel = new Mellowtel("<configuration_key>"); // Ersetze durch deinen Konfigurationsschlüssel
    await mellowtel.initBackground();
})();
```

<Accordion title="Service Worker Code-Aufschlüsselung">
  Importiere das mellowtel Paket

  ```javascript theme={null}
      import Mellowtel from "mellowtel";
  ```

  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](https://www.mellowtel.com/mellowtel-dashboard/#home)

  ```javascript theme={null}
  mellowtel = new Mellowtel("<configuration_key>");
  ```

  Initialisiere Mellowtel, indem du die `initBackground` Methode aufrufst. Diese Methode wird das Mellowtel-Objekt initialisieren und die notwendigen Listener einrichten.

  ```javascript theme={null}
  await mellowtel.initBackground();
  ```
</Accordion>

### Inhalts-Skript einrichten

Du musst das mellowtel Paket auch in [Inhalts-Skripten](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) 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.

```javascript theme={null}
import Mellowtel from "mellowtel";

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

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.

```json theme={null}
{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["<name_of_your_content_script.js>"], // <-- Ändere hier mit dem Namen deines Inhalts-Skripts
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}
```

### 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](https://docs.mellowtel.com/concepts/opt-in-out#2-custom-elements)

<Info>
  Wenn du dich entscheidest, deine eigenen Opt-in/Opt-out-Elemente zu erstellen, solltest du <a href="/mellowtel-elements/quickstart" target="_blank">**Mellowtel Elements**</a> in Betracht ziehen - vorgefertigte UI-Komponenten, die Benutzerzustimmung und Einstellungen mit minimalem Integrationsaufwand verwalten.
</Info>

Wenn du die empfohlene Implementierung verwendest, öffne deine `Service Worker` Datei (auch bekannt als Hintergrundskript) und füge den folgenden Code hinzu:

```javascript theme={null}
chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("Erweiterung installiert oder aktualisiert");
    // Wenn du die Erstinstallation und Updates unterschiedlich behandeln möchtest
    /**
    if(details.reason === "install"){
        // rufe eine Funktion auf, um eine Erstinstallation zu behandeln
    } else if(details.reason === "update") {
        // rufe eine Funktion auf, um ein Update zu behandeln
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});
```

### Einstellungslink generieren

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:

```javascript theme={null}
async function openSettings() {
    try {
        // Generiere und verwalte den Einstellungslink
        const settingsLink = await mellowtel.generateSettingsLink();
        // Protokolliere den generierten Link zur Fehlerbehebung
        console.log("Generierter Einstellungslink:", settingsLink);
        // Du kannst diesen Link nun innerhalb eines Popups, einer Optionsseite oder eines UI-Elements verwenden
    } catch (error) {
        console.error("Fehler beim Generieren des Einstellungslinks:", error);
    }
}
```

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](/browser-plugins/submit-to-chrome-store)

# Option 2

<Warning>Option 2 könnte deine Erweiterung potenziell deaktivieren, wenn sie nicht korrekt implementiert wird. Deshalb ist sie nicht für alle Benutzer verfügbar </Warning>

Wenn du Option 1 nicht implementieren kannst, kontaktiere uns bitte auf [Discord](https://discord.com/invite/txAZp4MSDe)