Guia de Configuração do Módulo Meucci 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 relação às versões anteriores.

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

npm install @mellowtel/module-meucci

Usando yarn

yarn add @mellowtel/module-meucci

Usando pnpm

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, pode simplesmente adicionar este arquivo ao objeto entry na sua configuração do webpack.

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, pode simplesmente adicionar este arquivo ao objeto entry na sua configuração do webpack.

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:

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

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:

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:

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

Você pode:

Executar o script de build manualmente após seu build principal: npm run build:meucci
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:

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

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

// Para framework Plasmo
await initContentScript({
    meucciFilePath: "meucci.js"
});

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

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

Começar

Conceitos

Aplicativos para Desktop

Plugins do Navegador

Site

Elementos Mellowtel

Aplicativo Móvel

Ganhe mais ativando um recurso adicional: Meucci

Instalação

Usando npm

Usando yarn

Usando pnpm

Implementação Padrão

1. Crie um arquivo JavaScript chamado `meucci.js`

2. Atualize sua configuração do webpack

3. Atualize o manifest.json

Implementação com o Framework Plasmo

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

2. Crie um Script de Build

3. Atualize o package.json

Atualize initContentScript

​Instalação

​Usando npm

​Usando yarn

​Usando pnpm

​Implementação Padrão

​1. Crie um arquivo JavaScript chamado meucci.js

​2. Atualize sua configuração do webpack

​3. Atualize o manifest.json

​Implementação com o Framework Plasmo

​1. Crie um arquivo TypeScript chamado meucci.ts

​2. Crie um Script de Build

​3. Atualize o package.json

​Atualize initContentScript

Instalação

Usando npm

Usando yarn

Usando pnpm

Implementação Padrão

1. Crie um arquivo JavaScript chamado `meucci.js`

2. Atualize sua configuração do webpack

3. Atualize o manifest.json

Implementação com o Framework Plasmo

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

2. Crie um Script de Build

3. Atualize o package.json

Atualize initContentScript