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.

Cette fonctionnalité nécessite Mellowtel version 1.6.2 ou supérieure. Il s’agit d’un changement majeur par rapport aux versions précédentes.
Mellowtel propose une fonctionnalité optionnelle qui vous permet de gérer plus de requêtes et donc de gagner plus. Cette fonctionnalité s’appelle “Meucci”.

​
Installation

Tout d’abord, installez le package npm requis en utilisant votre gestionnaire de packages préféré :

​
Utilisation de npm

npm install @mellowtel/module-meucci

​
Utilisation de yarn

yarn add @mellowtel/module-meucci

​
Utilisation de pnpm

pnpm add @mellowtel/module-meucci
Ci-dessous se trouvent les instructions pour activer la fonctionnalité Meucci dans votre plugin de navigateur, avec des options pour les implémentations standard et Plasmo framework.

​
Implémentation Standard

​
1. Créez un fichier JavaScript nommé meucci.js

Dans le répertoire src, ou là où vous avez des fichiers js, créez un fichier nommé meucci.js et ajoutez le code suivant. Assurez-vous que ce fichier est inclus dans votre répertoire de build final (/dist). Si vous avez suivi la configuration initiale webpack config setup, vous pouvez simplement ajouter ce fichier à l’objet entry dans votre configuration webpack. 
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

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

​
2. Mettez à jour votre configuration webpack

Assurez-vous que votre répertoire de build final inclut le fichier meucci.js. Si vous avez suivi la configuration initiale webpack config setup, vous pouvez simplement ajouter ce fichier à l’objet entry dans votre configuration webpack. 
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. Mettez à jour manifest.json

Ajoutez le fichier meucci.js à votre manifest.json comme web_accessible_resources : 
{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

​
Implémentation du Framework Plasmo

Si vous utilisez le framework Plasmo, suivez ces étapes alternatives :

​
1. Créez un fichier TypeScript nommé meucci.ts

Dans le répertoire src, ou là où vous avez des fichiers ts, créez un fichier nommé meucci.ts et ajoutez le code suivant : 
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

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

​
2. Créez un Script de Build

Créez un fichier build-meucci.js à la racine de votre projet avec le contenu suivant : 
const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Fonction pour attendre qu'un répertoire existe
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout waiting for directory: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Créez la fonction de build
async function buildMeucci() {
  // Construisez le bundle
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: REMPLACER par le chemin vers votre fichier meucci.ts
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Lisez le fichier bundle
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Copiez dans les répertoires dev et prod
  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: REMPLACER par les chemins vers vos répertoires dev et prod

  // Traitez tous les répertoires simultanément
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Waiting for directory: ${dir}`)
      await waitForDirectory(dir)
      // Écrivez le fichier bundle
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Added meucci.js to ${dir}`)
    } catch (err) {
      console.log(`Skipping ${dir} - ${err.message}`)
    }
  }))

  // Nettoyez le fichier temporaire
  fs.unlinkSync('meucci.bundled.js')
}

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

​
3. Mettez à jour package.json

Ajoutez ce qui suit à votre fichier package.json : 
{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
Vous pouvez soit :
  1. Exécuter le script de build manuellement après votre build principal : npm run build:meucci
  2. Ou l’ajouter à votre script de build existant avec & : "build": "your-existing-build-command & npm run build:meucci"
Cela garantira que le fichier Meucci est correctement bundle et copié dans tous les répertoires de build dans la structure Plasmo correcte.

​
Mettez à jour initContentScript

Pour les deux implémentations, modifiez votre méthode initContentScript dans le script de contenu pour inclure le chemin correct vers le fichier Meucci : 
// Pour l'implémentation standard
await initContentScript({
    meucciFilePath: "meucci.js"
});
Pour le framework Plasmo, vous pouvez utiliser ce qui suit : 
// Pour le framework Plasmo
await initContentScript({
    meucciFilePath: "meucci.js"
});
Si vous avez également activé Pascoli, vous pouvez utiliser ce qui suit : 
await initContentScript({
    pascoliFilePath: "pascoli.html", // ou "tabs/pascoli.html" si vous utilisez le framework Plasmo
    meucciFilePath: "meucci.js"
});