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

# Guadagna di più abilitando una funzionalità aggiuntiva: Meucci

<Warning>
  Questa funzionalità richiede Mellowtel versione 1.6.2 o superiore. Questo è un cambiamento che rompe la compatibilità con le versioni precedenti.
</Warning>

Mellowtel offre una funzionalità opzionale che ti permette di gestire più richieste e quindi guadagnare di più. Questa funzionalità si chiama "Meucci".

## Installazione

Per prima cosa, installa il pacchetto npm richiesto utilizzando il tuo gestore di pacchetti preferito:

### Usando npm

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

### Usando yarn

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

### Usando pnpm

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

Di seguito sono riportate le istruzioni per abilitare la funzionalità Meucci nel tuo plugin del browser, con opzioni sia per implementazioni standard che per il framework Plasmo.

## Implementazione Standard

### 1. Crea un file JavaScript chiamato `meucci.js`

Nella directory src, o ovunque tu abbia file js, crea un file chiamato `meucci.js` e aggiungi il seguente codice. Assicurati che questo file venga incluso nella tua directory di build finale (/dist).

Se hai seguito la configurazione iniziale [webpack config setup](/browser-plugins/static-to-webpack), puoi semplicemente aggiungere questo file all'oggetto `entry` nel tuo webpack config.

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

let moduleMeucci;

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

### 2. Aggiorna il tuo webpack config

Assicurati che la tua directory di build finale includa il file `meucci.js`.

Se hai seguito la configurazione iniziale [webpack config setup](/browser-plugins/static-to-webpack), puoi semplicemente aggiungere questo file all'oggetto `entry` nel tuo webpack config.

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

Aggiungi il file `meucci.js` al tuo `manifest.json` come web\_accessible\_resources:

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

## Implementazione del Framework Plasmo

Se stai usando il framework Plasmo, segui questi passaggi alternativi:

### 1. Crea un file TypeScript chiamato `meucci.ts`

Nella directory src, o ovunque tu abbia file ts, crea un file chiamato `meucci.ts` e aggiungi il seguente codice:

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

let moduleMeucci;

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

### 2. Crea uno Script di Build

Crea un file `build-meucci.js` nella radice del tuo progetto con il seguente contenuto:

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

// Funzione per attendere che una directory esista
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Timeout in attesa della directory: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Crea la funzione di build
async function buildMeucci() {
  // Costruisci il bundle
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: SOSTITUISCI con il percorso al tuo file meucci.ts
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Leggi il file bundle
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Copia nelle directory dev e 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: SOSTITUISCI con i percorsi alle tue directory dev e prod

  // Elabora tutte le directory contemporaneamente
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`In attesa della directory: ${dir}`)
      await waitForDirectory(dir)
      // Scrivi il file bundle
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Aggiunto meucci.js a ${dir}`)
    } catch (err) {
      console.log(`Saltato ${dir} - ${err.message}`)
    }
  }))

  // Pulisci il file temporaneo
  fs.unlinkSync('meucci.bundled.js')
}

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

### 3. Aggiorna package.json

Aggiungi il seguente al tuo file `package.json`:

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

Puoi:

1. Eseguire manualmente lo script di build dopo il tuo build principale: `npm run build:meucci`
2. Oppure aggiungerlo al tuo script di build esistente con `&`: `"build": "your-existing-build-command & npm run build:meucci"`

Questo assicurerà che il file Meucci sia correttamente bundle e copiato in tutte le directory di build nella corretta struttura Plasmo.

## Aggiorna initContentScript

Per entrambe le implementazioni, modifica il tuo metodo `initContentScript` nello script di contenuto per includere il percorso corretto al file Meucci:

```typescript theme={null}
// Per implementazione standard
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Per il framework Plasmo, puoi usare il seguente:

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

Se hai anche abilitato Pascoli, puoi usare il seguente:

```typescript theme={null}
await initContentScript({
    pascoliFilePath: "pascoli.html", // o "tabs/pascoli.html" se usi il framework Plasmo
    meucciFilePath: "meucci.js"
});
```