Руководство по настройке модуля Meucci для плагинов браузера Mellowtel

Эта функция требует Mellowtel версии 1.6.2 или выше. Это является критическим изменением по сравнению с предыдущими версиями.

Mellowtel предоставляет дополнительную функцию, которая позволяет обрабатывать больше запросов и, следовательно, зарабатывать больше. Эта функция называется “Meucci”.

Установка

Сначала установи необходимый npm пакет, используя предпочитаемый менеджер пакетов:

Используя npm

npm install @mellowtel/module-meucci

Используя yarn

yarn add @mellowtel/module-meucci

Используя pnpm

pnpm add @mellowtel/module-meucci

Ниже приведены инструкции по включению функции Meucci в твоем плагине для браузера, с вариантами как для стандартной, так и для реализации на Plasmo framework.

Стандартная реализация

1. Создай JavaScript файл с именем `meucci.js`

В каталоге src или там, где у тебя находятся js файлы, создай файл с именем meucci.js и добавь следующий код. Убедись, что этот файл включен в твою финальную сборку (каталог /dist). Если ты следовал начальной настройке webpack, ты можешь просто добавить этот файл в объект entry в твоей конфигурации webpack.

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

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

2. Обнови конфигурацию webpack

Убедись, что твой финальный каталог сборки включает файл meucci.js. Если ты следовал начальной настройке webpack, ты можешь просто добавить этот файл в объект entry в твоей конфигурации 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. Обнови manifest.json

Добавь файл meucci.js в твой manifest.json как web_accessible_resources:

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

Реализация на Plasmo Framework

Если ты используешь Plasmo framework, следуй этим альтернативным шагам:

1. Создай TypeScript файл с именем `meucci.ts`

В каталоге src или там, где у тебя находятся ts файлы, создай файл с именем meucci.ts и добавь следующий код:

import ModuleMeucci from "@mellowtel/module-meucci";

let moduleMeucci;

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

2. Создай скрипт сборки

Создай файл build-meucci.js в корне проекта со следующим содержимым:

const esbuild = require('esbuild')
const fs = require('fs')
const path = require('path')

// Функция для ожидания существования каталога
const waitForDirectory = async (dir, timeout = 10000) => {
  const start = Date.now()
  while (!fs.existsSync(dir)) {
    if (Date.now() - start > timeout) {
      throw new Error(`Время ожидания истекло для каталога: ${dir}`)
    }
    await new Promise(resolve => setTimeout(resolve, 100))
  }
}

// Создай функцию сборки
async function buildMeucci() {
  // Собери пакет
  await esbuild.build({
    entryPoints: ['src/meucci.ts'], // TODO: ЗАМЕНИ на путь к твоему файлу meucci.ts
    bundle: true,
    outfile: 'meucci.bundled.js',
    platform: 'browser',
    format: 'iife',
    minify: true,
    target: ['es2020'],
    define: {
      'process.env.NODE_ENV': '"production"'
    }
  })

  // Прочитай собранный файл
  const bundledContent = fs.readFileSync('meucci.bundled.js', 'utf8')

  // Скопируй в dev и 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: ЗАМЕНИ на пути к твоим dev и prod каталогам

  // Обработай все каталоги одновременно
  await Promise.all(directories.map(async (dir) => {
    try {
      console.log(`Ожидание каталога: ${dir}`)
      await waitForDirectory(dir)
      // Запиши собранный файл
      fs.writeFileSync(path.join(dir, 'meucci.js'), bundledContent)
      console.log(`Добавлен meucci.js в ${dir}`)
    } catch (err) {
      console.log(`Пропуск ${dir} - ${err.message}`)
    }
  }))

  // Удали временный файл
  fs.unlinkSync('meucci.bundled.js')
}

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

3. Обнови package.json

Добавь следующее в твой файл package.json:

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

Ты можешь:

Запустить скрипт сборки вручную после основной сборки: npm run build:meucci
Или добавить его к существующему скрипту сборки с &: "build": "your-existing-build-command & npm run build:meucci"

Это обеспечит правильную сборку и копирование файла Meucci во все каталоги сборки в правильной структуре Plasmo.

Обнови initContentScript

Для обеих реализаций измени метод initContentScript в скрипте содержимого, чтобы включить правильный путь к файлу Meucci:

// Для стандартной реализации
await initContentScript({
    meucciFilePath: "meucci.js"
});

Для Plasmo framework, ты можешь использовать следующее:

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

Если у тебя также включен Pascoli, ты можешь использовать следующее:

await initContentScript({
    pascoliFilePath: "pascoli.html", // или "tabs/pascoli.html", если используешь Plasmo framework
    meucciFilePath: "meucci.js"
});

​Установка

​Используя npm

​Используя yarn

​Используя pnpm

​Стандартная реализация

​1. Создай JavaScript файл с именем meucci.js

​2. Обнови конфигурацию webpack

​3. Обнови manifest.json

​Реализация на Plasmo Framework

​1. Создай TypeScript файл с именем meucci.ts

​2. Создай скрипт сборки

​3. Обнови package.json

​Обнови initContentScript

Установка

Используя npm

Используя yarn

Используя pnpm

Стандартная реализация

1. Создай JavaScript файл с именем `meucci.js`

2. Обнови конфигурацию webpack

3. Обнови manifest.json

Реализация на Plasmo Framework

1. Создай TypeScript файл с именем `meucci.ts`

2. Создай скрипт сборки

3. Обнови package.json

Обнови initContentScript