> ## 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: Pascoli
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 "Pascoli".
## 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-pascoli
```
### Usando yarn
```bash theme={null}
yarn add @mellowtel/module-pascoli
```
### Usando pnpm
```bash theme={null}
pnpm add @mellowtel/module-pascoli
```
Di seguito sono riportate le istruzioni per abilitare la funzionalità Pascoli nel tuo plugin del browser, con opzioni per implementazioni sia standard che con il framework Plasmo.
## Implementazione Standard
### 1. Crea un file HTML chiamato `pascoli.html`
Crea un file chiamato `pascoli.html` e aggiungi il seguente codice. Assicurati che questo file venga incluso nella tua build finale (directory /dist).
Se hai seguito la configurazione iniziale [webpack config setup](/browser-plugins/static-to-webpack), puoi semplicemente aggiungere questo file alla directory `public` come `pascoli.html`
```html theme={null}
```
Assicurati di modificare l'attributo `src` del tag script per puntare alla posizione corretta del tuo file `pascoli.js` nella build finale
### 2. Crea un file JavaScript chiamato `pascoli.js`
Nella directory src, o ovunque tu abbia i file js, crea un file chiamato `pascoli.js` e aggiungi il seguente codice. Assicurati che questo file venga incluso nella tua build finale (directory /dist).
Se hai seguito la configurazione iniziale [webpack config setup](/browser-plugins/static-to-webpack), puoi semplicemente aggiungere questo file all'oggetto `entry` nella tua configurazione webpack.
```javascript theme={null}
import ModulePascoli from "@mellowtel/module-pascoli";
let modulePascoli;
(async () => {
modulePascoli = new ModulePascoli();
await modulePascoli.init();
})();
```
### 3. Aggiorna la tua configurazione webpack
Assicurati che la tua directory di build finale includa i file `pascoli.html` e `pascoli.js`.
Aggiungi il seguente codice alla tua configurazione webpack per assicurarti che `pascoli.js` sia incluso nella build:
```javascript theme={null}
module.exports = {
mode: 'development', // Usa 'production' per build di produzione
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'),
},
// ...
}
```
`pascoli.html` dovrebbe essere incluso automaticamente nella tua directory di build se hai seguito la configurazione iniziale [webpack config setup](/browser-plugins/static-to-webpack) e l'hai aggiunto alla directory `public`.
### 4. Aggiorna manifest.json
Aggiungi il file `pascoli.html` al tuo `manifest.json` come web\_accessible\_resources:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Implementazione con il Framework Plasmo
Se stai usando il framework Plasmo, segui questi passaggi alternativi:
### 1. Crea il Componente PascoliPage
Crea un file chiamato `pascoli.tsx` nella tua directory `tabs`. Se non hai una directory `tabs`, creane una. Maggiori informazioni sui `tabs` nel framework Plasmo possono essere trovate [qui](https://docs.plasmo.com/framework/tab-pages). Aggiungi il seguente codice al file `pascoli.tsx`:
```typescript theme={null}
import { useEffect } from "react"
import ModulePascoli from "@mellowtel/module-pascoli"
function PascoliPage() {
useEffect(() => {
const initPascoli = async () => {
const modulePascoli = new ModulePascoli();
await modulePascoli.init();
}
initPascoli().catch(console.error)
}, [])
return (
)
}
export default PascoliPage
```
### 2. Aggiorna package.json per Plasmo
Aggiungi il seguente codice al tuo file `package.json`:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Aggiorna initContentScript
Per entrambe le implementazioni, modifica il tuo metodo `initContentScript` nello script di contenuto per includere il percorso corretto al file Pascoli:
```typescript theme={null}
// Per implementazione standard
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
Per il framework Plasmo, puoi usare il seguente:
```typescript theme={null}
// Per il framework Plasmo
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```