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

# Mehr verdienen durch Aktivierung einer zusätzlichen Funktion: Meucci

<Warning>
  Diese Funktion erfordert Mellowtel Version 1.6.2 oder höher. Dies ist eine inkompatible Änderung im Vergleich zu früheren Versionen.
</Warning>

Mellowtel bietet eine optionale Funktion, die es dir ermöglicht, mehr Anfragen zu bearbeiten und somit mehr zu verdienen. Diese Funktion heißt "Meucci".

## Installation

Zuerst installiere das erforderliche npm-Paket mit deinem bevorzugten Paketmanager:

### Mit npm

```bash theme={null}
npm install @mellowtel/module-meucci
```

### Mit yarn

```bash theme={null}
yarn add @mellowtel/module-meucci
```

### Mit pnpm

```bash theme={null}
pnpm add @mellowtel/module-meucci
```

Im Folgenden findest du Anweisungen zur Aktivierung der Meucci-Funktion in deinem Browser-Plugin, mit Optionen für sowohl Standard- als auch Plasmo-Framework-Implementierungen.

## Standard-Implementierung

### 1. Erstelle eine JavaScript-Datei namens `meucci.js`

Erstelle im src-Verzeichnis oder dort, wo du deine js-Dateien hast, eine Datei namens `meucci.js` und füge den folgenden Code hinzu. Stelle sicher, dass diese Datei in deinem endgültigen Build-Verzeichnis (/dist) enthalten ist.

Wenn du die anfängliche [webpack-Konfigurationseinrichtung](/browser-plugins/static-to-webpack) befolgt hast, kannst du diese Datei einfach dem `entry`-Objekt in deiner webpack-Konfiguration hinzufügen.

```javascript theme={null}
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();
```

### 2. Aktualisiere deine webpack-Konfiguration

Stelle sicher, dass dein endgültiges Build-Verzeichnis die `meucci.js`-Datei enthält.

Wenn du die anfängliche [webpack-Konfigurationseinrichtung](/browser-plugins/static-to-webpack) befolgt hast, kannst du diese Datei einfach dem `entry`-Objekt in deiner webpack-Konfiguration hinzufügen.

```javascript theme={null}
module.exports = {
    // ...
    entry: {
        // background: path.join(__dirname, 'src', 'background.js'),
        // popup: path.join(__dirname, 'src', 'popup.js'),
        // content_script: path.join(__dirname, 'src', 'content_script.js'), ...
        // pascoli: path.join(__dirname, 'src', 'pascoli.js'),
        meucci: path.join(__dirname, 'src', 'meucci.js'),
        // ...
    },
    // ...
}
```

### 3. Aktualisiere manifest.json

Füge die `meucci.js`-Datei deinem `manifest.json` als web\_accessible\_resources hinzu:

```json theme={null}
{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
```

## Plasmo Framework Implementierung

Wenn du das Plasmo-Framework verwendest, befolge diese alternativen Schritte:

### 1. Erstelle eine TypeScript-Datei namens `meucci.ts`

Erstelle im src-Verzeichnis oder dort, wo du deine ts-Dateien hast, eine Datei namens `meucci.ts` und füge den folgenden Code hinzu:

```typescript theme={null}
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();
```

### 2. Erstelle ein Build-Skript

Erstelle eine `build-meucci.js`-Datei in deinem Projektstammverzeichnis mit folgendem Inhalt:

```javascript theme={null}
const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Funktion, um auf das Vorhandensein eines Verzeichnisses zu warten
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout beim Warten auf Verzeichnis: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Erstelle die Build-Funktion
async function buildMeucci() {
  // Erstelle das Bundle
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: ERSETZEN mit dem Pfad zu deiner meucci.ts-Datei
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Lese die gebündelte Datei
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Kopiere in dev- und prod-Verzeichnisse
  const directories = [ 
    'build/chrome-mv3-dev',
    'build/chrome-mv3-prod',
    'build/firefox-mv2-dev',
    'build/firefox-mv2-prod',
    'build/safari-mv2-dev',
    'build/safari-mv2-prod',
    'build/opera-mv3-dev',
    'build/opera-mv3-prod'
  ] // TODO: ERSETZEN mit den Pfaden zu deinen dev- und prod-Verzeichnissen

  // Verarbeite alle Verzeichnisse gleichzeitig
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Warte auf Verzeichnis: ${dir}`)
      await waitForDirectory(dir)
      // Schreibe die gebündelte Datei
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`meucci.js zu ${dir} hinzugefügt`)
    } catch (err) {
      console.log(`Überspringe ${dir} - ${err.message}`)
    }
  }))

  // Bereinige die temporäre Datei
  fs.unlinkSync('meucci.bundled.js')
}

buildMeucci().catch(err => {
  console.error(err)
  process.exit(1)
})
```

### 3. Aktualisiere package.json

Füge das Folgende zu deiner `package.json`-Datei hinzu:

```json theme={null}
{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
```

Du kannst entweder:

1. Das Build-Skript manuell nach deinem Haupt-Build ausführen: `npm run build:meucci`
2. Oder es zu deinem bestehenden Build-Skript mit `&` hinzufügen: `"build": "your-existing-build-command & npm run build:meucci"`

Dies stellt sicher, dass die Meucci-Datei korrekt gebündelt und in alle Build-Verzeichnisse in der richtigen Plasmo-Struktur kopiert wird.

## Aktualisiere initContentScript

Für beide Implementierungen, ändere deine `initContentScript`-Methode im Content-Skript, um den korrekten Pfad zur Meucci-Datei einzuschließen:

```typescript theme={null}
// Für Standard-Implementierung
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Für das Plasmo-Framework kannst du Folgendes verwenden:

```typescript theme={null}
// Für Plasmo-Framework
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Wenn du auch Pascoli aktiviert hast, kannst du Folgendes verwenden:

```typescript theme={null}
await initContentScript({
    pascoliFilePath: "pascoli.html", // oder "tabs/pascoli.html" wenn du das Plasmo-Framework verwendest
    meucciFilePath: "meucci.js"
});
```