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

<Warning>
  Este recurso requer a versão 1.6.2 ou superior do Mellowtel. Esta é uma mudança significativa em relação às versões anteriores.
</Warning>

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

## Instalação

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

### Usando npm

```bash theme={null}
npm install @mellowtel/module-meucci
```

### Usando yarn

```bash theme={null}
yarn add @mellowtel/module-meucci
```

### Usando pnpm

```bash theme={null}
pnpm add @mellowtel/module-meucci
```

Abaixo estão as instruções para habilitar o recurso Meucci 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 JavaScript chamado `meucci.js`

No diretório src, ou onde quer que você tenha arquivos js, crie um arquivo chamado `meucci.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 ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();
```

### 2. Atualize sua configuração do webpack

Certifique-se de que seu diretório de build final inclua o arquivo `meucci.js`.

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}
module.exports = {
    // ...
    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'),
        meucci: path.join(__dirname, 'src', 'meucci.js'),
        // ...
    },
    // ...
}
```

### 3. Atualize o manifest.json

Adicione o arquivo `meucci.js` ao seu `manifest.json` como web\_accessible\_resources:

```json theme={null}
{
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
```

## Implementação com o Framework Plasmo

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

### 1. Crie um arquivo TypeScript chamado `meucci.ts`

No diretório src, ou onde quer que você tenha arquivos ts, crie um arquivo chamado `meucci.ts` e adicione o seguinte código:

```typescript theme={null}
import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

(async () => {
    moduleMeucci = new ModuleMeucci();
    await moduleMeucci.init();
})();
```

### 2. Crie um Script de Build

Crie um arquivo `build-meucci.js` na raiz do seu projeto com o seguinte conteúdo:

```javascript theme={null}
const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Função para esperar que um diretório exista
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Tempo esgotado esperando pelo diretório: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Crie a função de build
async function buildMeucci() {
  // Construa o bundle
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: SUBSTITUA pelo caminho para seu arquivo meucci.ts
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Leia o arquivo bundle
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Copie para os diretórios de dev e prod
  const directories = [ 
    'build/chrome-mv3-dev',
    'build/chrome-mv3-prod',
    'build/firefox-mv2-dev',
    'build/firefox-mv2-prod',
    'build/safari-mv2-dev',
    'build/safari-mv2-prod',
    'build/opera-mv3-dev',
    'build/opera-mv3-prod'
  ] // TODO: SUBSTITUA pelos caminhos para seus diretórios de dev e prod

  // Processe todos os diretórios simultaneamente
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Esperando pelo diretório: ${dir}`)
      await waitForDirectory(dir)
      // Escreva o arquivo bundle
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Adicionado meucci.js a ${dir}`)
    } catch (err) {
      console.log(`Ignorando ${dir} - ${err.message}`)
    }
  }))

  // Limpe o arquivo temporário
  fs.unlinkSync('meucci.bundled.js')
}

buildMeucci().catch(err => {
  console.error(err)
  process.exit(1)
})
```

### 3. Atualize o package.json

Adicione o seguinte ao seu arquivo `package.json`:

```json theme={null}
{
  "scripts": {
    "build:meucci": "node build-meucci.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "meucci.js"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}
```

Você pode:

1. Executar o script de build manualmente após seu build principal: `npm run build:meucci`
2. Ou anexá-lo ao seu script de build existente com `&`: `"build": "seu-comando-de-build-existente & npm run build:meucci"`

Isso garantirá que o arquivo Meucci seja devidamente empacotado e copiado para todos os diretórios de build na estrutura correta do Plasmo.

## Atualize initContentScript

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

```typescript theme={null}
// Para implementação padrão
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

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

```typescript theme={null}
// Para framework Plasmo
await initContentScript({
    meucciFilePath: "meucci.js"
});
```

Se você também tiver o Pascoli habilitado, pode usar o seguinte:

```typescript theme={null}
await initContentScript({
    pascoliFilePath: "pascoli.html", // ou "tabs/pascoli.html" se estiver usando o framework Plasmo
    meucciFilePath: "meucci.js"
});
```