> ## 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.
# Verdien meer door een extra functie in te schakelen: Pascoli
Deze functie vereist Mellowtel versie 1.6.2 of hoger. Dit is een breaking change vergeleken met eerdere versies.
Mellowtel biedt een optionele functie waarmee je meer verzoeken kunt verwerken en daardoor meer kunt verdienen. Deze functie heet "Pascoli".
## Installatie
Installeer eerst het vereiste npm-pakket met je voorkeurs pakketbeheerder:
### Met npm
```bash theme={null}
npm install @mellowtel/module-pascoli
```
### Met yarn
```bash theme={null}
yarn add @mellowtel/module-pascoli
```
### Met pnpm
```bash theme={null}
pnpm add @mellowtel/module-pascoli
```
Hieronder vind je instructies voor het inschakelen van de Pascoli-functie in je browser plugin, met opties voor zowel standaard als Plasmo framework implementaties.
## Standaard Implementatie
### 1. Maak een HTML-bestand genaamd `pascoli.html`
Maak een bestand genaamd `pascoli.html` en voeg de volgende code toe. Zorg ervoor dat dit bestand wordt opgenomen in je uiteindelijke build (/dist) directory.
Als je de initiële [webpack config setup](/browser-plugins/static-to-webpack) hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan de `public` directory als `pascoli.html`
```html theme={null}
```
Zorg ervoor dat je het `src` attribuut van het script tag aanpast naar de juiste locatie van je `pascoli.js` bestand in de uiteindelijke build
### 2. Maak een JavaScript-bestand genaamd `pascoli.js`
Maak in de src directory, of waar je js-bestanden hebt, een bestand genaamd `pascoli.js` en voeg de volgende code toe. Zorg ervoor dat dit bestand wordt opgenomen in je uiteindelijke build (/dist) directory.
Als je de initiële [webpack config setup](/browser-plugins/static-to-webpack) hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan het `entry` object in je webpack config.
```javascript theme={null}
import ModulePascoli from "@mellowtel/module-pascoli";
let modulePascoli;
(async () => {
modulePascoli = new ModulePascoli();
await modulePascoli.init();
})();
```
### 3. Werk je webpack config bij
Zorg ervoor dat je uiteindelijke build directory de `pascoli.html` en `pascoli.js` bestanden bevat.
Voeg het volgende toe aan je webpack config om ervoor te zorgen dat `pascoli.js` wordt opgenomen in de build:
```javascript theme={null}
module.exports = {
mode: 'development', // Gebruik 'production' voor productie 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` zou automatisch in je build directory moeten worden opgenomen als je de initiële [webpack config setup](/browser-plugins/static-to-webpack) hebt gevolgd en het hebt toegevoegd aan de `public` directory.
### 4. Werk manifest.json bij
Voeg het `pascoli.html` bestand toe aan je `manifest.json` als web\_accessible\_resources:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Plasmo Framework Implementatie
Als je het Plasmo framework gebruikt, volg dan deze alternatieve stappen:
### 1. Maak PascoliPage Component
Maak een bestand genaamd `pascoli.tsx` in je `tabs` directory. Als je geen `tabs` directory hebt, maak er dan een aan. Meer info over `tabs` in het Plasmo framework vind je [hier](https://docs.plasmo.com/framework/tab-pages). Voeg de volgende code toe aan het `pascoli.tsx` bestand:
```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. Werk package.json bij voor Plasmo
Voeg het volgende toe aan je `package.json` bestand:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Werk initContentScript bij
Voor beide implementaties, wijzig je `initContentScript` methode in het content script om het juiste pad naar het Pascoli-bestand op te nemen:
```typescript theme={null}
// Voor standaard implementatie
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
Voor Plasmo framework, kun je het volgende gebruiken:
```typescript theme={null}
// Voor Plasmo framework
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```