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.

Questa funzionalità richiede Mellowtel versione 1.6.2 o superiore. Questo è un cambiamento significativo rispetto alle versioni precedenti.
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

npm install @mellowtel/module-meucci

​
Usando yarn

yarn add @mellowtel/module-meucci

​
Usando pnpm

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 i file js, crea un file chiamato meucci.js e aggiungi il seguente codice. Assicurati che questo file venga incluso nella tua build finale (directory /dist). Se hai seguito la configurazione iniziale configurazione webpack, puoi semplicemente aggiungere questo file all’oggetto entry nella tua configurazione webpack. 
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

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

​
2. Aggiorna la tua configurazione webpack

Assicurati che la tua directory di build finale includa il file meucci.js. Se hai seguito la configurazione iniziale configurazione webpack, puoi semplicemente aggiungere questo file all’oggetto entry nella tua configurazione 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. Aggiorna manifest.json

Aggiungi il file meucci.js al tuo manifest.json come web_accessible_resources: 
{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

​
Implementazione con il Framework Plasmo

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

​
1. Crea un file TypeScript chiamato meucci.ts

Nella directory src, o ovunque tu abbia i file ts, crea un file chiamato meucci.ts e aggiungi il seguente codice: 
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: 
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 di sviluppo e produzione
  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 di sviluppo e produzione

  // Processa 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: 
{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
Puoi scegliere di:
  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 struttura corretta di Plasmo.

​
Aggiorna initContentScript

Per entrambe le implementazioni, modifica il tuo metodo initContentScript nello script di contenuto per includere il percorso corretto al file Meucci: 
// Per implementazione standard
await initContentScript({
    meucciFilePath: "meucci.js"
});
Per il framework Plasmo, puoi usare il seguente: 
// Per il framework Plasmo
await initContentScript({
    meucciFilePath: "meucci.js"
});
Se hai anche Pascoli abilitato, puoi usare il seguente: 
await initContentScript({
    pascoliFilePath: "pascoli.html", // o "tabs/pascoli.html" se usi il framework Plasmo
    meucciFilePath: "meucci.js"
});