Создание простого Chrome приложения
В прошлом топике я постарался рассказать, что такое Chrome app, и зачем их писать. В этом, как обещал, я опишу процесс создания простого Chrome-приложения. В качестве примера будет использован текстовый редактор. Во-первых, его можно написать очень коротко, так чтобы практически весь код поместился в статью. Во-вторых, в текстовом редакторе будут использоваться несколько характерных для Chrome (и других основанных на Chromium браузеров) программных интерфейсов. В-третьих, да, я уже писал текстовый редактор для Chrome.
Подготовка
Для тестирования приложения, которое вы разрабатываете, необходимо будет добавить его в свой браузер. Для этого на странице chrome://extensions нужно отметить чекбокс «Режим разработчика» («Developer mode»). После этого станет возможным добавить ваше расширение или приложение.
manifest.json
Код любого приложения для Chrome, как и любого расширения, начинается с файла manifest.json. В нём описывается вся мета-информация приложения. Приведу целиком манифест редактора:
Разберём поля, которые тут встретились. С названием и описанием всё ясно. Версия является обязательным полем — Chrome Web Store будет требовать, чтобы она менялась, когда вы загружаете обновление вашего приложения.
Стандарные размеры иконок, требующихся для приложения — 48×48 и 128×128 пикселов. Также в некоторых случаях используется иконка размера 16×16. Кроме этого, другие размеры иконки могут потребоваться в случаях, когда она будет показываться на дисплеях высокого разрешения, как на Chromebook Pixel и новых MacbookPro.
«manifest_version» — версия формата файла manifest. В данный момент следует использовать значение 2.
«offline_enabled» — как можно ожидать, данный флаг установлен для приложений, работающих вне зависимости от наличия доступа к интернету.
Следующая конструкция — главная в файле:
В разделе «permissions» описываются настройки доступа для приложения. В нашем случае добавлена возможность сохранять файлы.
Наконец, в разделе «file_handlers» описаны типы файлов, открываемых приложением. Для разных типов файлов в файловом менеджере Chrome OS могут показывать разные строчки в меню. Например, для одних файлов пункт в меню может выглядеть «Смотреть изображение в СуперПрограмме», а для других — «Редактировать текст в СуперПрограмме».
Назначение Chrome-приложения программой для открытия того или иного типа файлов работает пока только в Chrome OS.
Background page
Весь код, реализующий background page находится в файле js/background.js. Вот он:
Background page работает в фоновом режиме независимо от окон приложения. Большую часть времени он не загружен в память. При запуске системы его код исполняется и может установить обработчики тех или иных событий, самое распространённое из которых — onLaunched. Когда обработчики установлены, background page, как правило, выгружается из памяти и запускается обратно только если произошло одно из событий, на которые он подписан.
Когда пользователь кликает на иконку приложения, или открывает в нём какой-то файл, в background page запускается событие onLaunched. В него передаются параметры вызова, в частности, файл(ы), которые приложение должно открыть. Код entryToLoad = launchData[‘items’][0][‘entry’] сохраняет переданный в приложение файл в локальной переменной, откуда его потом возьмёт код редактора. Событие onLaunched может прийти и тогда, когда приложение уже открыто. В этом случае код в background page может сам решить, открывать ли новое окно, или совершить какие-то действия в уже открытом окне.
index.html
В HTML и CSS файлах, входящих в состав приложений Chrome, нет ничего специфического. Единственная особенность, которую можно отметить — это отсутствие необходимости заботиться о межбраузерной соместимости.
Мы воспользуемся jQuery, чтобы немного упростить код. Для редактирования мы будем использовать поле
. В настоящем редакторе вместо это будет использоваться более интеллектуальный модуль редактирования. Наиболее распространённые варианты: CodeMirror и Ace.
Для полноты картины приведу CSS:
Основной код: работа с файлами
Так как в нашем примере мы для простоты ограничимся минимальным набором возможностей, то основной код редактора будет посвящён почти исключительно работе с файлами. Для этого используется несколько API, часть из которых уже находится на пути к стандартизации W3C. File API и сопутствующие интерфейсы — большая тема, заслуживающая отдельной статьи. В качестве хорошего введения рекомендую эту статью на html5rocks.com.
Задача функции инициализации — добавить обработчики к кнопкам и получить из background page файл для открытия. Контекст background page получается из основного окна асинхронно с помощью chrome.runtime.getBackgroundPage.
Обработчики нажатий на кнопки:
Текущий FileEntry мы будем хранить в глобальной переменной currentEntry.
Единственная специфичная особенность в приведённом выше коде — это метод chrome.fileSystem.chooseEntry. С помощью этого метода открывается окно выбора файлов (своё на каждой системе). Как и все прочие функции для работы с файловой системой, этот метод асинхронный и получает callback для продолжения работы (в нашем случае функции loadEntry и saveToEntry, описанные ниже).
FileReader — отдельный объект, предназначеный для чтения файлов. Он позволяет достаточно гибко управлять процессом чтения, но нам от него в данном случае нужно просто прочесть всё содержимое файла.
Запись файла, как и чтение, не содержит специфичного для Chrome кода:
Прежде чем писать данные, их необходимо привести к виду Blob. Один дополнительный шаг, который понадобится нам при записи — это обрезание файла на случай, если он уже существует и имеет большую длину. Если бы мы были точно уверены, что это новый файл, код записи упростился бы до:
Заключение
На этом код нашего приложения закончен. К сожалению, управление файлами в JavaScript устроено несколько неинтуитивно, и, вероятно, является наиболее сложной частью приложения. Но, как я уже писал выше, эти API не специфичны для Chrome, а реализованы во всех современных браузерах.
Установка Google веб-приложений в браузер Chrome
В последней сборке Хрома уже включены расширения 3 популярных веб сервиса (Gmail app, Calendar app, Docs app)
После установки обязательно перезапустите браузер.
(—enable-apps — включает поддержку приложений
—apps-panel — добавляет всплывающую панель)
Заходим в меню расширений (chrome://extensions/), переключаемся в «режим разработчика» и выбираем «Загрузить распакованное расширение. »
Три приложения которые уже идут вместе со сборкой находятся они в папке:
для пользователей Vista или Windows 7
например у меня в Win 7 выглядит так (вместо %username% подставьте имя своего юзера)
если зайдете по этому адресу то увидите в папке Resources 3 расширения: calendar_app, docs_app, gmail_app
чтоб вам было легче я уже подготовил для вас пути:
Calendar 
Docs 
Gmail 
важно чтоб в каждой из этих папок находился файл manifest.json
Лично оставил себе пака только приложение Gmail. Вот как это выглядит у меня
Для того что бы добавить приложения в верхнюю панель кладок нужно нажать на иконку «Новая вкладка» и выбрать желаемое приложение
Как вы заметили я уже успел добавить Google Tasks App
Разработка приложений для Chrome: обзор
На Хабре публиковалось немало статей о создании расширений для Chrome, но тема разработки Chrome приложений (они же Chrome apps) затрагивалась заметно реже. В последнее время она стала актуальнее из-за распространения устройств на ChromeOS. К тому же инфраструктура для создания приложений для Chrome стала более стабильной и удобной для использования. В этой статье я постараюсь ответить на основные вопросы: зачем вообще писать приложения для Chrome, чем они отличаются от расширений, веб-сервисов, десктопных приложений и т.п., а также как они разрабатываются, и какие на них накладываются ограничения. Если эта тема вызовет интерес, у статьи будут продолжения, затрагивающие более специальные вопросы.
Зачем
Одну и ту же функциональность можно реализовать с помощью совершенно разных технологий: можно написать программу для Windows, сделать web-сервис, мобильное приложение для 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 мало отличаются от обычных программ. В то же время с точки зрения программиста они устроены совсем по-разному. Какие-то операции оказываются проще, какие-то — сложнее.
Многие интерфейсы, использующиеся приложениями, являются общепринятыми стандартами и хорошо известны всем веб-разработчикам. Для UI используются HTML и CSS, для работы с HTTP — XMLHTTPRequest и т.д.
В Chrome приложении практически без дополнительных усилий реализуется синхронизация между экземплярами приложения на разных компьютерах. Работа с файлами, как и все прочие интерфейсы, зависящие от внешних ресурсов, устроена асинхронно. С одной стороны, это несколько усложняет код для соответствующих операций, с другой — гарантирует отзывчивость интерфейса и предотвращает блокировки.
Ещё одна особенность Chrome — управление безопасностью. В Chrome оно устроено иначе, чем в классических операционных системах и больше напоминает систему безопасности в Android. К добавлению програмных интерфейсов разработчики Chrome всегда подходили консервативно. При разработке системы легче со временем ослабить ограничения безопасности, чем сделать их более строгими. В результате, например, у приложений отсутствует неограниченный доступ к файловой системе. Главным образом, они работают с файлами, либо принадлежащими приложению, либо явно открытыми пользователем.
Чем можно пользоваться кроме HTML + JavaScript
Основным языком программирования для Chrome является, естественно, JavaScript. Но это не значит, что весь ваш код необходимо переписывать на нём. Есть несколько решений, позволяющих использовать в Chrome приложении код на других языках программирования. Среди них:
Пример
В заключении приведу пример приложения, над которым я сам работал (и
работаю). Это текстовый редактор Text. Код редактора доступен на гитхабе. Для собственно редактирования используется библиотека CodeMirror. Приложение реализует работу с файлами, окнами, сохранений настроек и прочие необходимые функции.
Создаем приложение Chrome для своего сайта меньше чем за 5 минут
Авторизуйтесь
Создаем приложение Chrome для своего сайта меньше чем за 5 минут
Google Chrome серьезно упрощает многие вещи, например, создание собственных приложений. Да, подготовить свое приложение к публикации можно за 5 минут, а то и меньше.
Создаем приложение
Начнем мы с создания файла manifest.json. В этом примере приведен манифест сайта NetRival. Откройте любой текстовый редактор, скопируйте в него этот код и измените под свое приложение:
Загружаем приложение в Google Chrome
Откройте браузер, перейдите по адресу chrome://extensions/ и убедитесь, что у вас поставлена галочка «Режим разработчика». Она расположена на странице справа вверху (это видно на картинке). Затем нажмите на кнопку «Загрузить распакованные расширения» и выберите папку, где расположены manifest.json и иконка вашего расширения. zip-архив загружать не нужно, Google Chrome автоматически загрузит файл manifest.json из указанной директории, в данном случае — из E:\NetRival_Chrome_App (это выделено на скриншоте).
Проверяем созданное расширение
Плагин уже работает. Чтобы в этом убедиться, пройдите по адресу chrome://apps/, и вы увидите что-то подобное скриншоту (если нажать на иконку, вы попадете на ваш сайт или блог).
Размещаем расширение в официальном каталоге
Перейдите на адрес https://chrome.google.com/webstore/developer/dashboard и уплатите 5 долларов. После оплаты нажмите на кнопку «Добавить новый продукт» и выберите zip-файл с расширением. После этого понадобится заполнить небольшую анкету приложения и добавить скриншоты.
Чтобы отслеживать трафик с приложения, можно использовать Google Analytics — просто укажите ваш ID. Лучше использовать не тот же GA ID, что для вашего сайта, а отдельный. Теперь нажмите на кнопку предпросмотра и посмотрите, как будет выглядеть ваше приложение в магазине приложений. Осталось лишь нажать на кнопку публикации — и миссия выполнена.
Если у вас возникнут какие-то вопросы, вы можете собственными глазами посмотреть демо приложения и zip-архив с ним. Удачи!
Приложения для браузера Google Chrome
Приложения Гугле Хрома — это отдельные программы и веб-сервисы, которыми можно пользоваться непосредственно в этом браузере. Многие из них похожи на десктопные программы, какие пользователи устанавливают на компьютер. Они разнообразны по функциональному предназначению. Вот только некоторые приложения Google, которые можно бесплатно скачать в интернет-магазине:
Не стоит путать приложения с расширениями для Google Chrome. Второй тип дополнительных инструментов хоть и имеет определённую схожесть, но всё-таки обладает немного другой функциональной концепцией. Расширения тесно взаимодействуют с интерфейсом, меню браузера, его модулями. А приложения — это обособленные программы и сервисы, как бы прикреплённые к браузеру. В сравнении они похожи на утилиты, встроенные в файловый менеджер Total Commander. Они также размещены в базовой директории (в данном случае папке Хрома) и также запускаются посредством ярлыка, установленного на внешней панели управления.
Из этой статьи вы узнаете, как выбрать, установить, запустить и удалить приложения в Chrome.
Где скачивать
Приложения доступны для скачивания в интернет-магазине Google. Чтобы открыть его, щёлкните в браузере по кнопке «меню». В списке выберите: Дополнительные инструменты → Расширения.
Внизу списка подключенных аддонов клацните по ссылке «Ещё расширения».
Теперь на страничке магазина, в его меню, кликните раздел «Расширения» (чтобы возле пункта появилась точка).
Дополнительно можно воспользоваться фильтром: отсортировать приложения по заданным признакам (по рейтингу, разработчику, особенностям, функциональной категории).
Как выбрать и установить
Ориентируйтесь на блоки подборок. В первом блоке «Рекомендуемые» размещены лучшие приложения (пользующиеся большой популярностью среди пользователей).
Далее идут подборки по определённым критериям (отобранные компанией Google, новые программы, последние обновления и т.д.).
Инсталляция дополнительного ПО выполняется следующим образом:
1. Щёлкните по превью заинтересовавшего вас приложения.
2. В открывшейся панели нажмите кнопку «Установить».
3. Подтвердите инсталляцию в запросе браузера (кнопка «Установить… »).
4. По завершении установки откроется вкладка «Сервисы», на которой будет отображен ярлык проинсталлированного ПО.
5. Щёлкните по ярлыку сервиса мышкой, чтобы его запустить.
6. После клика по ярлыку откроется веб-страничка.
Либо вкладка, отдельное окно с интерфейсом программы (в зависимости от дизайна, концепции модуля).
Какие есть полезные приложения?
Выбор дополнительного ПО к Хрому весьма велик. При выборе первоочерёдно ориентируйтесь на интересующие вас задачи (работа с почтой, графикой, видео и т.д.). Также не забывайте ознакамливаться с описанием программного продукта, его уровнем популярности в обществе пользователей (эти характеристики размещены на страничке для скачивания).
А в рамках этого обзора мы приводим лишь отдельные решения, отлично зарекомендовавшие себя на практике.
Gmail Офлайн
Утилита для работы с почтовым ящиком Gmail в отсутствие Интернета. Она кэширует всю входящую и исходящую корреспонденцию. Поддерживает обслуживающие функции онлайн-версии e-mail. Незаменима на компьютерах с нестабильным сетевым коннектом.
Cacoo
Минималистичный, но весьма практичный графический редактор. Позволяет работать с векторной графикой, загружать картинки, наносить текст, гибко отстраивать параметры шрифта.
Click&Clean App
Утилита-уборщик, аналог популярной программы CCleaner для Windows. В один-два клика мышкой очищает кэш, куки, историю. Предоставляет возможность резервировать данные.
После его установки вам также нужно будет в открывшейся вкладке нажать кнопку «Install» и дополнительно загрузить модуль утилиты.
Фортепиано Мастер Делюкс
Виртуальное пианино. После щелчка по ярлыку открывается в веб-страничке. Может пригодиться не только клавишникам, но и вокалистам (для распевки), гитаристам (для настройки гитары).
SWOOP
Интересная, весёлая, яркая аркадная игра. Предлагает пользователю побыть в роли пилота самолёта-кукурузника.
Запускается в отдельном окне. Выполнена в формате 3D. Не сложна в управлении, доставляет множество положительных эмоций. Цель игры — показать высший пилотаж, выполнить все какие нужно виражи и при этом не разбить самолёт.
Relax.li
Веб-сервис с набором «живых» картинок для релакса. На вкладке браузера разворачивает океанское побережье, извилистый горный ландшафт со звуками природы. Помогает расслабиться, абстрагироваться от проблем.
Конечно же, есть и множество других интересных и полезных приложений. Прогуляйтесь по галерее интернет-магазина и выберите то, что вам нужно. Дополнительные программы для Хрома помогут максимально адаптировать его под ваши задачи.