Skip to main content

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.

Здесь вы узнаете, как внедрить библиотеку Mellowtel в ваш проект расширения для Chrome/Edge. Ожидаемое время выполнения: 5-7 минут.

Соответствие политике браузеров

Mellowtel соответствует политике браузеров, если интеграция уважает выбор и настройки пользователей. Официальные плагины Mellowtel доступны в Chrome и Edge. Вскоре мы отправим их также в другие крупные браузеры. Chrome: https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc Edge: https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi В Chrome некоторые разработчики могут столкнуться с проблемами во время проверки из-за политики единственной цели, которая гласит, что плагин может иметь только одну четко заявленную функциональность (но часто интерпретируется непоследовательно в многофункциональных расширениях). В таких случаях мы рекомендуем разработчикам делиться своей персональной ссылкой и просить пользователей установить официальный плагин Mellowtel для Chrome, который имеет единственную цель — позволить разработчикам зарабатывать благодаря пользователям, которые хотят поддержать их, делясь своими неиспользуемыми ресурсами. Разработчики могут создать свою ссылку на панели управления Mellowtel и перенаправить пользователей на официальный плагин Mellowtel для Chrome. Если же у вас есть плагин в Chrome, который работает в области совместного использования полосы пропускания AI, и это единственная цель плагина, вы можете интегрировать Mellowtel непосредственно в ваш плагин. В отличие от Chrome, Edge, Firefox или Safari не имеют этой политики, поэтому разработчики могут также интегрировать библиотеку непосредственно в свои продукты и убедиться, что они спрашивают своих пользователей, хотят ли они их поддержать или нет, и всегда оставляют им простой способ изменить свои настройки в любое время из самого плагина.

Рекомендуемые браузеры

На данный момент мы рекомендуем интегрировать Mellowtel в плагины для Edge, так как мы все еще работаем над оптимизацией версий библиотеки для Firefox и Safari.

Требования

Прежде чем начать, убедитесь, что:
  1. Ваш плагин использует Manifest V3.
  2. Ваш код организован в компилированном виде с использованием Webpack, Rollup или других сборщиков. Если у вас не настроен сборщик, сначала следуйте руководству здесь

Установка npm пакета

Чтобы установить npm пакет, вы можете выполнить следующую команду в вашем терминале:
npm install mellowtel
Если вы используете yarn как ваш менеджер пакетов, вы можете выполнить следующую команду:
yarn add mellowtel

Выбор реализации

Есть два способа, как вы можете внедрить библиотеку в ваше расширение. Если вы собираетесь выпустить расширение впервые в Web Store, следуйте Опции 1. Если у вас уже опубликовано расширение в Web Store, прочитайте “Как выбрать?”

Как выбрать?

Когда вы устанавливаете ваше расширение из Web Store, появляется ли окно с предупреждением, запрашивающее разрешение на “Чтение и изменение всех ваших данных на всех веб-сайтах”? Это выглядит так:
Если да, вы можете следовать Опции 1. Если нет, вам нужно следовать Опции 2.

Опция 1

Если вы выпускаете расширение впервые в Web Store или импортируете библиотеку в расширение, которое запрашивает разрешение на работу на всех веб-сайтах, вы можете следовать Опции 1.

Настройка вашего манифеста

В вашем файле manifest.json измените секции permissions и host_permissions следующим образом:
{

  "permissions": [
    "storage",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]

}

Настройка вашего service worker (фонового скрипта)

В вашем файле service worker вам нужно импортировать пакет mellowtel. Примечание: Service worker также известен как background script. Вы можете скопировать и вставить следующий код в ваш файл service worker, изменив configuration_key на ваш собственный ключ.
import Mellowtel from "mellowtel";

let mellowtel;

(async () => {
    mellowtel = new Mellowtel("<configuration_key>"); // Замените на ваш ключ конфигурации
    await mellowtel.initBackground();
})();
Импортируйте пакет mellowtel
    import Mellowtel from "mellowtel";
Затем вы можете использовать Mellowtel(configuration_key, options?) для создания нового экземпляра объекта Mellowtel. Объект Mellowtel является вашей точкой входа в остальную часть SDK Mellowtel. Ваш configuration_key необходим при вызове этой функции, так как он идентифицирует ваше расширение для Mellowtel. Вы можете найти ваш configuration_key на панели управления
mellowtel = new Mellowtel("<configuration_key>");
Инициализируйте Mellowtel, вызвав метод initBackground. Этот метод инициализирует объект Mellowtel и настроит необходимые слушатели.
await mellowtel.initBackground();

Настройка вашего content script

Вам также нужно импортировать пакет mellowtel в content scripts. Этот content script должен выполняться в all_frames и <all_urls> на document_start. Мы предлагаем создать новый content script (например, content_start_mellowtel.js), где вы можете скопировать и вставить следующий код. Измените configuration_key на ваш собственный ключ.
import Mellowtel from "mellowtel";

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // Замените на ваш ключ конфигурации
    await mellowtel.initContentScript();
})();
Затем не забудьте также добавить этот content script в ваш файл manifest.json в секцию content_scripts вместе с любым другим content script, который у вас уже есть. Вы можете скопировать и вставить следующий код, изменив name_of_your_content_script.js на выбранное вами имя.
{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["<name_of_your_content_script.js>"], // <-- Измените здесь на имя вашего content script
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

Настройка логики включения/отключения

Для активации Mellowtel пользователи должны явно согласиться на использование сервиса. Вы можете реализовать логику включения/отключения двумя способами:
  1. Используя рекомендованную реализацию с предустановленной страницей, предоставленной Mellowtel.
  2. Создавая свои собственные элементы включения/отключения и используя методы, показанные здесь
Если вы решите создать свои собственные элементы включения/отключения, рассмотрите возможность использования Mellowtel Elements — предустановленных UI компонентов, которые обрабатывают согласие и настройки пользователей с минимальными усилиями по интеграции.
Если вы используете рекомендованную реализацию, откройте ваш файл service worker (также известный как background script) и добавьте следующий код:
chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("Расширение установлено или обновлено");
    // Если вы хотите обрабатывать первую установку и обновления по-разному
    /**
    if(details.reason === "install"){
        // вызовите функцию для обработки первой установки
    } else if(details.reason === "update") {
        // вызовите функцию для обработки обновления
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});

Генерация ссылки на настройки

Чтобы предоставить вашим пользователям полный контроль над их полосой пропускания, необходимо оставить легкодоступный способ для изменения настроек в любой момент. Вы можете сгенерировать ссылку, используя метод generateSettingsLink(). Этот метод вернет ссылку, которая откроет страницу настроек Mellowtel, где пользователи могут в любое время решить, хотят ли они включить или отключить сервис. Эта ссылка должна быть размещена в всплывающем окне, на странице опций или в любом другом месте, где пользователи могут легко получить к ней доступ. Например, вы можете поместить ее в функцию openSettings() следующим образом. Вы можете вызвать openSettings() при нажатии кнопки или любом другом соответствующем событии:
async function openSettings() {
    try {
        // Генерация и управление ссылкой на настройки
        const settingsLink = await mellowtel.generateSettingsLink();
        // Логирование сгенерированной ссылки для отладки
        console.log("Сгенерированная ссылка на настройки:", settingsLink);
        // Теперь вы можете использовать эту ссылку в всплывающем окне, на странице опций или любом элементе интерфейса
    } catch (error) {
        console.error("Ошибка при генерации ссылки на настройки:", error);
    }
}
Отлично! Теперь вы готовы отправить ваше расширение в Web Store. Следуйте руководству здесь, чтобы узнать, как отправить ваше расширение

Опция 2

Опция 2 может потенциально отключить ваше расширение, если она не будет реализована правильно. Поэтому она недоступна для всех пользователей
Если вы не можете реализовать Опцию 1, пожалуйста, свяжитесь с нами на Discord