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

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

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

Установка

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

Используя npm

npm install @mellowtel/module-pascoli

Используя yarn

yarn add @mellowtel/module-pascoli

Используя pnpm

pnpm add @mellowtel/module-pascoli

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

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

1. Создайте HTML файл с именем `pascoli.html`

Создайте файл с именем pascoli.html и добавьте следующий код. Убедитесь, что этот файл включен в вашу финальную сборку (директорию /dist). Если вы следовали начальной настройке webpack, вы можете просто добавить этот файл в директорию public как pascoli.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" />
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: transparent;
        }
    </style>
    <script type="module" crossorigin src="/pascoli.js"></script>
</head>
<body>
</body>
</html>

Убедитесь, что вы изменили атрибут src тега script, чтобы он указывал на правильное расположение вашего файла pascoli.js в финальной сборке

2. Создайте JavaScript файл с именем `pascoli.js`

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

import ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. Обновите вашу конфигурацию webpack

Убедитесь, что ваша финальная сборка включает файлы pascoli.html и pascoli.js. Добавьте следующее в вашу конфигурацию webpack, чтобы убедиться, что pascoli.js включен в сборку:

module.exports = {
    mode: 'development', // Используйте 'production' для производственных сборок
    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 должен быть автоматически включен в вашу сборочную директорию, если вы следовали начальной настройке webpack и добавили его в директорию public.

4. Обновите manifest.json

Добавьте файл pascoli.html в ваш manifest.json как web_accessible_resources:

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

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

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

1. Создайте компонент PascoliPage

Создайте файл с именем pascoli.tsx в вашей директории tabs. Если у вас нет директории tabs, создайте её. Больше информации о tabs в Plasmo framework можно найти здесь. Добавьте следующий код в файл pascoli.tsx:

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 (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. Обновите package.json для Plasmo

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

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Обновите initContentScript

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

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

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

// Для Plasmo framework
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

​Установка

​Используя npm

​Используя yarn

​Используя pnpm

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

​1. Создайте HTML файл с именем pascoli.html

​2. Создайте JavaScript файл с именем pascoli.js

​3. Обновите вашу конфигурацию webpack

​4. Обновите manifest.json

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

​1. Создайте компонент PascoliPage

​2. Обновите package.json для Plasmo

​Обновите initContentScript

Установка

Используя npm

Используя yarn

Используя pnpm

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

1. Создайте HTML файл с именем `pascoli.html`

2. Создайте JavaScript файл с именем `pascoli.js`

3. Обновите вашу конфигурацию webpack

4. Обновите manifest.json

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

1. Создайте компонент PascoliPage

2. Обновите package.json для Plasmo

Обновите initContentScript