> ## Documentation Index > Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Интеграция Mellowtel в ваше расширение для Chrome/Edge Здесь вы узнаете, как внедрить библиотеку Mellowtel в ваш проект расширения для Chrome/Edge. Оценочное время выполнения: 5-7 минут. # Соответствие политикам браузера Mellowtel соответствует политикам браузера, если интеграция уважает выбор и настройки пользователей. Официальные плагины Mellowtel доступны в Chrome и Edge. Скоро мы представим их и в других крупных браузерах. Chrome: [https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc) Edge: [https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi](https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi) В Chrome некоторые разработчики могут столкнуться с проблемами во время проверки из-за политики единственной цели, которая гласит, что плагин может иметь только одну четко заявленную функцию (но часто интерпретируется неоднозначно в многофункциональных расширениях). В таких случаях мы рекомендуем разработчикам делиться своей персональной ссылкой и просить пользователей установить официальный плагин Mellowtel для Chrome, который имеет единственную цель — позволить разработчикам зарабатывать благодаря пользователям, которые хотят поддержать их, делясь своими неиспользуемыми ресурсами. Разработчики могут создать свою ссылку в [панели управления Mellowtel](https://www.mellowtel.com/dashboard/support-with-mellowtel) и перенаправить пользователей на официальный [плагин Mellowtel для Chrome](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc). Если же у вас есть плагин для Chrome, который работает в области обмена полосой пропускания ИИ и это является единственной целью плагина, вы можете интегрировать Mellowtel непосредственно в ваш плагин. В отличие от Chrome, Edge, Firefox или Safari не имеют такой политики, поэтому разработчики могут также интегрировать библиотеку непосредственно в свои продукты и убедиться, что они спрашивают своих пользователей, хотят ли они поддерживать их или нет, и всегда оставляют им простой способ изменить свои настройки в любое время из самого плагина. # Рекомендуемые браузеры На данный момент мы рекомендуем интегрировать Mellowtel в плагины для Edge, так как мы все еще работаем над оптимизацией версий библиотеки для Firefox и Safari. # Требования Перед началом убедитесь, что: 1. Ваш плагин использует [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3). 2. Ваш код организован в скомпилированном виде с использованием Webpack, Rollup или других сборщиков. Если у вас не настроен сборщик, сначала следуйте руководству [здесь](/browser-plugins/static-to-webpack) # Установка npm пакета Чтобы установить npm пакет, вы можете выполнить следующую команду в вашем терминале: ```npm theme={null} npm install mellowtel ``` Если вы используете yarn в качестве менеджера пакетов, вы можете выполнить следующую команду: ```yarn theme={null} yarn add mellowtel ``` # Выбор способа реализации Существует два способа внедрения библиотеки в ваше расширение. Если вы собираетесь выпустить расширение впервые в Web Store, следуйте Опции 1. Если у вас уже есть опубликованное расширение в Web Store, прочтите "Как выбрать?" ### Как выбрать? Когда вы устанавливаете свое расширение из Web Store, появляется ли окно предупреждения с запросом разрешения на "Чтение и изменение всех ваших данных на всех веб-сайтах"? Оно выглядит так: Если да, вы можете следовать Опции 1. Если нет, вам нужно следовать Опции 2. # Опция 1 Если вы выпускаете расширение впервые в Web Store или импортируете библиотеку в расширение, которое запрашивает разрешение на работу на всех веб-сайтах, вы можете следовать Опции 1. ### Настройка вашего манифеста В вашем файле [manifest.json](https://developer.chrome.com/docs/extensions/reference/manifest) измените разделы `permissions` и `host_permissions` следующим образом: ```json theme={null} { "permissions": [ "storage", "declarativeNetRequest" ], "host_permissions": [ "\u003Call_urls\u003E" ] } ``` ### Настройка вашего сервисного работника (фонового скрипта) В вашем файле [сервисного работника](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) вам нужно импортировать пакет `mellowtel`. Примечание: Сервисный работник также известен как `фоновый скрипт`. Вы можете скопировать и вставить следующий код в ваш файл сервисного работника, изменив `configuration_key` на ваш собственный ключ. ```javascript theme={null} import Mellowtel from "mellowtel"; let mellowtel; (async () => { mellowtel = new Mellowtel(""); // Замените на ваш ключ конфигурации await mellowtel.initBackground(); })(); ``` Импортируйте пакет mellowtel ```javascript theme={null} import Mellowtel from "mellowtel"; ``` Затем вы можете использовать `Mellowtel(configuration_key, options?)` для создания нового экземпляра объекта Mellowtel. Объект Mellowtel является вашей точкой входа в остальную часть SDK Mellowtel. Ваш `configuration_key` необходим при вызове этой функции, так как он идентифицирует ваше расширение для Mellowtel. Вы можете найти ваш `configuration_key` в [панели управления](https://www.mellowtel.com/mellowtel-dashboard/#home) ```javascript theme={null} mellowtel = new Mellowtel(""); ``` Инициализируйте Mellowtel, вызвав метод `initBackground`. Этот метод инициализирует объект Mellowtel и настроит необходимые слушатели. ```javascript theme={null} await mellowtel.initBackground(); ``` ### Настройка вашего скрипта содержимого Вам нужно также импортировать пакет mellowtel в [скрипты содержимого](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts). Этот скрипт содержимого должен выполняться в `all_frames` и `` на `document_start`. Мы предлагаем создать новый скрипт содержимого (например, content\_start\_mellowtel.js), куда вы можете скопировать и вставить следующий код. Измените `configuration_key` на ваш собственный ключ. ```javascript theme={null} import Mellowtel from "mellowtel"; (async () => { const mellowtel = new Mellowtel(""); // Замените на ваш ключ конфигурации await mellowtel.initContentScript(); })(); ``` Затем не забудьте также добавить этот скрипт содержимого в ваш файл `manifest.json` в разделе content\_scripts наряду с любыми другими скриптами содержимого, которые у вас уже есть. Вы можете скопировать и вставить следующий код, изменив `name_of_your_content_script.js` на выбранное вами имя. ```json theme={null} { "content_scripts": [ { "matches": [""], "js": [""], // <-- Измените здесь на имя вашего скрипта содержимого "run_at": "document_start", "all_frames": true } ] } ``` ### Настройка логики согласия/отказа Чтобы активировать Mellowtel, пользователи должны явно согласиться на использование сервиса. Вы можете реализовать логику согласия/отказа двумя способами: 1. Используя рекомендуемую реализацию с предустановленной страницей, предоставленной Mellowtel. 2. Создавая свои собственные элементы согласия/отказа и используя методы, показанные [здесь](https://docs.mellowtel.com/concepts/opt-in-out#2-custom-elements) Если вы решите создать свои собственные элементы согласия/отказа, рассмотрите возможность использования **Mellowtel Elements** - предустановленных UI-компонентов, которые обрабатывают согласие пользователей и настройки с минимальными усилиями по интеграции. Если вы используете рекомендуемую реализацию, откройте ваш файл `service worker` (также известный как фоновый скрипт) и добавьте следующий код: ```javascript theme={null} 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()` при нажатии кнопки или любом другом соответствующем событии: ```javascript theme={null} async function openSettings() { try { // Сгенерируйте и управляйте ссылкой на настройки const settingsLink = await mellowtel.generateSettingsLink(); // Запишите сгенерированную ссылку для отладки console.log("Сгенерированная ссылка на настройки:", settingsLink); // Теперь вы можете использовать эту ссылку в всплывающем окне, на странице опций или любом элементе UI } catch (error) { console.error("Ошибка при генерации ссылки на настройки:", error); } } ``` Отлично! Теперь вы готовы отправить свое расширение в Web Store. Следуйте руководству здесь, чтобы узнать, как [отправить ваше расширение](/browser-plugins/submit-to-chrome-store) # Опция 2 Опция 2 может потенциально отключить ваше расширение, если не будет реализована правильно. Поэтому она недоступна для всех пользователей Если вы не можете реализовать Опцию 1, пожалуйста, свяжитесь с нами на [Discord](https://discord.com/invite/txAZp4MSDe)