Chrome запуск приложений по ссылке

Обновлено: 07.07.2024

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

Проблема случается в основном с такими веб-сайтами, как YouTube, Reddit, Amazon, Facebook и т. д. Когда пользователь нажимает ссылку, скажем, короткую ссылку YouTube в Chrome, он ожидает, что браузер откроет веб-сайт YouTube напрямую. Но Chrome автоматически перенаправляет их в приложение YouTube.

Вы столкнулись с той же проблемой? Вот 3 способа заставить Chrome открывать веб-сайты, а не приложение.

1. Отключите мгновенные приложения

Чтобы остановить это поведение и позволить Chrome открывать веб-сайты вместо этого, вам необходимо отключить функцию мгновенных приложений на вашем телефоне Android. Это можно сделать разными способами. Мы рассмотрели их все. Узнайте, какой из них позволяет отключать приложения с мгновенным запуском.

Способ 1

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

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

Шаг 2: На некоторых телефонах вы найдете приложения по умолчанию напрямую, когда нажмете на «Приложения». Для других вам нужно будет нажать на Дополнительно> Приложения по умолчанию.

На телефонах Samsung перейдите в «Настройки»> «Приложения». Нажмите на трехточечный значок и выберите Приложения по умолчанию. На телефонах Mi перейдите в Настройки> Приложения> Управление приложениями. Затем нажмите на трехточечный значок вверху и выберите Приложения по умолчанию.

Шаг 3: Нажмите на Открытие ссылок на экране приложений по умолчанию. Здесь вы увидите приложения с мгновенным запуском. Выключите переключатель рядом с ним.

Способ 2

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

Шаг 1: Откройте Настройки на своем телефоне Android и перейдите в Google.

Шаг 2: Нажмите на Сервисы учетной записи, а затем на Google Play Instant.

Шаг 3: Отключите переключатель рядом с Обновить веб-ссылки. Перезагрузите телефон.

Способ 3

Запустите Google Play Store на своем телефоне и откройте левую боковую панель. Нажмите на Настройки. Нажмите на Google Play Instant и выключите переключатель для обновления веб-ссылок на следующем экране.

2. Изменить поведение открытия ссылок.

Телефоны Android позволяют вам выбирать приложения по умолчанию для различных служб. То же самое и с веб-сайтами. Если Chrome найдет поддерживаемые ссылки для любого приложения, он откроет этот веб-сайт в приложении. Это поведение можно изменить в настройках.

Вам нужно будет изменить его индивидуально для приложений. Мы будем использовать YouTube в качестве примера. Вы также можете сделать это двумя способами.

Способ 1

Вам необходимо выполнить те же шаги, которые мы упоминали в способе 1 первого исправления. Это открытая настройка приложений по умолчанию. Для этого перейдите в Настройки> Приложения> Приложения по умолчанию. Либо нажмите на трехточечный значок на экране «Настройки»> «Приложения» и выберите «Приложения по умолчанию».

Нажмите на Открытие ссылок. В разделе «Установленные приложения» прокрутите вниз и коснитесь YouTube.

Нажмите на Открыть поддерживаемые ссылки. В зависимости от ваших предпочтений выберите «Спрашивать каждый раз» или «Не разрешать приложению открывать ссылки». Если вы выберете «Спрашивать» каждый раз, когда вы нажимаете ссылку YouTube, ваш телефон будет спрашивать, следует ли открывать ее в приложении YouTube или в установленных браузерах.

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

Способ 2

Перейдите в Настройки> Приложения. Откройте необходимое приложение. Допустим, YouTube. Ищите Открыть по умолчанию. Нажмите на него.

Нажмите на Очистить по умолчанию, если он активен. Затем перейдите в раздел «Открывать поддерживаемые ссылки» и выберите «Спрашивать каждый раз» или «Не разрешать приложению открывать ссылки».

3. Сбросить настройки приложения.

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

Чтобы сбросить настройки приложения, перейдите в «Настройки»> «Система»> «Сбросить параметры». Нажмите на Сбросить настройки приложения. Или перейдите в Настройки> Приложения. Нажмите на трехточечный значок и выберите «Сбросить настройки приложения».

Chrome все еще открывает приложения

Если Chrome продолжает открывать приложения, вам следует воспользоваться обходными путями, чтобы открыть ссылку в браузере. Сначала скопируйте ссылку и откройте ее в режиме инкогнито Chrome. Это откроет веб-сайт вместо приложения.

Вы также можете включить в Chrome функцию запроса сайта для настольных компьютеров. Для этого нажмите на трехточечный значок в Chrome и включите «Запросить сайт на рабочем столе». Надеемся, вы сможете открыть нужную ссылку в браузере.

Следующий:

Знаете ли вы, что в Chrome на Android можно группировать вкладки? Узнайте, как использовать функцию группировки вкладок в Chrome, перейдя по следующей ссылке.

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

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

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

Зачем создавать из сайта приложение

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

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

  • Приложение из сайта – это то, что нужно для хорошего ресурса. Когда пользователь читает что-либо на странице браузера, то он может спокойно перемещаться между вкладками. В приложении такого не будет – таким образом, посетитель с большей вероятностью останется на ресурсе на долгое время.
  • Мобильные приложения позволяют использовать такие функции, как push-уведомления, повторяющиеся подписки и т.д.
  • Не стоит забывать и том, что миллионы пользователей ежедневно посещают Google Play и AppStore. Если там будет лежать ваше веб-приложение, то посещаемость сайта может заметно вырасти.

Что для этого нужно?

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

Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.

Лучшие сервисы для создания приложения из сайта

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

Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.

Tadapp Native

Tadapp Native сервис для создания приложения из сайта

Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.

Особенности:

  • возможность подключения бесплатных push-рассылок;
  • личный кабинет позволяет управлять сразу несколькими приложениями;
  • доступна возможность загрузить собственный экран загрузки приложения, иконки;
  • есть техподдержка – скорость ответа составляет около 2 часов.

Стоимость: от 890 рублей

Ссылка на официальную страницу: Tadapp Native

Appmaker

Appmaker сервис для создания приложения из сайта

Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.

Особенности:

  • поддерживает более 2000 различных плагинов;
  • работа с WordPress и WooCommerce;
  • пробный период;
  • круглосуточная поддержка.

Стоимость: от $9.90

Официальная страница: Appmaker

Appverter

Appverter сервис для создания приложения из сайта

Appverter – это профессиональный сервис для тех, кто не хочет тратить свои деньги впустую. Он предлагает пользователям переложить свою проблему на высококвалифицированных специалистов. Всего за $50 можно получить полноценное Android-приложение из сайта; для iOS эта цена возрастает до $100.

Особенности:

  • быстрая разработка за 1 день;
  • уникальное приложение – никаких шаблонов;
  • консультация и поддержка входят в стоимость;
  • есть тариф со 100% гарантией публикации;
  • некоторые тарифные планы включают пункт «Публикация под ключ».

Стоимость: от $50

Официальная страница: Appverter

AppPresser: плагин для WordPress

AppPresser сервис для создания приложения из сайта на WordPress

AppPresser – это сервис, позволяющий создавать мобильные приложения для Android и iOS с использованием собственного компоновщика. Хотя сам плагин и является бесплатным, тарифные планы сервиса начинаются от $19 в месяц. Для работы с ним не нужны особые знания в программировании. Если вы хорошо владеете WordPress, то с данным инструментом не возникнет никаких проблем.

Особенности:

  • возможность создавать приложения из любого сайта на WordPress;
  • работает как конструктор: масса различных настроек;
  • на официальном сайте есть документация на английском языке.

Стоимость: от $19

Официальная страница: AppPresser

MobiLoud: плагин для WordPress

MobiLoud сервис для создания приложения из сайта на WordPress

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

Особенности:

  • 100% синхронизация приложения с сайтом;
  • возможность создать приложение менее чем за сутки;
  • приложение от MobiLoud часто монетизируются;
  • есть бесплатная демоверсия;
  • отличная кастомизация.

Стоимость: от $200

Официальная страница: Mobiloud

Создаем приложение из сайта

Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.

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

  1. Переходим на официальную страницу и на главной выбираем «Get Started for Free».
  2. На отобразившейся странице нам предлагают ввести URL веб-сайта на WooCommerce. Если у вас его нет, то просто введите любой другой адрес – это требуется, чтобы перейти на нужную нам страницу.
  3. Выбираем, на основе чего будет создано приложение. Если сайт не на WordPress или WooCommerce, то жмем «Create web app».
  4. Вам будет предложено зарегистрировать аккаунт – заполняем все нужные поля и идем дальше. В новом окне вводим адрес сайта, который нужно преобразовать, а также указываем свою электронную почту. Затем жмем «Proceed».
  5. В результате перед нами отобразится окно конфигурации. Процесс создания приложения может занять некоторое время – все зависит от веса сайта.

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

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

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

SimilarWeb показывает 1,141 млрд посещений главной страницы за август. Если хотя бы 10% из них приходится на десктопный браузер и целевое действие, то это 141 млн открытых вкладок в месяц. На возврат и закрытие вкладки уходит не меньше секунды. Получается, мы собираемся сэкономить 31,5 тысячи человеко-часов в месяц.

Приготовим минимальный стартовый набор.

1. Создайте папку проекта. Назовите ее именем вашего расширения.

2. Создайте javascript-файл, в котором будет реализована логика приложения. Я назвал его app.js.

3. Добавьте в созданный файл команду для тестирования: вывод строки в консоль или в диалоговое окно браузера.

4. Создайте manifest.json – служебный файл, который должен быть в каждом расширении.

Обязательные параметры, должны быть в каждом manifest.json:

manifest_version – целое число, обозначает версию формата манифеста. Для современных версий браузера значение равно 2;

name – название расширения, до 45 символов. К названию стоит подойти ответственно – оно отображается в магазине, при установке и на странице управления расширениями (chrome://extensions);

description – простой текст, до 132 символов. Отображается в магазине и на странице управления расширениями;

icons – список из иконок расширения;

5. Подготовьте иконку в формате png размером 128х128 пикселей и положите ее в папку проекта. Эта версия отображается при установке и в магазине расширений. Рекомендуют также добавить иконку размером 48х48 пикселей – она отображается на странице управления расширениями. И можно добавить версию 16х16 пикселей, которая будет использоваться как фавикон.

К этому моменту в нашем проекте есть иконка расширения, manifest.json со служебной информацией и app.js, в котором позже появится код приложения.

Примечание: расширение может состоять из нескольких JS-файлов, HTML-верстки и CSS-стилей.

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

1. Войдите в свой аккаунт в браузере Chrome.

2. Перейдете на страницу chrome://extensions.

3. В правом верхнем углу включите Режим разработчика.

4. Нажмите Загрузить распакованное расширение и выберите папку проекта. В результате вы увидите похожую картинку:

5. В новой вкладке браузера откройте любую веб-страницу. Отлично, работает!

Теперь мы готовы добавить полезное действие.

Кусочек кода в этой рамке доставляет столько неудобств. Избавимся от него!

Получается, с помощью javascript нам нужно выбрать две ссылки и удалить этот атрибут.

1. В app.js сохраните ссылки в переменные:

Здесь мы выбираем элементы по их идентификатору (id).

2. Если такие ссылки найдены, удалите у них атрибут target.

Похоже, этого кода достаточно для решения проблемы.

Заодно давайте пропишем в manifest.json правило, по которому расширение будет запускать наш скрипт только на целевой странице. Для этого в параметре content_scripts в ключе matches пропишем конкретный URL:

Кстати, после обновления расширения стоит обновить версию и в manifest.json:

После внесения правок важно обновить расширение в браузере. Для этого нажмите на стрелку на странице управления расширениями (chrome://extensions/).

Готово! Проверим расширение в боевых условиях.

Этот шаг необязательный. Во-первых, возможно, вы не хотите делать доступным для всех свое расширение. А во-вторых, возможно, не захотите платить за это $5. Такой регистрационный сбор должен оплатить разработчик Chrome Web Store.

Это всё. Остается ждать результат проверки, которая может занять несколько недель.

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

Надеюсь, эта инструкция была вам полезной. Буду рад обсудить детали в комментариях.

Мы тут собрали умную камеру для наблюдения за котиками. Хотите научим?

И всё это ради 5 (3) строк кода?

И всё это ради 5 (3) строк кода?

Всё это ради решения проблемы. В данном случае получилось решить её с помощью нескольких строк кода.

один раз установить расширение Tampermonkey

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

мне хотелось самому написать расширение

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

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

У меня было несколько идей, в итоге победила та, что связана с реальной «болью» и не требует долгих объяснений, чтобы не раздувать инструкцию.

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

Идеальным вариантом для демонстрации, как мне кажется, было бы расширение для мониторинга конкретной информации (входящие e-mail, доступные билеты, баланс на счёте, начало трансляций и так далее) с информативными image/text-уведомлениями.

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

Ага, примерно так я первое расширение для Pyrus написал в 2013 году )))

UPD. Расширение опубликовано в Chrome Web Store. На почту никакое уведомление не приходило, поэтому сложно сказать, сколько времени заняла проверка.

3 и 4 декабря поговорим о трендах в индустрии, технологиях и научном мире.


Chrome может открывать внешние приложения в Windows 10, если это необходимо. Типичным примером такого поведения в Chrome является случай, когда он встречает ссылку mailto: или номер телефона или Skype ID. Когда вы нажимаете на такие ссылки, вы видите всплывающее окно с запросом подтверждения того, хотите ли вы разрешить Chrome открывать приложение, которое он пытается открыть. В этом всплывающем окне была опция «Всегда открывать ссылки этого типа в связанном приложении», которая позволяла вам постоянно предоставлять Chrome разрешение на открытие внешнего приложения. Кажется, он был удален. Вот как вы можете вернуть его обратно в Windows 10.


Восстановить «Всегда открывать ссылки этого типа в связанном приложении»

Чтобы вернуть параметр «Всегда открывать ссылки этого типа в связанном приложении», мы собираемся чтобы редактировать реестр. Нажмите сочетание клавиш Win + R, чтобы открыть окно запуска. Введите «regedit» и нажмите клавишу «Ввод». Откроется редактор реестра .

Перейдите к следующему ключу.

Возможно, ключ Google не существует. В этом случае щелкните правой кнопкой мыши ключ Policies и выберите NewKey из контекстного меню. Назовите это Google. Затем щелкните правой кнопкой мыши только что созданный ключ Google и снова выберите NewKey в контекстном меню. На этот раз назовите его Chrome.

После того, как вы настроили ключи, вам нужно щелкнуть правой кнопкой мыши клавишу Chrome и выбрать NewDWORD (32-bit) Value из контекстного меню. Назовите это значение ExternalProtocolDialogShowAlwaysOpenCheckbox и установите его значение равным 1.


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

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

Этот параметр можно отменить / сбросить, удалив файлы cookie и данные сайта. Он также будет сброшен, если вы измените приложение по умолчанию, которое обрабатывает запрос определенного типа, например, если вы измените почтовый клиент по умолчанию с Outlook на Thunderbird, Chrome запросит разрешение на его открытие при следующем щелчке по ссылке mailto.

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

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

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

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

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

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

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

В этой статье

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

Манифест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверка

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

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

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