Здесь вы узнаете, как внедрить библиотеку Mellowtel в ваш проект расширения для Chrome/Edge. Ожидаемое время выполнения: 5-7 минут.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 соответствует политике браузеров, если интеграция уважает выбор и настройки пользователей. Официальные плагины 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.Требования
Прежде чем начать, убедитесь, что:- Ваш плагин использует 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 следующим образом:
Настройка вашего service worker (фонового скрипта)
В вашем файле service worker вам нужно импортировать пакетmellowtel.
Примечание: Service worker также известен как background script.
Вы можете скопировать и вставить следующий код в ваш файл service worker, изменив configuration_key на ваш собственный ключ.
Разбор кода service worker
Разбор кода service worker
Импортируйте пакет mellowtelЗатем вы можете использовать Инициализируйте Mellowtel, вызвав метод
Mellowtel(configuration_key, options?) для создания нового экземпляра объекта Mellowtel. Объект Mellowtel является вашей точкой входа в остальную часть SDK Mellowtel. Ваш configuration_key необходим при вызове этой функции, так как он идентифицирует ваше расширение для Mellowtel. Вы можете найти ваш configuration_key на панели управленияinitBackground. Этот метод инициализирует объект Mellowtel и настроит необходимые слушатели.Настройка вашего content script
Вам также нужно импортировать пакет mellowtel в content scripts. Этот content script должен выполняться вall_frames и <all_urls> на document_start.
Мы предлагаем создать новый content script (например, content_start_mellowtel.js), где вы можете скопировать и вставить следующий код.
Измените configuration_key на ваш собственный ключ.
manifest.json в секцию content_scripts вместе с любым другим content script, который у вас уже есть.
Вы можете скопировать и вставить следующий код, изменив name_of_your_content_script.js на выбранное вами имя.
Настройка логики включения/отключения
Для активации Mellowtel пользователи должны явно согласиться на использование сервиса. Вы можете реализовать логику включения/отключения двумя способами:- Используя рекомендованную реализацию с предустановленной страницей, предоставленной Mellowtel.
- Создавая свои собственные элементы включения/отключения и используя методы, показанные здесь
Если вы решите создать свои собственные элементы включения/отключения, рассмотрите возможность использования Mellowtel Elements — предустановленных UI компонентов, которые обрабатывают согласие и настройки пользователей с минимальными усилиями по интеграции.
service worker (также известный как background script) и добавьте следующий код:
Генерация ссылки на настройки
Чтобы предоставить вашим пользователям полный контроль над их полосой пропускания, необходимо оставить легкодоступный способ для изменения настроек в любой момент. Вы можете сгенерировать ссылку, используя методgenerateSettingsLink().
Этот метод вернет ссылку, которая откроет страницу настроек Mellowtel, где пользователи могут в любое время решить, хотят ли они включить или отключить сервис.
Эта ссылка должна быть размещена в всплывающем окне, на странице опций или в любом другом месте, где пользователи могут легко получить к ней доступ.
Например, вы можете поместить ее в функцию openSettings() следующим образом. Вы можете вызвать openSettings() при нажатии кнопки или любом другом соответствующем событии: