Как стать автором
Поиск
Написать публикацию
Обновить

Chrome App. Создание приложения для chrome (пример)

Время на прочтение2 мин
Количество просмотров10K
Как все прекрасно помнят, на прошедшей IO, Google анонсировал свой Web Store. А для заполнения его представил т.н. web-приложения.
Сегодня речь пойдёт о том, как создать простенькое приложение и подготовится к открытию Web Store.
Для примера будем создавать приложение из ряда Hello World, а именно — калькулятор.
image


Для начала напомню, для того, что бы мы могли использовать web-приложения, мы должны запустить браузер (последнюю DEV-сборку Chrome ) с параметром --enable-apps.
Ну а теперь, собственно, приступим к написанию нашего калькулятора. Как и с расширениями для chrome, нам понадобится файлик manifest.json. У нас он будет выглядеть следующим образом:
{<br> "name": "calc lite",<br> "version": "0.1",<br> "icons": {<br>  "24": "24.png",<br>  "128": "128.png"<br> },<br> "permissions": [<br>  "unlimited_storage",<br>  "notifications"<br> ]<br> "launch": {<br>  "local_path": "index.html"<br> }<br>}<br><br>* This source code was highlighted with Source Code Highlighter.


Где name — название приложения
version — версия для идентификации
icons — в этом параметре мы указываем две иконки, которые будут отображаться у нас в браузере (рядом с табами и ссылкой на запуск)
permissions — параметр, в котором прописываем разрешение на доступ к «фишкам» (об этом чуть позже)
launch — в параметре local_path укажем нашу страницу с разметкой index.html
Содержание файла index.html — это, собственно, и есть, разработанное вами, web-приложение.
После того, как вы посчитаете, что ваше приложение готово — нужно его собрать. Делается это точно так же как и с расширениями: пункт меню расширенияупаковка расширений.
На выходе мы получим файл с расширением *.crx — это и есть наш готовый продукт, осталось только перетянуть его в браузер, ну или запустить по ссылке.
Если всё правильно — то появится следующее окно
image

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

а так же в панели быстрого запуска
image

как мы видели это на IO
image

Запустив приложение, у нас откроется вкладка
image


Ну а вот и сам калькулятор:
image
image
image
image

Помните выше я говорил про доступ к фишкам. Недавно в chrome появились уведомления (спасибо, HTML5), так вот, notification требуют разрешения от пользователя на уведомление, что мы и дали в параметре permissions. И теперь каждый раз при делении на ноль наш калькулятор будет уведомлять нас об этом
image
Тут больше использовалась функция, что называется HTML5 ради HTML5. Однако приятная возможность работы с БД и прочее остаётся за нами!
Больше приложений, хороших и… хороших
Ссылка на calc_lite/ (слово лайт тут ключевое!!)
Теги:
Хабы:
Всего голосов 100: ↑91 и ↓9+82
Комментарии52

Публикации

Ближайшие события