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.

Deze functie vereist Mellowtel versie 1.6.2 of hoger. Dit is een breaking change ten opzichte van eerdere versies.
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

npm install @mellowtel/module-meucci

​
Met yarn

yarn add @mellowtel/module-meucci

​
Met pnpm

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 framework implementaties.

​
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 hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan het entry object in je webpack-configuratie. 
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 hebt gevolgd, kun je dit bestand eenvoudig toevoegen aan het entry object in je webpack-configuratie. 
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: 
{
  "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: 
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 de hoofdmap van je project met de volgende inhoud: 
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 het wachten op map: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Maak de buildfunctie
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: 
{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
Je kunt ofwel:
  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: 
// Voor standaard implementatie
await initContentScript({
    meucciFilePath: "meucci.js"
});
Voor Plasmo framework, kun je het volgende gebruiken: 
// Voor Plasmo framework
await initContentScript({
    meucciFilePath: "meucci.js"
});
Als je ook Pascoli hebt ingeschakeld, kun je het volgende gebruiken: 
await initContentScript({
    pascoliFilePath: "pascoli.html", // of "tabs/pascoli.html" als je het Plasmo framework gebruikt
    meucciFilePath: "meucci.js"
});