> ## 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 Plasmo-Erweiterung

> Eine kurze Anleitung zur Integration von Mellowtel in deine Plasmo-Browsererweiterung

Hier erfährst du, wie du deine Plasmo-Browsererweiterung durch die Integration von Mellowtel monetarisieren kannst.
Geschätzte Zeit zur Fertigstellung: 5-15 Minuten.

# Manuelle Installation

Wenn du ein bestehendes Plasmo-Projekt hast, folge diesen Schritten, um die Mellowtel-Integration hinzuzufügen.

### Abhängigkeiten installieren

Füge zuerst das Mellowtel-Paket zu deinem Projekt hinzu:

```bash theme={null}
pnpm add mellowtel
```

### package.json konfigurieren

Aktualisiere deine `package.json`, um die erforderlichen Berechtigungen einzuschließen:

```json theme={null}
{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}
```

### Umgebungsvariablen festlegen

Erstelle oder aktualisiere deine `.env`-Datei:

```plaintext theme={null}
PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here
```

<Warning>
  Stelle sicher, dass du `your_mellowtel_api_key_here` durch deinen tatsächlichen Mellowtel-API-Schlüssel aus dem Dashboard ersetzt.
</Warning>

# Implementierung

### Hintergrundskript einrichten

Erstelle oder ändere dein Hintergrundskript (`background.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// Installation und Updates behandeln
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Erweiterung installiert oder aktualisiert", details)
  await mellowtel.generateAndOpenOptInLink()
})
```

### Inhalts-Skript einrichten

Erstelle oder ändere dein Inhalts-Skript (`content.ts`):

```typescript theme={null}
import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Verhalten des Inhalts-Skripts konfigurieren
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_start"
}

const start = async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  const resp = await mellowtel.initContentScript()
}

start()
```

### Popup-Implementierung

Erstelle oder ändere deine Popup-Komponente (`popup.tsx`):

```typescript theme={null}
import Mellowtel from "mellowtel"

const Popup: React.FC = () => {
  const handleMellowtelSettings = async () => {
    const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
    const link = await mellowtel.generateSettingsLink()
    chrome.tabs.create({ url: link })
  }

  return (
    <div>
      <button onClick={handleMellowtelSettings}>
        Mellowtel-Einstellungen ändern
      </button>
    </div>
  )
}

export default Popup
```

# Entwicklungsbefehle

Verwende diese Befehle während der Entwicklung:

```bash theme={null}
# Entwicklungsserver starten
pnpm dev

# Für die Produktion bauen
pnpm build

# Die Erweiterung verpacken
pnpm package
```

<Accordion title="Beste Praktiken für die Entwicklung">
  1. Teste deine Erweiterung immer gründlich in Entwicklungs- und Produktionsumgebungen
  2. Überwache die Konsole auf Mellowtel-bezogene Warnungen oder Fehler
  3. Teste den Opt-In-Fluss aus der Perspektive eines Benutzers
  4. Überprüfe, ob der Einstellungslink korrekt funktioniert
  5. Stelle sicher, dass alle Berechtigungen richtig konfiguriert sind
</Accordion>

# Tests

Bevor du deine Erweiterung einreichst:

1. Teste den Installationsablauf
2. Überprüfe, ob der Opt-In-Prozess funktioniert
3. Stelle sicher, dass die Einstellungsseite zugänglich ist
4. Bestätige, dass alle Berechtigungen korrekt funktionieren
5. Teste auf verschiedenen Browsern, wenn mehrere Plattformen anvisiert werden

<Note>
  Für weitere Informationen über die Funktionen und die API von Mellowtel besuche den [Quickstart](https://docs.mellowtel.com/browser-plugins/quickstart).
</Note>

Brauchst du Hilfe? Tritt unserer [Discord-Community](https://discord.com/invite/txAZp4MSDe) für Unterstützung bei.