Guia do Módulo Pascoli da Mellowtel para Plugins de Navegador

Este recurso requer a versão 1.6.2 ou superior do Mellowtel. Esta é uma mudança significativa em comparação com versões anteriores.

A Mellowtel oferece um recurso opcional que permite lidar com mais solicitações e, portanto, ganhar mais. Este recurso é chamado “Pascoli”.

Instalação

Primeiro, instale o pacote npm necessário usando seu gerenciador de pacotes preferido:

Usando npm

npm install @mellowtel/module-pascoli

Usando yarn

yarn add @mellowtel/module-pascoli

Usando pnpm

pnpm add @mellowtel/module-pascoli

Abaixo estão as instruções para habilitar o recurso Pascoli no seu plugin de navegador, com opções para implementações padrão e com o framework Plasmo.

Implementação Padrão

1. Crie um arquivo HTML chamado `pascoli.html`

Crie um arquivo chamado pascoli.html e adicione o seguinte código. Certifique-se de que este arquivo seja incluído no seu diretório de build final (/dist). Se você seguiu a configuração inicial do webpack, pode simplesmente adicionar este arquivo ao diretório 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>

Certifique-se de modificar o atributo src da tag script para apontar para o local correto do seu arquivo pascoli.js no build final

2. Crie um arquivo JavaScript chamado `pascoli.js`

No diretório src, ou onde quer que você tenha arquivos js, crie um arquivo chamado pascoli.js e adicione o seguinte código. Certifique-se de que este arquivo seja incluído no seu diretório de build final (/dist). Se você seguiu a configuração inicial do webpack, pode simplesmente adicionar este arquivo ao objeto entry na sua configuração do webpack.

import ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. Atualize sua configuração do webpack

Certifique-se de que seu diretório de build final inclua os arquivos pascoli.html e pascoli.js. Adicione o seguinte à sua configuração do webpack para garantir que pascoli.js seja incluído no build:

module.exports = {
    mode: 'development', // Use 'production' para builds de produção
    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 deve ser incluído automaticamente no seu diretório de build se você seguiu a configuração inicial do webpack e o adicionou ao diretório public.

4. Atualize o manifest.json

Adicione o arquivo pascoli.html ao seu manifest.json como web_accessible_resources:

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

Implementação com o Framework Plasmo

Se você estiver usando o framework Plasmo, siga estas etapas alternativas:

1. Crie o Componente PascoliPage

Crie um arquivo chamado pascoli.tsx no seu diretório tabs. Se você não tiver um diretório tabs, crie um. Mais informações sobre tabs no framework Plasmo podem ser encontradas aqui. Adicione o seguinte código ao arquivo 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. Atualize o package.json para Plasmo

Adicione o seguinte ao seu arquivo package.json:

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

Atualize o initContentScript

Para ambas as implementações, modifique seu método initContentScript no script de conteúdo para incluir o caminho correto para o arquivo Pascoli:

// Para implementação padrão
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

Para o framework Plasmo, você pode usar o seguinte:

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

​Instalação

​Usando npm

​Usando yarn

​Usando pnpm

​Implementação Padrão

​1. Crie um arquivo HTML chamado pascoli.html

​2. Crie um arquivo JavaScript chamado pascoli.js

​3. Atualize sua configuração do webpack

​4. Atualize o manifest.json

​Implementação com o Framework Plasmo

​1. Crie o Componente PascoliPage

​2. Atualize o package.json para Plasmo

​Atualize o initContentScript

Instalação

Usando npm

Usando yarn

Usando pnpm

Implementação Padrão

1. Crie um arquivo HTML chamado `pascoli.html`

2. Crie um arquivo JavaScript chamado `pascoli.js`

3. Atualize sua configuração do webpack

4. Atualize o manifest.json

Implementação com o Framework Plasmo

1. Crie o Componente PascoliPage

2. Atualize o package.json para Plasmo

Atualize o initContentScript