Яндекс браузер добавить сайт как приложение

Обновлено: 07.01.2025

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

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

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

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

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

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

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

В этой статье

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

Манифест

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

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

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

«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

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

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

"permissions": ["activeTab", "scripting"],

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

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

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

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

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

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

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

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

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

Проверка

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

Георгий Лямин | 1 Октября, 2020 - 15:57

Сегодня «Яндекс.Браузеру» исполнилось 8 лет и в честь этого события разработчики выпустили крупное обновление. С его помощью работать с популярными сайтами стало так же удобно, как и с приложениями в системе.

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

Тем не менее веб-приложения до недавних пор были лишены одной очень удобной возможности. Интерфейс работы с программами в операционной системе совершенствовался десятки лет. Сайты лишены возможности его использовать, потому что работают в браузере. К примеру, мы не можем переключаться между просмотром фильма и общением в соцсети с помощью клавиш Alt+Tab, отсутствует удобный способ открыть почтовый сервис в отдельном окне, не запуская браузер с другими вкладками. Закрепить любимые сервисы на панели рядом с «Пуском» — тоже не просто.

В новой версии «Яндекс.Браузера» разработчики устранили эти недочеты.

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

Самой главной особенностью обновления стала возможность запуска таких приложений в отдельных окнах, как настоящие программы. У этих окон минималистичный интерфейс, а переключаться между ними удобно с помощью Alt+Tab.

Чтобы превратить сайт в приложение, кликните по кнопке, которая появляется в адресной строке. Она доступна как для сайтов, использующих технологию Progressive Web Application, так и для других популярных ресурсов, поддержку которых мы разработчики «Яндекса» добавили собственными силами.

Открыв в настройках «Яндекс.Браузера» раздел «Дополнения», вы увидите несколько расширений от команды «Яндекса» и других разработчиков. Вы можете включить доступные аддоны и настроить их прямо в этом меню.

Но где искать остальные расширения? Своего каталога у «Яндекса» нет. Зато браузер поддерживает сторонние источники. Все расширения, перечисленные в этой статье, вы сможете скачать и установить из веб-магазинов Opera и Chrome.

1. Save to Pocket

Если вам попадётся интересная статья, но не будет времени сразу прочитать её, просто добавьте текст в Pocket. Один клик для сохранения — и к ней можно будет вернуться в любой подходящий момент.

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

Pocket также можно установить через меню «Дополнения» в настройках «Яндекс.Браузера».

2. LastPass

LastPass избавляет от необходимости запоминать данные для входа в аккаунты. Сервис помнит логины и пароли вместо вас и хранит их в защищённом виде на сервере. Более того, LastPass автоматически вводит пароли, когда это нужно.

Можно менять браузеры и устройства — необходимые данные будут всегда оставаться под рукой благодаря синхронизации. Вам нужно помнить только пароль от аккаунта LastPass.

LastPass также можно установить через меню «Дополнения» в настройках «Яндекс.Браузера».

3. Lightshot

Lightshot также можно установить через меню «Дополнения» в настройках «Яндекс.Браузера».

4. AdBlock

Самое популярное расширение для блокировки рекламы в браузерах. AdBlock борется с назойливыми объявлениями и скриптами, которые следят за вашими действиями в интернете.

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

5. Dark Reader

Dark Reader помогает снизить нагрузку на глаза в ночное время суток. Работает расширение просто: заменяет светлые элементы веб-страниц тёмными. Таким образом браузер переходит в ночной режим работы.

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

6. OneTab

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

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

7. Browsec VPN

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

Browsec может запускать VPN только для выбранных сайтов, а в бесплатном режиме обходит многих конкурентов по скорости. Но если захотите, чтобы расширение работало ещё быстрее, можете оформить подписку — от 3,33 доллара в месяц.

8. Skyload

Ультимативное расширение для загрузки музыки и видео с различных интернет-площадок: «ВКонтакте», «Одноклассников», YouTube, «Яндекс.Музыки» и не только. Вы можете скачивать файлы на открытой странице по одному, все сразу или группами, отмечая только нужные песни или ролики. Skyload позволяет выбирать качество видеофайлов, а также сохраняет теги, названия и обложки песен.

9. Checker Plus for Gmail

Если вы активно пользуетесь популярнейшим почтовым сервисом Gmail, обязательно попробуйте это расширение. Checker Plus уведомляет о получении новых писем и позволяет открывать их или отмечать прочитанными, не переходя на новую вкладку.

10. OneNote Web Clipper

Это расширение от Microsoft поможет сохранить всю важную информацию, которую вы найдёте в Сети, в облачном блокноте OneNote. Web Clipper позволяет быстро копировать ссылки, изображения, выделенные фрагменты страниц или их текстовое содержимое и сохранять всё это в виде отдельных заметок. Доступ к добавленным материалам можно получить на сайте или в приложениях OneNote на любом устройстве.

Плагины, расширения, дополнения — это мини-программы, которые добавляют в обозреватель новые функции/инструменты, вроде VPN-сервиса, блокировщика рекламы или антивируса. Далее о том, как найти расширения в Яндекс Браузер, чтобы их отключить, удалить или получать к ним доступ с помощью горячих клавиш.

Где находятся расширения

К плагинам получают доступ 3-мя способами :

Через дополнительное меню.
Воспользовавшись поисковой строкой.
Проследовав в одну из папок обозревателя.

Активные плагины, установленные после инсталляции Yandex.Browser, отображаются в правом верхнем углу.

Дополнительное меню

Оптимальный вариант, как в Яндекс Браузере зайти в расширения :

Что пользователь может сделать в этом окне :

Устанавливают плагины с официального магазина Chrome или каталога Opera.

Строка поиска

После запуска обозревателя :

При вводе в строку поиска «browser», появляется список доступных команд: переход в режим с экспериментальными настройками, параметрами программы и подобного.

Папка с дополнениями

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

В папе Default находятся директивы Extensions Rules и Extensions State, где собраны настройки дополнений, заданные пользователем.

Расширения в мобильной версии браузера

Плагины также реализованы в мобильной версии Yandex Browser. Как к ним попасть :

Альтернативный способ: используйте запрос browser://tune/ в строке поиска.

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

Юзеры могут устанавливать дополнительные расширения из магазина Хром и каталога Опера. Некоторый софт не будет работать из-за отсутствия оптимизации для мобильной версии обозревателя.

Быстрый доступ к плагинам

Чтобы оперативно включать или отключать плагин, привяжите его к комбинации горячих клавиш :

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

Почему плагины Яндекс совместимы с Chrome и Opera

В основе всех 3 браузеров лежит движок Blink, что обеспечивает частичную обратную совместимость. Почему это преимущество :

Не нужно создавать собственный, незнакомый программистам движок.
В январе 2021 года Google Chrome пользуется 63% пользователей в мире, отчего разработчики, в первую очередь, пишут расширения под Хром.
Вместо создания отдельной площадки, пользователям доступно 2 онлайн-каталога расширений с разделений по категориям, оценкам, количеству скачиваний.

Отличием мобильной версии Яндекс.Браузера от Хрома, стало наличие у первой поддержки полноценных плагинов, пусть и в бета-режиме.

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