Игра Яндекс Практикума
Игра Яндекс Практикума
Игра Яндекс Практикума

Создаем приложение Chrome для своего сайта меньше чем за 5 минут

Отредактировано

16К открытий16К показов
Создаем приложение Chrome для своего сайта меньше чем за 5 минут

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

Нам понадобятся:

  • Google Chrome;
  • ваш сайт или блог, уже добавленный в Google Webmaster Tools и прошедший проверку;
  • иконка размером 128х128 пикселей;
  • скриншот вашего сайта размером  1280×800 или 640×400 пикселей;
  • скриншот приложения размером 440×280 пикселей;
  • ID Google Analytics (в формате UA-XXXXXX-YY) — по желанию;
  • карточка с $5 на счету.

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

Начнем мы с создания файла manifest.json. В этом примере приведен манифест сайта NetRival. Откройте любой текстовый редактор, скопируйте в него этот код и измените под свое приложение:

			{
	 "name": "NetRival - Technology Blog",
	 "short_name": "NetRival",
	 "description": "NetRival is a Blog Focused on Personal Technology, How-to Tutorials, Gadgets and Telecom",
	 "version": "0.1",
	 "manifest_version": 2,
	 "icons": {
		 "128": "icon_128.png"
		 },
		 "app": {
		 "urls": [
			 "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 ],
		 "launch": {
			 "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app"
			 }
		 }
 }
		

Как минимум вам понадобится изменить поля "name", "short_name", а также описания и ссылки. Иконку своего приложения переименуйте в icon_128.png. Создайте новую директорию, положите туда manifest.json и саму иконку. Теперь запакуйте директорию в zip-файл. Позже он вам еще понадобится.

Загружаем приложение в Google Chrome

Откройте браузер, перейдите по адресу chrome://extensions/ и убедитесь, что у вас поставлена галочка «Режим разработчика». Она расположена на странице справа вверху (это видно на картинке). Затем нажмите на кнопку «Загрузить распакованные расширения» и выберите папку, где расположены manifest.json и иконка вашего расширения. zip-архив загружать не нужно, Google Chrome автоматически загрузит файл manifest.json из указанной директории, в данном случае — из E:\NetRival_Chrome_App (это выделено на скриншоте).

Создаем приложение Chrome для своего сайта меньше чем за 5 минут 1

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

Плагин уже работает. Чтобы в этом убедиться, пройдите по адресу chrome://apps/, и вы увидите что-то подобное скриншоту (если нажать на иконку, вы попадете на ваш сайт или блог).

Создаем приложение Chrome для своего сайта меньше чем за 5 минут 2

Размещаем расширение в официальном каталоге

Теперь можно размещать наше расширение в Google Chrome Store, где его сможет скачать любой желающий. Нужно загрузить manifest.json и иконку в zip-файл (мы уже это сделали). Но сначала нужно заплатить 5 долларов пошлины за регистрацию, которая даст вам доступ к консоли разработчика Google Chrome (на эти $5 вы можете разместить в магазине 20 любых приложений, расширений или тем для Chrome).

Перейдите на адрес https://chrome.google.com/webstore/developer/dashboard и уплатите 5 долларов. После оплаты нажмите на кнопку «Добавить новый продукт» и выберите zip-файл с расширением. После этого понадобится заполнить небольшую анкету приложения и добавить скриншоты.

Создаем приложение Chrome для своего сайта меньше чем за 5 минут 3

Чтобы отслеживать трафик с приложения, можно использовать Google Analytics — просто укажите ваш ID. Лучше использовать не тот же GA ID, что для вашего сайта, а отдельный. Теперь нажмите на кнопку предпросмотра и посмотрите, как будет выглядеть ваше приложение в магазине приложений. Осталось лишь нажать на кнопку публикации — и миссия выполнена.

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

Следите за новыми постами
Следите за новыми постами по любимым темам
16К открытий16К показов