> ## 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.
# Ganhe mais ativando um recurso adicional: Pascoli
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
```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
```
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](/browser-plugins/static-to-webpack), pode simplesmente adicionar este arquivo ao diretório `public` como `pascoli.html`
```html theme={null}
```
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](/browser-plugins/static-to-webpack), pode simplesmente adicionar este arquivo ao objeto `entry` na sua configuração do webpack.
```javascript theme={null}
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:
```javascript theme={null}
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](/browser-plugins/static-to-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:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## 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](https://docs.plasmo.com/framework/tab-pages). Adicione o seguinte código ao arquivo `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. Atualize o package.json para Plasmo
Adicione o seguinte ao seu arquivo `package.json`:
```json theme={null}
{
"web_accessible_resources": [
{
"resources": [
"tabs/pascoli.html"
],
"matches": [ "" ]
}
]
}
```
## 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:
```typescript theme={null}
// Para implementação padrão
await initContentScript({
pascoliFilePath: "pascoli.html"
});
```
Para o framework Plasmo, você pode usar o seguinte:
```typescript theme={null}
// Para o framework Plasmo
await initContentScript({
pascoliFilePath: "tabs/pascoli.html"
});
```