Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.mellowtel.com/llms.txt

Use this file to discover all available pages before exploring further.

Diese Funktion erfordert Mellowtel Version 1.6.2 oder höher. Dies ist eine inkompatible Änderung im Vergleich zu früheren Versionen.
Mellowtel bietet eine optionale Funktion, die es dir ermöglicht, mehr Anfragen zu bearbeiten und dadurch mehr zu verdienen. Diese Funktion heißt “Meucci”.

​
Installation

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

​
Mit npm

npm install @mellowtel/module-meucci

​
Mit yarn

yarn add @mellowtel/module-meucci

​
Mit pnpm

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.

​
Standardimplementierung

​
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-Konfiguration befolgt hast, kannst du diese Datei einfach dem entry-Objekt in deiner webpack-Konfiguration hinzufügen. 
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-Konfiguration befolgt hast, kannst du diese Datei einfach dem entry-Objekt in deiner webpack-Konfiguration hinzufügen. 
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 als web_accessible_resources zu deinem manifest.json hinzu: 
{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

​
Plasmo-Framework-Implementierung

Wenn du das Plasmo-Framework verwendest, folge diesen alternativen Schritten:

​
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: 
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 im Projektstammverzeichnis mit folgendem Inhalt: 
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: 
{
  "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": "dein-bestehender-build-befehl & 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, modifiziere deine initContentScript-Methode im Content-Skript, um den korrekten Pfad zur Meucci-Datei einzuschließen: 
// Für Standardimplementierung
await initContentScript({
    meucciFilePath: "meucci.js"
});
Für das Plasmo-Framework kannst du Folgendes verwenden: 
// Für Plasmo-Framework
await initContentScript({
    meucciFilePath: "meucci.js"
});
Wenn du auch Pascoli aktiviert hast, kannst du Folgendes verwenden: 
await initContentScript({
    pascoliFilePath: "pascoli.html", // oder "tabs/pascoli.html" wenn du das Plasmo-Framework verwendest
    meucciFilePath: "meucci.js"
});