Documentation Index
Fetch the complete documentation index at: https://docs.mellowtel.com/llms.txt
Use this file to discover all available pages before exploring further.
Este recurso requer a versão 1.6.2 ou superior do Mellowtel. Esta é uma mudança incompatível com versões anteriores.
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 config setup, pode simplesmente adicionar este arquivo ao objeto entry na sua configuração webpack.
import ModuleMeucci from "@mellowtel/module-meucci";
let moduleMeucci;
(async () => {
moduleMeucci = new ModuleMeucci();
await moduleMeucci.init();
})();
2. Atualize sua configuração 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 config setup, pode simplesmente adicionar este arquivo ao objeto entry na sua configuração 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>" ]
}
]
}
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(`Timeout 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(`Pulando ${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 adicioná-lo ao seu script de build existente com
&: "build": "your-existing-build-command & 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 o framework Plasmo
await initContentScript({
meucciFilePath: "meucci.js"
});
Se você também tiver o Pascoli ativado, pode usar o seguinte:
await initContentScript({
pascoliFilePath: "pascoli.html", // ou "tabs/pascoli.html" se estiver usando o framework Plasmo
meucciFilePath: "meucci.js"
});