Как создавать и публиковать приложения и расширения Chrome. Приложения Google Chrome Описание приложений в гугле хроме

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://apps/ , и вы увидите что-то подобное скриншоту (если нажать на иконку, вы попадете на ваш сайт или блог).

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

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

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

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

Чтобы этого больше не происходило, откройте страницу служебных настроек мобильного Chrome, находящуюся по адресу chrome://flags . Далее нужно найти опцию «Регулировка прокрутки» и установить её в положение «Включено».

2. Экономия трафика

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

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

3. Открытие десктопных вкладок на мобильном

Если вы используете браузер Chrome на всех своих устройствах, то, вероятно, знаете, что данные между ними синхронизируются. Поэтому вовсе не обязательно сохранять страницу в закладках, если вы начали её чтение за компьютером и вам вдруг понадобилось куда-либо отлучиться. Можно просто открыть по дороге в мобильном браузере раздел «Недавние вкладки», где вы найдёте ссылки на все страницы, просмотренные вами за последнее время, независимо от используемого компьютера.

4. Сохранение страниц для чтения в офлайне

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

Включить эту функцию можно на странице экспериментальных настроек Google Chrome. Введите в адресную строку chrome://flags , а затем найдите и активируйте параметр chrome://flags/#offline-bookmarks .

5. Использование подсказок на странице

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

А какие функции мобильной версии Google Chrome нравятся больше всего вам?

2. Экономия трафика

3. Открытие десктопных вкладок на мобильном

4. Сохранение страниц для чтения в офлайне

5. Использование подсказок на странице

А какие функции мобильной версии Google Chrome нравятся больше всего вам?

На Хабре публиковалось немало статей о создании расширений для Chrome, но тема разработки Chrome приложений (они же Chrome apps) затрагивалась заметно реже. В последнее время она стала актуальнее из-за распространения устройств на ChromeOS. К тому же инфраструктура для создания приложений для Chrome стала более стабильной и удобной для использования. В этой статье я постараюсь ответить на основные вопросы: зачем вообще писать приложения для Chrome, чем они отличаются от расширений, веб-сервисов, десктопных приложений и т.п., а также как они разрабатываются, и какие на них накладываются ограничения. Если эта тема вызовет интерес, у статьи будут продолжения, затрагивающие более специальные вопросы.

Зачем

Одну и ту же функциональность можно реализовать с помощью совершенно разных технологий: можно написать программу для Windows, сделать web-сервис, мобильное приложение для Android и/или iOS и т.д. Что может подтолкнуть автора сделать выбор в пользу приложения для Chrome?

Работа на ChromeOS. На данный момент Chrome app - основной способ донести вашу программу до пользователей Chromebook"ов . Стоит ли оно того? Chromebook"ов пока меньше, чем, скажем, компьютеров под Windows, но тенденция меняется. В прошлом году в США было продано в 5 раз больше Chromebook"ов чем Macbook"ов
Приложения Chrome без каких-либо дополнительных усилий работают на Windows, Linux и OS X. Конечно, есть множество других способов сделать приложение переносимым, но большинство из них оказываются заметно более затратными.
С недавних пор появилась возможность портировать Chrome apps на Android и iOS .
На большинстве систем приложения Chrome выглядят для пользователя как обычные программы. Они запускаются из меню «Пуск», открывают обычные окна без браузерных контролов, могут использоваться в качестве программ по умолчанию для открытия файлов, и в остальном ведут себя
как полноправные программы.

Packaged apps и hosted apps

Все видели в списке установленных по умолчанию в Chrome приложений иконки Поиска, Gmail, Google Диска. Если нажать на одну из них, ничего похожего на приложение не открывается. Вместо этого, пользователь просто переводится на страничку соответствующего сервиса.

Дело в том, что существует два принципиально разных типа приложений: hosted app и packaged app. К сожалению, устоявшихся русских терминов для них нет. Поиск, Gmail и т. д. - относятся к hosted. Такое приложение состоит из файла manifest.json с URL и настройками безопасности, и иконки. Фактически, hosted app - это специальная закладка на онлайн-сервис.

В отличие от hosted, в случае packaged app, все файлы, необходимые для работы приложения хранятся на компьютере пользователя. Такие приложения, как правило, могут лучше работать offline, могут управлять своими окнами, и вообще имеют доступ к большему количеству программных интерфейсов Chrome.

В дальнейшем речь пойдёт о packaged apps.

Приложения и расширения

С точки зрения пользователя, расширения и приложения выполняют абсолютно разные функции: расширение изменяет то, как он пользуется браузером, а приложение выполняет какую-то отдельную от браузера задачу. Расширение меняет содержание страниц и, возможно, добавляет пару кнопок, а приложение как правило работает в своём собственном окне.

При этом, расширения и приложения изнутри устроены очень похоже. И те, и другие устанавливаются из Интернет-магазина Chrome , представляют собой.crx файлы, являющиеся zip-архивами. Свойства расширения/приложения описываются в файле manifest.json , а UI в них написан на HTML5. Многие программные интерфейсы Chrome доступны как расширениям, так и приложениям.

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

управлять своими окнами,
напрямую работать с файлами на компьютере пользователя,
назначаться программами для открытия операционной системой тех или иных типов файлов,
открывать TCP и UDP соединения (этим, к примеру пользуется SSH-клиент для Chrome),
работать с USB.

Особенности разработки

Я уже упоминал, что с точки зрения пользователя приложения Chrome мало отличаются от обычных программ. В то же время с точки зрения программиста они устроены совсем по-разному. Какие-то операции оказываются проще, какие-то - сложнее.

Многие интерфейсы, использующиеся приложениями, являются общепринятыми стандартами и хорошо известны всем веб-разработчикам. Для UI используются HTML и CSS, для работы с HTTP - XMLHTTPRequest и т.д.

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

Ещё одна особенность Chrome - управление безопасностью. В Chrome оно устроено иначе, чем в классических операционных системах и больше напоминает систему безопасности в Android. К добавлению програмных интерфейсов разработчики Chrome всегда подходили консервативно. При разработке системы легче со временем ослабить ограничения безопасности, чем сделать их более строгими. В результате, например, у приложений отсутствует неограниченный доступ к файловой системе. Главным образом, они работают с файлами, либо принадлежащими приложению, либо явно открытыми пользователем.

Чем можно пользоваться кроме HTML + JavaScript

Основным языком программирования для Chrome является, естественно, JavaScript. Но это не значит, что весь ваш код необходимо переписывать на нём. Есть несколько решений, позволяющих использовать в Chrome приложении код на других языках программирования. Среди них:

Native Client. Код компилируется таким образом, чтобы позволить как его выполнение процессором, так и верификацию браузером. Код NaCl использует для общения с внешним миром достаточно богатый набор интерфейсов Pepper API , включающий, в частности, работу с файловой системой, OpenGL и звук.
Emscripten Если NaCl вам не подходит, можно скомпилировать свой код из C++ непосредственно в JavaScript. На современных браузерах получающийся JavaScript работает лишь в несколько раз медленнее, чем если бы он компилировался в машинный код. Из плюсов - совместимость со всеми интерфейсами, доступными из JavaScript.

Пример

В заключении приведу пример приложения, над которым я сам работал (и
работаю). Это текстовый редактор Text . Код редактора доступен на гитхабе . Для собственно редактирования используется библиотека CodeMirror . Приложение реализует работу с файлами, окнами, сохранений настроек и прочие необходимые функции.

Эта статья предназначена для администраторов Chrome Enterprise и разработчиков, имеющих опыт создания пакетов приложений Chrome и их публикации.

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

Подготовка

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

Шаг 1. Создайте приложение или расширение

Ниже в качестве примера используется приложение-закладка. Инструкции по созданию более сложных приложений и расширений Chrome приведены в руководстве по началу работы .

Создайте на компьютере папку, в которой будут храниться файлы приложения или расширения. Присвойте ей имя приложения.
Создайте файл манифеста.
1. Создайте в текстовом редакторе файл JavaScript ® Object Notation (JSON). Посмотрите пример файла JSON для приложения-закладки.
2. Проверьте, правильно ли отформатирован код в файле JSON, с помощью специального инструмента, например JSONLint .
Поместите файл manifest.json в папку приложения или расширения.
Создайте логотип.
1. Изображение должно иметь размер 128 х 128 пикселей.
2. Сохраните файл логотипа под названием 128.png в папке приложения.

Шаг 2. Протестируйте приложение или расширение

Разработчики могут тестировать свои приложения и расширения в браузере Chrome или на устройствах Chrome OS.

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

Шаг 3. Создайте коллекцию приложений (необязательно)

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

Шаг 4. Опубликуйте приложение или расширение в Интернет-магазине Chrome

Разработчик может сделать приложение или расширение общедоступным либо ограничить доступ к нему. При публикации в Интернет-магазине Chrome можно выбрать один из трех вариантов.

Общедоступное : кто угодно может найти и установить приложение.
Доступ по ссылке : установить приложение или расширение можно только по ссылке. Оно не включается в результаты поиска в Интернет-магазине Chrome. Ссылку можно отправить пользователям как в домене организации, так и за его пределами.
Частное : найти и установить приложение или расширение могут только пользователи в вашем домене. Кроме этого, можно предоставить доступ к продукту только доверенным тестировщикам, чьи имена указаны в панели инструментов разработчика.

Чтобы добавить приложение или расширение в Интернет-магазин Chrome, создайте ZIP-архив соответствующей папки, а затем опубликуйте продукт .

Шаг 5. Настройте правила работы с приложением или расширением

В панели администратора Google можно управлять использованием приложений и расширений на устройствах Chrome и в браузере Chrome на компьютерах Windows, Mac и Linux в вашей организации. Правила Chrome можно настраивать