Guida alla Configurazione del Modulo Meucci di Mellowtel per Plugin del Browser

Questa funzionalità richiede Mellowtel versione 1.6.2 o superiore. Questo è un cambiamento che rompe la compatibilità con le 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 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, puoi semplicemente aggiungere questo file all’oggetto entry nel tuo webpack config.

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, puoi semplicemente aggiungere questo file all’oggetto entry nel tuo webpack config.

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

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

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

Puoi:

Eseguire manualmente lo script di build dopo il tuo build principale: npm run build:meucci
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:

// Per implementazione standard
await initContentScript({
    meucciFilePath: "meucci.js"
});

Per il framework Plasmo, puoi usare il seguente:

// Per framework Plasmo
await initContentScript({
    meucciFilePath: "meucci.js"
});

Se hai anche abilitato Pascoli, puoi usare il seguente:

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

Inizia

Concetti

App desktop

Plugin del browser

Sito web

Elementi Mellowtel

App mobile

Guadagna di più abilitando una funzionalità aggiuntiva: Meucci

Installazione

Usando npm

Usando yarn

Usando pnpm

Implementazione Standard

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

2. Aggiorna il tuo webpack config

3. Aggiorna manifest.json

Implementazione del Framework Plasmo

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

2. Crea uno Script di Build

3. Aggiorna package.json

Aggiorna initContentScript

​Installazione

​Usando npm

​Usando yarn

​Usando pnpm

​Implementazione Standard

​1. Crea un file JavaScript chiamato meucci.js

​2. Aggiorna il tuo webpack config

​3. Aggiorna manifest.json

​Implementazione del Framework Plasmo

​1. Crea un file TypeScript chiamato meucci.ts

​2. Crea uno Script di Build

​3. Aggiorna package.json

​Aggiorna initContentScript

Installazione

Usando npm

Usando yarn

Usando pnpm

Implementazione Standard

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

2. Aggiorna il tuo webpack config

3. Aggiorna manifest.json

Implementazione del Framework Plasmo

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

2. Crea uno Script di Build

3. Aggiorna package.json

Aggiorna initContentScript