Как экспортировать расширение из яндекс браузера

Обновлено: 03.07.2024

 — это встроенные в браузер мини-программы, которые добавляют в браузер новые функциональные возможности, например блокируют неприятную рекламу, включают ночной режим или управляют паролями. В Яндекс.Браузер можно устанавливать расширения, созданные командой браузера, а также расширения из Каталога браузера Opera.

Примечание. Среди расширений часто встречаются вредоносные, так как они создаются не только разработчиками браузеров, но и сторонними программистами. Поэтому Яндекс.Браузер отключает расширения из непроверенных источников и периодически проверяет, не появилось ли среди ранее установленных расширений подделок.

Просмотр списка расширений

Примечание. Если нужного расширения нет в списке или оно не устанавливается, скорее всего вы используете Яндекс.Браузер для организаций, а ограничения выставлены политикой «Настройки черного списка расширений».

Анализ существующих расширений и изучение предпочтений пользователей позволили отобрать для Яндекс.Браузера наиболее популярные, полезные и безопасные расширения.

Чтобы открыть список расширений, нажмите   → Дополнения .

Также в списке перечислены предустановленные расширения (например, Антишок) и дополнительные функции браузера (например, синхронизация).

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Выберите расширение и нажмите кнопку  Установить .

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

В нижней части страницы нажмите  Каталог расширений для Яндекс.Браузера . Перейдите на страницу нужного расширения и нажмите  + Добавить в Яндекс.Браузер . В открывшемся окне ознакомьтесь со списком данных, к которым расширение получит доступ. Если вы согласны дать доступ к своим данным, подтвердите установку. Найдите в списке нужное расширение и установите переключатель в положение  Вкл. / Выкл.

Чтобы получить доступ к настройкам расширения:

В описании нужного расширения нажмите  Подробнее . Под описанием нажмите Настройки . Если такой кнопки нет, значит возможность настройки данного расширения не предусмотрена.

Предустановленные расширения (Антишок, Блокировка рекламы, Советник, Эфир, Почта и т. п.) удалить нельзя, их можно отключить.

В описании нужного расширения нажмите  Подробнее .

Расширение удалится из файлов браузера, но не пропадет со страницы Дополнения . При включении оно будет скачано и установлено заново.

Значок расширения

После включения некоторых расширений их значок появляется справа от Умной строки. Нажав значок, вы получите доступ к функциям расширения:

Скрыть значок
Показать значок
Свернуть несколько значков

Если значок расширения не отображается на панели браузера:

В описании нужного расширения нажмите  Подробнее .

Если значков на панели очень много, их можно свернуть:

Наведите указатель на область между Умной строкой и значками расширений — указатель изменится на двустороннюю стрелку.

Чтобы увидеть все свернутые расширения, нажмите  .

Задать горячие клавиши для расширений

Вы можете задать горячие клавиши, чтобы быстро активизировать нужное расширение или выполнять различные действия во время его работы:

В нижней части страницы нажмите  Быстрые клавиши для расширений . Выберите действие, для которого нужно задать последовательность горячих клавиш, и установите курсор в поле справа от его названия. Нажмите и удерживайте одну или несколько служебных клавиш ( Ctrl , Shift , Alt ) и клавишу по вашему выбору.

Какие расширения не поддерживает Яндекс.Браузер?

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Как добавить новое расширение в Яндекс.Браузер?

Откройте папку с архивом и перетащите его в окно браузера.

После установки расширение появится в блоке Из других источников .

Проблемы с расширениями

Попробуйте переустановить его. Откройте в браузере страницу browser://extensions/ . Найдите нужное расширение и нажмите кнопку Удалить . Затем вновь установите его со страницы browser://tune или из источника, откуда вы раньше установили это расширение.

Не работает расширение Яндекс.Почты, Диска, Погоды или Пробок

Расширения «Элементы Яндекса» (Почта, Погода, Пробки и Диск) больше не развиваются и не устанавливаются, их корректная работа не гарантируется. Установите эти сервисы в качестве веб-приложений.

","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Расширения - Яндекс.Браузер. Справка","canonical":"https://browser.yandex.ru/help/personalization/extension.html","productName":"Яндекс.Браузер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>,,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>,,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'> Расширения отключены в связи с потенциально опасным и недобросовестным
поведением. Подробности в блоге Браузера и на Хабрахабре.

Просмотр списка расширений

Чтобы открыть список расширений, нажмите → Дополнения .

Меня зовут Саша Коновалов, я разработчик в компании Oxonit и наставник на программе «Мидл фронтенд-разработчик» в Яндекс.Практикуме.

На примере разработки расширения «Hello, Word» я расскажу, как разрабатывать кроссбраузерное расширение со знаниями современного фронтенда:

для чего нужно кроссбраузерное расширение;
как его разработать под разные браузеры;
модульность кода, как переиспользовать компоненты и как современный фронтенд помогает в разработке расширений;
какие инструменты можно использовать для сборки и публикации расширений (webpack, web-ext).

Структура расширения, о котором я расскажу в статье, близка к проекту SponsorBlock. Этот проект вдохновлял меня во время работы над собственным.

Итак, создадим расширение – Hello, Word!

Hello, Word — это расширение для перевода и запоминания слов. Оно стало прототипом моего пет-проекта Wordzzz, поэтому в посте я буду приводить примеры из него.

Рисунок 1. Описание функциональности

Что делает расширение?

выполняется на любом сайте (добавить функциональность на сайты — content-скрипт):
– по выделению слова появляется иконка, при клике делается запрос на сервис перевода и открывается окошко перевода слова (1a);
– также слово можно перевести, используя контекстное меню по правой кнопке мыши на выделенном слове (1b);
из окошка перевода можно добавить слово во внутренний словарь для истории и дальнейшего повторения (для передачи между различными частями расширения используется postMessage, для хранения слов — storage);
считает слова (нотификации) в background-скрипте (2);
помогает увидеть список внутреннего словаря в меню расширения и отредактировать его (всё та же связка postMessage + storage) (3);
позволяет тренироваться в изучении новых слов в отдельном окне (отдельная страница внутри расширения — learn-скрипт) (4).

Архитектура расширений

MDN Web Docs определяет расширение как набор файлов, который заботливо упакован для дальнейшего распространения и установки в браузер. Ниже указаны файлы, которые могут присутствовать в расширении.

manifest.json — обязательный файл для любого расширения. В нём содержатся имя расширения, требуемые разрешения и версия, а также указатели на другие файлы расширения.

Помимо этого в манифесте могут быть и указатели на другие файлы, например:

background pages — отвечает за долгоиграющую логику;
иконки и любые кнопки, которые расширение может определить;
sidebars, popups, and options pages — HTML-документы, предоставляющие содержимое для разных компонентов интерфейса пользователя;
content scripts — исполняемые на страницах JavaScript-сценарии расширения;
web-accessible resources — отвечает за то, чтобы контент вашего расширения стал видимым для скриптов и веб-страниц.

Рисунок 2. Архитектура расширения Hello, Word!

Архитектура проекта

Можно разрабатывать простые расширения, как в инструкции от Chrome. Мне же интересно расширить эту инструкцию для более сложных проектов, где надо добавить общие компоненты, системы сборки, кроссбраузерность, react, typescript — всё, без чего сложно представить современный фронтенд-проект.

Рисунок 3. Архитектура проекта Hello, Word!

Из рисунка выше видно, что проект состоит из нескольких частей:

Common — здесь хранятся общие компоненты, стили и т. д.;
Extension — само расширение Hello, Word!
Web — небольшой лендинг для проекта;
свой вариант может быть разным (даже другое расширение, почему нет?). В Wordzzz мы добавили ещё react-native-проект, дополнительно — сервер и разные интересные идеи и эксперименты.

Структура проекта

Управлять связями между пакетами помогает инструмент lerna (подробнее про настройку и использование можно прочитать на официальном сайте). Как и писал выше, в Common — общие стили и компоненты, общая статика (шрифт и иконки) в public-папке в корне. Web и Extension используют общие компоненты.

Рисунок 4: Структура проекта

В моем случае все пакеты собираются с помощью webpack. Для Extension собираются пять бандлов в дистрибутиве (в соответствии с Рис. 3), manifest.json, в котором указываются эти бандлы, и копируется статика.

Общие компоненты используются в соответствии с инструкцией lerna.

Для запуска расширения используется инструмент web-ext — он устанавливает расширение и позволяет подхватывать изменения кода в это установленное расширение.

Но у инструмента есть и ограничения: расширение может не загрузиться правильно в первый раз. В этом случае поможет сочетание с простым способом — обновлять вручную через панель расширений (в основном для изменений контент-скриптов).

Описание инструментов можно найти здесь.

Как достигается кроссбраузерность

1) Отдельные manifest под разные цели и браузеры

Собирается вебпаком c помощью небольшого написанного модуля под разные окружения и браузеры. В FF, например, нужно расширять наш исходный manifest.json добавлением browser_specific_settings.gecko.id.

2) Safari: конвертация кода в xcode-проект

xcrun safari-web-extension-converter ./packages/extension/dist --project-location ./packages/extension/safari --app-name HelloWord --swift --bundle-identifier app.wordzzz.HelloWord

Я указал --bundle-identifier своего сайта app.wordzzz.HelloWord, вы укажете свой.

После конвертации откроется проект и рекомендации не использовать некоторые функции (об этом ниже).

Жмём кнопку Run в XCode и смотрим, как всё работает.

Примечание: Может потребоваться включить «Разрешить неподписанные расширения» в меню «Разработка».

3) Проверка в CSS и немного про пути

До файлов в chromium-браузерах и FF разный относительный путь, поэтому я использовал css-селекторы:

4) Проверка в JS

5) Рекомендации по (не-)использованию определённых функций

Полезные ссылки

Разработка под Chrome
Разработка под Firefox
Разработка под Safari
Конвертация расширения под FF , которые поддерживаются для FF
Конвертер для Safari о кроссбраузерном расширении для Chrome

Вместо заключения

Как видите, разработать расширение можно и с современным стеком технологий. Я описал свой стек, но можно использовать и другой, важнее было показать подход в целом.

В проекте Hello, Word ещё много чего можно сделать, например, покрыть типами и тестами, использовать препроцессоры и многое другое. Предлагайте в комментариях полезные идеи для улучшения проекта и свои решения и полезные инструменты для разработки расширений. Всем мир.

Просмотр списка расширений

Чтобы открыть список расширений, нажмите   → Дополнения .

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Выберите расширение и нажмите кнопку  Установить .

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

Чтобы получить доступ к настройкам расширения:

В описании нужного расширения нажмите  Подробнее .

Значок расширения

Скрыть значок
Показать значок
Свернуть несколько значков

Если значок расширения не отображается на панели браузера:

В описании нужного расширения нажмите  Подробнее .

Если значков на панели очень много, их можно свернуть:

Чтобы увидеть все свернутые расширения, нажмите  .

Задать горячие клавиши для расширений

Какие расширения не поддерживает Яндекс.Браузер?

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Как добавить новое расширение в Яндекс.Браузер?

Откройте папку с архивом и перетащите его в окно браузера.

После установки расширение появится в блоке Из других источников .

Проблемы с расширениями

Не работает расширение Яндекс.Почты, Диска, Погоды или Пробок

","prev_next":<"prevItem":<"disabled":false,"title":"Веб-приложения","link":"/support/browser/personalization/web-app.html">,"nextItem":>,"breadcrumbs":[,],"useful_links":null,"meta":,"voter":","extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Расширения - Яндекс.Браузер. Справка","productName":"Яндекс.Браузер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>,,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>,,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Просмотр списка расширений

Чтобы открыть список расширений, нажмите → Дополнения .

Просмотр списка расширений

Чтобы открыть список расширений, нажмите   → Дополнения .

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Выберите расширение и нажмите кнопку  Установить .

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

Чтобы получить доступ к настройкам расширения:

В описании нужного расширения нажмите  Подробнее .

Значок расширения

Скрыть значок
Показать значок
Свернуть несколько значков

Если значок расширения не отображается на панели браузера:

В описании нужного расширения нажмите  Подробнее .

Если значков на панели очень много, их можно свернуть:

Чтобы увидеть все свернутые расширения, нажмите  .

Задать горячие клавиши для расширений

Какие расширения не поддерживает Яндекс.Браузер?

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Как добавить новое расширение в Яндекс.Браузер?

Откройте папку с архивом и перетащите его в окно браузера.

После установки расширение появится в блоке Из других источников .

Проблемы с расширениями

Не работает расширение Яндекс.Почты, Диска, Погоды или Пробок

","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Расширения - Яндекс.Браузер для ДИТ. Справка","productName":"Яндекс.Браузер для ДИТ","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>,,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>,,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'> Расширения отключены в связи с потенциально опасным и недобросовестным
поведением. Подробности в блоге Браузера и на Хабрахабре.

Просмотр списка расширений

Чтобы открыть список расширений, нажмите → Дополнения .

Читайте также: