Найти тему
SOFT BLOG ▾

Создаём простое дополнение информер для Яндекс Браузера

Оглавление

Одним из любых моим занятием, является мониторинг курсов валют. Не то, чтобы я занимаюсь какой-либо финансовой деятельностью – просто интересно быть в курсе котировок.

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

Созданный мной информер в виде расширения для Яндекс браузера
Созданный мной информер в виде расширения для Яндекс браузера

Информация разная, и если среднестатистический пользователь попробует что то сделать, то повторить сможет, но без понимания элементарной HTML разметки, могут быть трудности в создании чего то нового.

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

Дополнение для браузера своими руками

Главный файл дополнения

Создаём фал с полным названием и расширением manifest.json

С таким содержимым

Файл дополнения
Файл дополнения

Здесь особо нечего комментировать:

  • name - это название нашего расширения в "Дополнения";
  • Version - любые цифры, версия вашего расширения;
  • author - укажите здесь имя автора, любое содержимое;
  • default_popup - здесь мы указываем имя файла, в котором будет наш информер (ниже всё расскажу);
  • default_title - название, которое будет появляться при наведение на расширение в браузере.

Иконка дополнения

С иконкой дополнения я лично не заморачивался. Сейчас иконка серого цвета, и показывается первая буква названия - мне достаточно.

Если вам интересно и принципиально, то вот схема добавления иконки

Добавляются блоки, в которых прописываем каталог с иконками и их полные названия, включая расширения файла. Соответственно создаём рядом с файлом manifest.json папку "images" в которой сохраняем иконки.
Добавляются блоки, в которых прописываем каталог с иконками и их полные названия, включая расширения файла. Соответственно создаём рядом с файлом manifest.json папку "images" в которой сохраняем иконки.

Окно информера

Окно информера, выводится при помощи простого кода HTML, его можно взять на различных сайтах, который предлагают информеры для сторонних сайтов, для отображения различной информации . В нашем случае, это котировки валют.

Создаём файл index.html, вместе с manifest.json, такого содержания (я ниже добавлю архив с моим полностью рабочим дополнением)

Файл html
Файл html

Берём код информера (к примеру я брал здесь) и добавляем между тегами <body> и </body>

Здесь видно куда нужно вставлять код
Здесь видно куда нужно вставлять код

Ширину блока можно редактировать в блоке <style>, указав нужное значение в пикселях.

Добавление дополнения в браузер

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

browser://extensions

жмакнуть ентер, и на странице включить режим разработчика

Дополнения яндекс браузера и включение режима разработчика
Дополнения яндекс браузера и включение режима разработчика

Жмём кнопку «Загрузить распакованное расширение» и указываем папку с файлами дополнения, жмём «Выбор папки» - готово, наше дополнение установлено.

Скачать архив моего дополнения

С ядиска https://disk.yandex.ru/d/KHavandRYRsemA

ЭТО КРУТО, Я ТЕПЕРЬ НА ЛЮБОЙ СТРАНИЦЕ, МОГУ ОТКРЫТЬ ИНФОРМЕР И ПОСМОТРЕТЬ КУРСЫ ВАЛЮТ

По сути, в такой информер можно впихнуть любой интернет сайт - экспериментируйте.

-----------------------

Спасибо за поддержку!
Спасибо за поддержку!