Skip to main content
Здесь вы узнаете, как внедрить библиотеку 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, который работает в области обмена полосой пропускания ИИ и это является единственной целью плагина, вы можете интегрировать Mellowtel непосредственно в ваш плагин. В отличие от Chrome, Edge, Firefox или Safari не имеют такой политики, поэтому разработчики могут также интегрировать библиотеку непосредственно в свои продукты и убедиться, что они спрашивают своих пользователей, хотят ли они поддерживать их или нет, и всегда оставляют им простой способ изменить свои настройки в любое время из самого плагина.

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

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

Требования

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

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

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

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

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

Как выбрать?

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

Опция 1

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

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

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

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

В вашем файле сервисного работника вам нужно импортировать пакет mellowtel. Примечание: Сервисный работник также известен как фоновый скрипт. Вы можете скопировать и вставить следующий код в ваш файл сервисного работника, изменив configuration_key на ваш собственный ключ.
Импортируйте пакет mellowtel
Затем вы можете использовать Mellowtel(configuration_key, options?) для создания нового экземпляра объекта Mellowtel. Объект Mellowtel является вашей точкой входа в остальную часть SDK Mellowtel. Ваш configuration_key необходим при вызове этой функции, так как он идентифицирует ваше расширение для Mellowtel. Вы можете найти ваш configuration_key в панели управления
Инициализируйте Mellowtel, вызвав метод initBackground. Этот метод инициализирует объект Mellowtel и настроит необходимые слушатели.

Настройка вашего скрипта содержимого

Вам нужно также импортировать пакет mellowtel в скрипты содержимого. Этот скрипт содержимого должен выполняться в all_frames и <all_urls> на document_start. Мы предлагаем создать новый скрипт содержимого (например, content_start_mellowtel.js), куда вы можете скопировать и вставить следующий код. Измените configuration_key на ваш собственный ключ.
Затем не забудьте также добавить этот скрипт содержимого в ваш файл manifest.json в разделе content_scripts наряду с любыми другими скриптами содержимого, которые у вас уже есть. Вы можете скопировать и вставить следующий код, изменив name_of_your_content_script.js на выбранное вами имя.

Настройка логики согласия/отказа

Чтобы активировать Mellowtel, пользователи должны явно согласиться на использование сервиса. Вы можете реализовать логику согласия/отказа двумя способами:
  1. Используя рекомендуемую реализацию с предустановленной страницей, предоставленной Mellowtel.
  2. Создавая свои собственные элементы согласия/отказа и используя методы, показанные здесь
Если вы решите создать свои собственные элементы согласия/отказа, рассмотрите возможность использования Mellowtel Elements - предустановленных UI-компонентов, которые обрабатывают согласие пользователей и настройки с минимальными усилиями по интеграции.
Если вы используете рекомендуемую реализацию, откройте ваш файл service worker (также известный как фоновый скрипт) и добавьте следующий код:

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

Чтобы ваши пользователи имели полный контроль над своей полосой пропускания, необходимо оставить легкодоступный способ для изменения настроек в любой момент. Вы можете сгенерировать ссылку, используя метод generateSettingsLink(). Этот метод вернет ссылку, которая откроет страницу настроек Mellowtel, где пользователи могут в любой момент решить, хотят ли они согласиться или отказаться. Эта ссылка должна быть размещена в всплывающем окне, на странице опций или в любом другом месте, где пользователи могут легко получить к ней доступ. Например, вы можете поместить ее в функцию openSettings() следующим образом. Вы можете вызвать openSettings() при нажатии кнопки или любом другом соответствующем событии:
Отлично! Теперь вы готовы отправить свое расширение в Web Store. Следуйте руководству здесь, чтобы узнать, как отправить ваше расширение

Опция 2

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