> ## 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: Pascoli
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 "Pascoli".
## Installation
Zuerst installiere das erforderliche npm-Paket mit deinem bevorzugten Paketmanager:
### Mit npm
```bash theme={null}
npm install @mellowtel/module-pascoli
```
### Mit yarn
```bash theme={null}
yarn add @mellowtel/module-pascoli
```
### Mit pnpm
```bash theme={null}
pnpm add @mellowtel/module-pascoli
```
Nachfolgend findest du Anweisungen zur Aktivierung der Pascoli-Funktion in deinem Browser-Plugin, mit Optionen für sowohl Standard- als auch Plasmo-Framework-Implementierungen.
## Standardimplementierung
### 1. Erstelle eine HTML-Datei namens `pascoli.html`
Erstelle eine Datei namens `pascoli.html` 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](/browser-plugins/static-to-webpack) befolgt hast, kannst du diese Datei einfach im `public` Verzeichnis als `pascoli.html` hinzufügen.
```html theme={null}
```
Stelle sicher, dass du das `src`-Attribut des Script-Tags so änderst, dass es auf den korrekten Speicherort deiner `pascoli.js`-Datei im endgültigen Build verweist.
### 2. Erstelle eine JavaScript-Datei namens `pascoli.js`
Erstelle im src-Verzeichnis oder dort, wo du js-Dateien hast, eine Datei namens `pascoli.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](/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 ModulePascoli from "@mellowtel/module-pascoli";
let modulePascoli;
(async () => {
modulePascoli = new ModulePascoli();
await modulePascoli.init();
})();
```
### 3. Aktualisiere deine webpack-Konfiguration
Stelle sicher, dass dein endgültiges Build-Verzeichnis die `pascoli.html`- und `pascoli.js`-Dateien enthält.
Füge das Folgende zu deiner webpack-Konfiguration hinzu, um sicherzustellen, dass `pascoli.js` im Build enthalten ist:
```javascript theme={null}
module.exports = {
mode: 'development', // Verwende 'production' für Produktions-Builds
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'),
},
// ...
}
```
`pascoli.html` sollte ebenfalls automatisch in deinem Build-Verzeichnis enthalten sein, wenn du die anfängliche [webpack Konfiguration](/browser-plugins/static-to-webpack) befolgt und es im `public` Verzeichnis hinzugefügt hast.
### 4. Aktualisiere manifest.json
Füge die `pascoli.html`-Datei als web\_accessible\_resources zu deiner `manifest.json` hinzu:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Plasmo Framework Implementierung
Wenn du das Plasmo-Framework verwendest, folge diesen alternativen Schritten:
### 1. Erstelle die PascoliPage-Komponente
Erstelle eine Datei namens `pascoli.tsx` in deinem `tabs`-Verzeichnis. Wenn du kein `tabs`-Verzeichnis hast, erstelle eins. Mehr Informationen zu `tabs` im Plasmo-Framework findest du [hier](https://docs.plasmo.com/framework/tab-pages). Füge den folgenden Code zur `pascoli.tsx`-Datei hinzu:
```typescript theme={null}
import { useEffect } from "react"
import ModulePascoli from "@mellowtel/module-pascoli"
function PascoliPage() {
useEffect(() => {
const initPascoli = async () => {
const modulePascoli = new ModulePascoli();
await modulePascoli.init();
}
initPascoli().catch(console.error)
}, [])
return (
)
}
export default PascoliPage
```
### 2. Aktualisiere package.json für Plasmo
Füge das Folgende zu deiner `package.json`-Datei hinzu:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Aktualisiere initContentScript
Für beide Implementierungen, modifiziere deine `initContentScript`-Methode im Content-Skript, um den korrekten Pfad zur Pascoli-Datei einzuschließen:
```typescript theme={null}
// Für Standardimplementierung
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
Für das Plasmo-Framework kannst du Folgendes verwenden:
```typescript theme={null}
// Für Plasmo-Framework
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```