> ## 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: Meucci

<Warning>
  Deze functie vereist Mellowtel versie 1.6.2 of hoger. Dit is een breaking change vergeleken met eerdere versies.
</Warning>

Mellowtel biedt een optionele functie waarmee je meer verzoeken kunt verwerken en daardoor meer kunt verdienen. Deze functie heet "Meucci".

## Installatie

Installeer eerst het vereiste npm-pakket met je favoriete pakketbeheerder:

### Met npm

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

### Met yarn

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

### Met pnpm

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

Hieronder vind je instructies voor het inschakelen van de Meucci-functie in je browserplugin, met opties voor zowel standaard- als Plasmo-frameworkimplementaties.

## Standaard Implementatie

### 1. Maak een JavaScript-bestand genaamd `meucci.js`

Maak in de src-map, of waar je js-bestanden hebt, een bestand genaamd `meucci.js` en voeg de volgende code toe. Zorg ervoor dat dit bestand wordt opgenomen in je uiteindelijke build (/dist) map.

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

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

let moduleMeucci;

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

### 2. Werk je webpack-configuratie bij

Zorg ervoor dat je uiteindelijke build-map het `meucci.js` bestand bevat.

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

```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. Werk manifest.json bij

Voeg het `meucci.js` bestand toe aan je `manifest.json` als web\_accessible\_resources:

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

## Plasmo Framework Implementatie

Als je het Plasmo-framework gebruikt, volg dan deze alternatieve stappen:

### 1. Maak een TypeScript-bestand genaamd `meucci.ts`

Maak in de src-map, of waar je ts-bestanden hebt, een bestand genaamd `meucci.ts` en voeg de volgende code toe:

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

let moduleMeucci;

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

### 2. Maak Build Script

Maak een `build-meucci.js` bestand in je projectroot met de volgende inhoud:

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

// Functie om te wachten tot een map bestaat
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout bij wachten op map: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Maak de build functie
async function buildMeucci() {
  // Bouw de bundel
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: VERVANG met het pad naar je meucci.ts bestand
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Lees het gebundelde bestand
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Kopieer naar dev en prod mappen
  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: VERVANG met de paden naar je dev en prod mappen

  // Verwerk alle mappen gelijktijdig
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Wachten op map: ${dir}`)
      await waitForDirectory(dir)
      // Schrijf het gebundelde bestand
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Toegevoegd meucci.js aan ${dir}`)
    } catch (err) {
      console.log(`Overslaan ${dir} - ${err.message}`)
    }
  }))

  // Verwijder het tijdelijke bestand
  fs.unlinkSync('meucci.bundled.js')
}

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

### 3. Werk package.json bij

Voeg het volgende toe aan je `package.json` bestand:

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

Je kunt:

1. Het build script handmatig uitvoeren na je hoofd build: `npm run build:meucci`
2. Of het toevoegen aan je bestaande build script met `&`: `"build": "your-existing-build-command & npm run build:meucci"`

Dit zorgt ervoor dat het Meucci-bestand correct wordt gebundeld en gekopieerd naar alle build-mappen in de juiste Plasmo-structuur.

## Werk initContentScript bij

Voor beide implementaties, wijzig je `initContentScript` methode in het content script om het juiste pad naar het Meucci-bestand op te nemen:

```typescript theme={null}
// Voor standaard implementatie
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Voor Plasmo framework, kun je het volgende gebruiken:

```typescript theme={null}
// Voor Plasmo framework
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Als je ook Pascoli hebt ingeschakeld, kun je het volgende gebruiken:

```typescript theme={null}
await initContentScript({
    pascoliFilePath: "pascoli.html", // of "tabs/pascoli.html" als je het Plasmo framework gebruikt
    meucciFilePath: "meucci.js"
});
```