Соответствие политикам браузера
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.Требования
Перед началом убедитесь, что:- Ваш плагин использует Manifest V3.
- Ваш код организован в скомпилированном виде с использованием Webpack, Rollup или других сборщиков. Если у вас не настроен сборщик, сначала следуйте руководству здесь
Установка npm пакета
Чтобы установить npm пакет, вы можете выполнить следующую команду в вашем терминале:Yarn
Yarn
Если вы используете yarn в качестве менеджера пакетов, вы можете выполнить следующую команду:
Выбор способа реализации
Существует два способа внедрения библиотеки в ваше расширение. Если вы собираетесь выпустить расширение впервые в Web Store, следуйте Опции 1. Если у вас уже есть опубликованное расширение в Web Store, прочтите “Как выбрать?”Как выбрать?
Когда вы устанавливаете свое расширение из Web Store, появляется ли окно предупреждения с запросом разрешения на “Чтение и изменение всех ваших данных на всех веб-сайтах”? Оно выглядит так:
Опция 1
Если вы выпускаете расширение впервые в Web Store или импортируете библиотеку в расширение, которое запрашивает разрешение на работу на всех веб-сайтах, вы можете следовать Опции 1.Настройка вашего манифеста
В вашем файле manifest.json измените разделыpermissions и host_permissions следующим образом:
Настройка вашего сервисного работника (фонового скрипта)
В вашем файле сервисного работника вам нужно импортировать пакетmellowtel.
Примечание: Сервисный работник также известен как фоновый скрипт.
Вы можете скопировать и вставить следующий код в ваш файл сервисного работника, изменив configuration_key на ваш собственный ключ.
Разбор кода сервисного работника
Разбор кода сервисного работника
Импортируйте пакет mellowtelЗатем вы можете использовать Инициализируйте Mellowtel, вызвав метод
Mellowtel(configuration_key, options?) для создания нового экземпляра объекта Mellowtel. Объект Mellowtel является вашей точкой входа в остальную часть SDK Mellowtel. Ваш configuration_key необходим при вызове этой функции, так как он идентифицирует ваше расширение для Mellowtel. Вы можете найти ваш configuration_key в панели управления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, пользователи должны явно согласиться на использование сервиса. Вы можете реализовать логику согласия/отказа двумя способами:- Используя рекомендуемую реализацию с предустановленной страницей, предоставленной Mellowtel.
- Создавая свои собственные элементы согласия/отказа и используя методы, показанные здесь
Если вы решите создать свои собственные элементы согласия/отказа, рассмотрите возможность использования Mellowtel Elements - предустановленных UI-компонентов, которые обрабатывают согласие пользователей и настройки с минимальными усилиями по интеграции.
service worker (также известный как фоновый скрипт) и добавьте следующий код:
Генерация ссылки на настройки
Чтобы ваши пользователи имели полный контроль над своей полосой пропускания, необходимо оставить легкодоступный способ для изменения настроек в любой момент. Вы можете сгенерировать ссылку, используя методgenerateSettingsLink().
Этот метод вернет ссылку, которая откроет страницу настроек Mellowtel, где пользователи могут в любой момент решить, хотят ли они согласиться или отказаться.
Эта ссылка должна быть размещена в всплывающем окне, на странице опций или в любом другом месте, где пользователи могут легко получить к ней доступ.
Например, вы можете поместить ее в функцию openSettings() следующим образом. Вы можете вызвать openSettings() при нажатии кнопки или любом другом соответствующем событии: