Как сделать расширение для браузера яндекс

Hello, Word! Разрабатываем браузерное расширение в 2021-м

Меня зовут Саша Коновалов, я разработчик в компании 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).

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

Схема архитектуры расширений. Источник: developer.mozilla.org

Самый лучший интернет браузер

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

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

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

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

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

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

Рисунок 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

Тут ничего нового — проверка navigator.userAgent. Например, при публикации в AppStore меня просили убрать кнопку доната.

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

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

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

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

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

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

Источник

Делаем своё расширение для браузера за 10 минут

В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.

А вот на чужих сайтах была проблема. Скрипт нужно было вставлять через консоль. А если на сайте была настроена политика безопасности, которая запрещает запуск внешних скриптов, то магия не срабатывала.

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

👉 Что такое расширение

Расширение для Chrome — это небольшая программа, которая выполняется внутри браузера и помогает расширить возможности сайтов. Сила расширения в том, что оно может выполняться прямо из меню браузера и не зависит от политик безопасности.

Примеры того, что может сделать расширение:

  • Сохранить ваши пароли и другие личные данные,
  • Выдрать из страницы скрытые данные (например, ссылку на скачивание музыки).
  • Менять что-то на странице, например, отключать рекламу, переводить текст, удалять ненужное.
  • Собирать статистику вашей работы в интернете.
  • Подключаться к другим сервисам (почте, чатам, файлообменникам) и взаимодействовать с ними из браузера.
Как перенести закладки с Гугл в Яндекс

В этой статье

Мы сделаем самое простое расширение для браузера Chrome, которое позволит запускать скрипт со снежинками на любом сайте, независимо от настроенной политики безопасности. Для этого воспользуемся официальным руководством Google по созданию расширений.

Манифест

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

  • как называется расширение;
  • к чему расширение может получить доступ;
  • какие скрипты будут работать в фоне;
  • как должна выглядеть иконка расширения;
  • что показать или что выполнить, когда пользователь нажмёт на иконку расширения.

Манифест задаёт общие правила для всего расширения, поэтому манифест — единственный обязательный компонент. Можно обойтись без иконок и скриптов, но манифест обязательно должен быть.Каждый манифест хранится в файле manifest.json — создадим пустой файл с таким именем и напишем внутри такое:

Первые две строчки — это название и подробное описание расширения. Третья отвечает за номер версии расширения, а последняя говорит браузеру, какая версия манифеста используется в описании. На момент выхода статьи в феврале 2021 года используется третья версия.

Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:

Мы попадаем на страницу, которая нам покажет все установленные расширения:

Делаем своё расширение для браузера за 10 минут

Чтобы добавить своё расширение, в правом верхнем углу включаем режим разработчика, а затем нажимаем «Загрузить распакованное расширение»:

Делаем своё расширение для браузера за 10 минут

Теперь выбираем папку, в которой лежит наш манифест:

Делаем своё расширение для браузера за 10 минут

Отлично, мы только что добавили в браузер новое расширение:

Делаем своё расширение для браузера за 10 минут

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

Чтобы было проще работать и тестировать расширение, закрепим его на панели браузера:

Делаем своё расширение для браузера за 10 минут

Иконки

У расширения есть две иконки, которыми мы можем управлять:

  1. Картинка в карточке расширения на странице настроек.
  2. Иконка на панели браузера.

Чтобы не рисовать всё с нуля, скачаем папку с иконками из того же руководства Google и положим её в ту же папку, что и манифест:

Теперь добавим иконки в манифест. За картинку в карточке отвечает блок icon, а за иконку на панели — блок action. Разные размеры картинки нужны для того, чтобы на разных мониторах с любой плотностью пикселей иконки выглядели хорошо:

В Яндекс Браузере пропали закладки как вернуть

Сохраняем манифест, обновляем расширение на странице настроек и смотрим результат:

Добавляем иконки в манифест

Настраиваем разрешения

Разрешения — это то, что браузер позволяет делать расширению со страницами и с их содержимым. Для запуска снежинок нам нужно сделать две вещи:

  1. Понять, какая вкладка сейчас активная, чтобы запустить снежинки именно на ней.
  2. Запустить наш скрипт со снежинками.

Чтобы получить доступ к активной вкладке и к запуску скриптов, добавим в манифест такую строку:

Показываем меню

Если мы сейчас нажмём на иконку расширения на панели браузера, то ничего не призойдёт, потому что мы ничего не запрограммировали. Исправим это — сделаем так, чтобы при нажатии расширение показывало кнопку запуска. Когда расширение будет уметь больше, вместо одной кнопки можно будет показать целое меню.

Чтобы сделать всплывающее меню, добавим в манифест в раздел action такую строку:

Она означает, что при нажатии на иконку мы увидим рядом с ней мини-страничку, на которой что-то будет.Создадим в той же папке расширения файл popup.html и добавим в него такой код:

Чтобы браузер не ругался, что у нас нет файла popup.js , создадим пустой файл с таким названием и положим его в ту же папку:

Показываем меню расширения

Сохраняем манифест, обновляем его на странице настроек и видим, что у нашего расширения появилось меню с кнопкой:

Показываем меню расширения

Запускаем снежинки

Вся магия будет происходить в файле popup.js — откроем его и добавим такой код:

Последнее, что нам осталось сделать, — положить в функцию snowFall() полный код скрипта из проекта со снежинками и сохранить файл.

Проверка

В прошлый раз мы не смогли запустить скрипт на любой странице Яндекса — мешала политика безопасности. Теперь всё работает:

Проверяем расширение

Скачать упакованное расширение. Перед установкой его нужно распаковать в любую папку.

Источник

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

Установка расширений в Яндекс Браузер: как в этом браузере добавить одно или несколько новых расширений?

Для того, чтобы установить (добавить) расширение в Яндекс Браузер, необходимо выполнить ряд действий:

1) Сначала открываем страницу с расширениями. Сделать это можно 2 способами.

Первый способ — в главном меню Яндекса нужно выбрать пункт «Дополнения».

Второй способ — сначала нужно создать новую вкладку. Затем нажать на «Дополнения» -> «Все дополнения».

Не работает браузер на телевизоре samsung

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

В самом низу будет кнопка «Каталог расширений для Яндекс.Браузера» — нажимаем на неё и переходим к списку расширений, которые доступны для установки.

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

Чтобы его установить достаточно нажать на кнопку «Добавить в Яндекс.Браузер» (эта кнопка находится на странице выбранного вами расширения).

установить расширение яндекс

4) Начнётся процесс установки.

После её окончания появится всплывающее окно, где нажимаем на «Установить расширение».

В результате расширение будет добавлено в браузер.

Расширения для Яндекс Браузера очень удобные. С их помощью можно установить в свой браузер : переводчик, блокировщик рекламы, прогноз погоды и другие удобные функции, необходимые для работы.

Для того чтобы установить расширение в Браузере нужно его открыть.

Далее переходим в раздел Дополнения. В списке откроются все варианты, которые уже есть и скачивать не нужно.

Если нужного дополнения нет, то переходим в каталог и выбираем нужное дополнение здесь, затем скачиваем его. Для этого нажимаем — добавить в Яндекс Браузер.

После того как дополнение добавлено выбираем — установить расширение.

В Яндекс браузере уже собраны (предустановлены) надстройки с различными функциями, поэтому ничего скачивать не нужно — просто найдите и активируйте уже установленный плагин в разделе инструментов: Щёлкните значок (три горизонтальные линии) в правой части окна браузера. В сером меню инструментов нажмите на строку «Дополнительно» с изображением головоломки. Вы попадете на внутреннюю вкладку браузера со списком дополнений. Они будут разделены на блоки: Загрузки, Подручные инструменты и так дал. Прокрутите список вниз.

Вы увидите отдельный раздел с надстройками для онлайн-безопасности и надстройками для покупок. Чтобы включить или отключить расширение, щелкните правой кнопкой мыши соответствующий переключатель. Серая кнопка означает, что плагин отключен, а жёлтая — что он включен.

Чтобы установить расширение в браузере Яндекс, откройте страницу расширений, выбрав пункт «Дополнения» в главном меню Яндекса. Следует нажать на кнопку типа Список расширений для Яндекс.Браузера и нажать на неё. Надстройки, которые уже встроены в Яндекс браузер, также отображаются вверху. В Каталоге расширений выберите нужное расширение из списка и установите его, нажав: Добавить в Яндекс.Браузер.

Источник
Рейтинг
Загрузка ...