Сайт как приложение chrome
В этой инструкции я покажу, как создать расширение для браузера 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. На почту никакое уведомление не приходило, поэтому сложно сказать, сколько времени заняла проверка.
Как я стал резидентом ОЭЗ «Технополис Москва» — опыт компании «ХайТэк»Опытом работы на территории особой экономической зоны столицы делится генеральный директор НТЦ «ХайТэк» Алексей Алясев.
Google Chrome серьезно упрощает многие вещи, например, создание собственных приложений. Да, подготовить свое приложение к публикации можно за 5 минут, а то и меньше.
Создаем приложение
Начнем мы с создания файла manifest.json. В этом примере приведен манифест сайта NetRival. Откройте любой текстовый редактор, скопируйте в него этот код и измените под свое приложение:
Как минимум вам понадобится изменить поля "name" , "short_name" , а также описания и ссылки. Иконку своего приложения переименуйте в icon_128.jpg . Создайте новую директорию, положите туда manifest.json и саму иконку. Теперь запакуйте директорию в zip-файл. Позже он вам еще понадобится.
Загружаем приложение в Google Chrome
Откройте браузер, перейдите по адресу chrome://extensions/ и убедитесь, что у вас поставлена галочка «Режим разработчика». Она расположена на странице справа вверху (это видно на картинке). Затем нажмите на кнопку «Загрузить распакованные расширения» и выберите папку, где расположены manifest.json и иконка вашего расширения. zip-архив загружать не нужно, Google Chrome автоматически загрузит файл manifest.json из указанной директории, в данном случае — из E:\NetRival_Chrome_App (это выделено на скриншоте).
Проверяем созданное расширение
Плагин уже работает. Чтобы в этом убедиться, пройдите по адресу chrome://apps/, и вы увидите что-то подобное скриншоту (если нажать на иконку, вы попадете на ваш сайт или блог).
Размещаем расширение в официальном каталоге
Теперь можно размещать наше расширение в Google Chrome Store, где его сможет скачать любой желающий. Нужно загрузить manifest.json и иконку в zip-файл (мы уже это сделали). Но сначала нужно заплатить 5 долларов пошлины за регистрацию, которая даст вам доступ к консоли разработчика Google Chrome (на эти $5 вы можете разместить в магазине 20 любых приложений, расширений или тем для Chrome).
Чтобы отслеживать трафик с приложения, можно использовать Google Analytics — просто укажите ваш ID. Лучше использовать не тот же GA ID, что для вашего сайта, а отдельный. Теперь нажмите на кнопку предпросмотра и посмотрите, как будет выглядеть ваше приложение в магазине приложений. Осталось лишь нажать на кнопку публикации — и миссия выполнена.
Если у вас возникнут какие-то вопросы, вы можете собственными глазами посмотреть демо приложения и zip-архив с ним. Удачи!
С преимуществами самого популярного браузера Google Chrome очень хорошо знакомы, собственно, те, кто его использует – это быстрый и функциональный браузер. С момента перехода на Google Chrome у многих исчезают проблемы, которые досаждали при использовании других браузеров. В частности, речь идёт о сложностях с воспроизведением мультимедиа из-за проблем с Adobe Flash Player. А сервис синхронизации закладок и настроек Google Chrome позволит в считанные секунды привести браузер в рабочее состояние при переходе на другое компьютерное устройство или переустановленную операционную систему. Что уже и говорить о магазине расширений для Google Chrome? Равного по объёму контента не существует ни для одного другого браузера.
Но ниже речь пойдёт не об известных преимуществах браузера Google Chrome , а, наоборот, об одной его функции, которая редко используется пользователями по банальной причине – она довольно хорошенько спрятана в настройках браузера. На базе интерфейса Google Chrome любой сайт – информационные площадки, веб-сервисы, видеохостинги, социальные сети, любой другой тип интернет-ресурсов – можно организовать в отдельное минималистичное веб-приложение, которое будет запускаться с помощью ярлыка на рабочем столе, в панели задач или на стартовом экране Windows 8/8.1.
Чтобы сайт сделать отдельным веб-приложением, необходимо, находясь на нём, вызвать меню Google Chrome, выбрать «Дополнительные инструменты», а затем – «Создать ярлыки приложения», в более новых версиях браузера «Добавить на рабочий стол сайт» и ставим галочку «Открывать в отдельном окне».
Далее увидим небольшое окошко, предлагающее поместить ярлык будущего приложения на рабочий стол и закрепить на панели задач. Для создания веб-приложения жмём, следовательно, кнопку «Создать».
Пользователи Windows 8/8.1 ярлык созданного веб-приложения могут разместить на стартовом экране системы. Для этого необходимо воспользоваться стандартной процедурой вынесения ярлыков десктопных программ. Вызываем контекстное меню на нужном ярлыке и выбираем команду закрепления на начальном экране.
Плитка запуска созданного веб-приложения разместится на стартовом экране Windows 8/8.1.
Формат отдельного веб-приложения – удобная вещь для тех сайтов, где практически не требуется инструментарий браузера. Отдельными веб-приложениями на рабочий стол можно вынести медийные порталы, картографические сервисы, сайты, ориентированные на фотоконтент, облачные хранилища , соцсети, отдельные их игры или приложения.
Интернет является источником хранения всей информации и одновременного подключения нескольких устройств и сервисов. Поскольку собственные платформы приложений ограничены ограниченным набором устройств, это требует универсальной платформы приложений и сервисов, которая может работать везде. Платформа веб-приложений является подходящим кандидатом для решения этой проблемы. А с появлением платформы PWA или Progressive Web Apps это делает реализацию этой универсальной платформы действительно простой. Большинство сред операционных систем поддерживают использование веб-страниц с использованием современных веб-браузеров, которые получают поддержку Progressive Web Apps. Сюда также входит веб-браузер Google Chrome .
Запустите и используйте Chrome в режиме приложений
Этот режим приложения позволяет пользователям запускать веб-страницы так, как будто они работают как естественное приложение на компьютерах. Короче говоря, он скрывает все панели инструментов и адресную строку и показывает только тело веб-страницы, которая в конечном итоге является режимом приложения. Эта функция поддерживается движком рендеринга Google Chrome и, следовательно, очень полезна для Progressive Web Apps. Благодаря поддержке API-интерфейсов определения местоположения, речи, микрофона и уведомлений этот режим работает и ведет себя как подлинное приложение.
Как включить режим приложений для определенного веб-сайта
Прежде всего, начните с открытия Google Chrome на своем компьютере. Теперь перейдите на ваш любимый сайт.
Как только вы окажетесь на главной странице нужного вам сайта, нажмите кнопку меню, обозначенную тремя вертикальными точками в верхней правой части окна.
Нажмите Дополнительные инструменты> Создать ярлык.
Вы можете получить подсказку, подтверждающую, хотите ли вы создать ярлык и какое имя вы хотите. Если вы это сделаете, задайте имя, установите флажок Открыть как окно и нажмите Создать.
Теперь введите chrome: // apps в адресную строку и нажмите Enter. Вы окажетесь на панели инструментов приложений, которая поставляется с Google Chrome.
Щелкните правой кнопкой мыши веб-сайт, для которого вы создали ярлык, и убедитесь, что установлен флажок Открыть как окно .
Нажмите на запись на сайте, и он запустится в режиме приложения.
Теперь ваш сайт будет работать в режиме приложения.
Создание ярлыков быстрого запуска для сайтов w для запуска в режиме приложения
Чтобы быстрее запускать эти веб-сайты в режиме приложений без фактического открытия Google Chrome и использования панели мониторинга приложений, вы также можете создать пункт меню «Пуск» и ярлык на рабочем столе.
Для этого откройте Google Chrome и перейдите в chrome: // apps. Нажмите правой кнопкой мыши на ярлык веб-сайта и выберите Создать ярлыки.
Читайте также: