> ## 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.
# Gana más habilitando una función adicional: Pascoli
Esta función requiere Mellowtel versión 1.6.2 o superior. Este es un cambio importante en comparación con versiones anteriores.
Mellowtel proporciona una función opcional que te permite manejar más solicitudes y, por lo tanto, ganar más. Esta función se llama "Pascoli".
## Instalación
Primero, instala el paquete npm requerido usando tu gestor de paquetes preferido:
### 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
```
A continuación se presentan las instrucciones para habilitar la función Pascoli en tu plugin de navegador, con opciones para implementaciones tanto estándar como del marco Plasmo.
## Implementación Estándar
### 1. Crea un archivo HTML llamado `pascoli.html`
Crea un archivo llamado `pascoli.html` y añade el siguiente código. Asegúrate de que este archivo se incluya en tu directorio de compilación final (/dist).
Si seguiste la configuración inicial de [webpack config setup](/browser-plugins/static-to-webpack), simplemente puedes añadir este archivo al directorio `public` como `pascoli.html`
```html theme={null}
```
Asegúrate de modificar el atributo `src` de la etiqueta script para apuntar a la ubicación correcta de tu archivo `pascoli.js` en la compilación final
### 2. Crea un archivo JavaScript llamado `pascoli.js`
En el directorio src, o donde tengas archivos js, crea un archivo llamado `pascoli.js` y añade el siguiente código. Asegúrate de que este archivo se incluya en tu directorio de compilación final (/dist).
Si seguiste la configuración inicial de [webpack config setup](/browser-plugins/static-to-webpack), simplemente puedes añadir este archivo al objeto `entry` en tu configuración de webpack.
```javascript theme={null}
import ModulePascoli from "@mellowtel/module-pascoli";
let modulePascoli;
(async () => {
modulePascoli = new ModulePascoli();
await modulePascoli.init();
})();
```
### 3. Actualiza tu configuración de webpack
Asegúrate de que tu directorio de compilación final incluya los archivos `pascoli.html` y `pascoli.js`.
Añade lo siguiente a tu configuración de webpack para asegurar que `pascoli.js` se incluya en la compilación:
```javascript theme={null}
module.exports = {
mode: 'development', // Usa 'production' para compilaciones de producción
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` debería incluirse automáticamente en tu directorio de compilación si seguiste la configuración inicial de [webpack config setup](/browser-plugins/static-to-webpack) y lo añadiste al directorio `public`.
### 4. Actualiza manifest.json
Añade el archivo `pascoli.html` a tu `manifest.json` como web\_accessible\_resources:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Implementación del Marco Plasmo
Si estás usando el marco Plasmo, sigue estos pasos alternativos:
### 1. Crea el Componente PascoliPage
Crea un archivo llamado `pascoli.tsx` en tu directorio `tabs`. Si no tienes un directorio `tabs`, crea uno. Más información sobre `tabs` en el marco Plasmo se puede encontrar [aquí](https://docs.plasmo.com/framework/tab-pages). Añade el siguiente código al archivo `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. Actualiza package.json para Plasmo
Añade lo siguiente a tu archivo `package.json`:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## Actualiza initContentScript
Para ambas implementaciones, modifica tu método `initContentScript` en el script de contenido para incluir la ruta correcta al archivo Pascoli:
```typescript theme={null}
// Para implementación estándar
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
Para el marco Plasmo, puedes usar lo siguiente:
```typescript theme={null}
// Para el marco Plasmo
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```