Guía del Módulo Pascoli de Mellowtel para Plugins de Navegador

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

npm install @mellowtel/module-pascoli

Usando yarn

yarn add @mellowtel/module-pascoli

Usando pnpm

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, simplemente puedes añadir este archivo al directorio public como pascoli.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" />
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: transparent;
        }
    </style>
    <script type="module" crossorigin src="/pascoli.js"></script>
</head>
<body>
</body>
</html>

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, simplemente puedes añadir este archivo al objeto entry en tu configuración de webpack.

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:

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

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

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í. Añade el siguiente código al archivo pascoli.tsx:

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 (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. Actualiza package.json para Plasmo

Añade lo siguiente a tu archivo package.json:

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Actualiza initContentScript

Para ambas implementaciones, modifica tu método initContentScript en el script de contenido para incluir la ruta correcta al archivo Pascoli:

// Para implementación estándar
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

Para el marco Plasmo, puedes usar lo siguiente:

// Para el marco Plasmo
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

Comenzar

Conceptos

Aplicaciones de escritorio

Complementos del navegador

Sitio web

Elementos de Mellowtel

Aplicación móvil

Gana más habilitando una función adicional: Pascoli

Instalación

Usando npm

Usando yarn

Usando pnpm

Implementación Estándar

1. Crea un archivo HTML llamado `pascoli.html`

2. Crea un archivo JavaScript llamado `pascoli.js`

3. Actualiza tu configuración de webpack

4. Actualiza manifest.json

Implementación del Marco Plasmo

1. Crea el Componente PascoliPage

2. Actualiza package.json para Plasmo

Actualiza initContentScript

​Instalación

​Usando npm

​Usando yarn

​Usando pnpm

​Implementación Estándar

​1. Crea un archivo HTML llamado pascoli.html

​2. Crea un archivo JavaScript llamado pascoli.js

​3. Actualiza tu configuración de webpack

​4. Actualiza manifest.json

​Implementación del Marco Plasmo

​1. Crea el Componente PascoliPage

​2. Actualiza package.json para Plasmo

​Actualiza initContentScript

Instalación

Usando npm

Usando yarn

Usando pnpm

Implementación Estándar

1. Crea un archivo HTML llamado `pascoli.html`

2. Crea un archivo JavaScript llamado `pascoli.js`

3. Actualiza tu configuración de webpack

4. Actualiza manifest.json

Implementación del Marco Plasmo

1. Crea el Componente PascoliPage

2. Actualiza package.json para Plasmo

Actualiza initContentScript