Mellowtel Meucci Modul Einrichtung für Browser-Plugins Anleitung

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

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 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-Konfigurationseinrichtung 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 deinem manifest.json als web_accessible_resources hinzu:

{
  "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:

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:

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:

Das Build-Skript manuell nach deinem Haupt-Build ausführen: npm run build:meucci
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:

// Für Standard-Implementierung
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"
});

Loslegen

Konzepte

Desktop-Apps

Browser-Plugins

Webseite

Mellowtel-Elemente

Mobile App

Mehr verdienen durch Aktivierung einer zusätzlichen Funktion: Meucci

Installation

Mit npm

Mit yarn

Mit pnpm

Standard-Implementierung

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

2. Aktualisiere deine webpack-Konfiguration

3. Aktualisiere manifest.json

Plasmo Framework Implementierung

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

2. Erstelle ein Build-Skript

3. Aktualisiere package.json

Aktualisiere initContentScript

​Installation

​Mit npm

​Mit yarn

​Mit pnpm

​Standard-Implementierung

​1. Erstelle eine JavaScript-Datei namens meucci.js

​2. Aktualisiere deine webpack-Konfiguration

​3. Aktualisiere manifest.json

​Plasmo Framework Implementierung

​1. Erstelle eine TypeScript-Datei namens meucci.ts

​2. Erstelle ein Build-Skript

​3. Aktualisiere package.json

​Aktualisiere initContentScript

Installation

Mit npm

Mit yarn

Mit pnpm

Standard-Implementierung

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

2. Aktualisiere deine webpack-Konfiguration

3. Aktualisiere manifest.json

Plasmo Framework Implementierung

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

2. Erstelle ein Build-Skript

3. Aktualisiere package.json

Aktualisiere initContentScript