Создание простого Chrome приложения. Веб-приложения Google Chrome,что это такое? Описание приложений в гугле хроме

manifest.json

{ "name": "Simple Text", "description": "An extremely simple text editor (sample Chrome app)", "version": "0.1", "icons": { "48": "icon/48.png", "128": "icon/128.png" }, "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": { "background": { "scripts": ["js/background.js"] } }, "permissions": [ {"fileSystem": ["write"]} ], "file_handlers": { "text": { "title": "Simple Text", "types": ["application/javascript", "application/json", "application/xml", "text/*"], "extensions": ["c", "cc", "cpp", "css", "h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] } } }

Разберём поля, которые тут встретились. С названием и описанием всё ясно. Версия является обязательным полем - Chrome Web Store будет требовать, чтобы она менялась, когда вы загружаете обновление вашего приложения.

Var entryToLoad = null; function init(launchData) { var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) { entryToLoad = launchData["items"]["entry"] } var options = { frame: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700 }; chrome.app.window.create("index.html", options); } chrome.app.runtime.onLaunched.addListener(init);

Background page работает в фоновом режиме независимо от окон приложения. Большую часть времени он не загружен в память. При запуске системы его код исполняется и может установить обработчики тех или иных событий, самое распространённое из которых - onLaunched. Когда обработчики установлены, background page, как правило, выгружается из памяти и запускается обратно только если произошло одно из событий, на которые он подписан.

Когда пользователь кликает на иконку приложения, или открывает в нём какой-то файл, в background page запускается событие onLaunched . В него передаются параметры вызова, в частности, файл(ы), которые приложение должно открыть. Код entryToLoad = launchData["items"]["entry"] сохраняет переданный в приложение файл в локальной переменной, откуда его потом возьмёт код редактора. Событие onLaunched может прийти и тогда, когда приложение уже открыто. В этом случае код в background page может сам решить, открывать ли новое окно, или совершить какие-то действия в уже открытом окне.

Для полноты картины приведу CSS:

Body { margin: 0; } header { background-color: #CCC; border-bottom: 1px solid #777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: left; display: -webkit-box; height: 48px; padding: 0px 12px 0px 12px; } button { margin: 8px; } textarea { border: none; -webkit-box-sizing: border-box; font-family: monospace; padding: 4px; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px; width: 100%; } textarea:focus { outline: none !important; }

Основной код: работа с файлами

Итак, разберём код в js/main.js . Я буду приводить его фрагментами, полный код - на Гитхабе .

Function init(entry) { $("#open").click(open); $("#save").click(save); $("#saveas").click(saveAs); chrome.runtime.getBackgroundPage(function(bg) { if (bg.entryToLoad) loadEntry(bg.entryToLoad); }); } $(document).ready(init);

Задача функции инициализации - добавить обработчики к кнопкам и получить из background page файл для открытия. Контекст background page получается из основного окна асинхронно с помощью chrome.runtime.getBackgroundPage .

Обработчики нажатий на кнопки:

Var currentEntry = null; function open() { chrome.fileSystem.chooseEntry({"type": "openWritableFile"}, loadEntry); } function save() { if (currentEntry) { saveToEntry(currentEntry); } else { saveAs(); } } function saveAs() { chrome.fileSystem.chooseEntry({"type": "saveFile"}, saveToEntry); }

Текущий FileEntry мы будем хранить в глобальной переменной currentEntry.

Единственная специфичная особенность в приведённом выше коде - это метод chrome.fileSystem.chooseEntry . С помощью этого метода открывается окно выбора файлов (своё на каждой системе). Как и все прочие функции для работы с файловой системой, этот метод асинхронный и получает callback для продолжения работы (в нашем случае функции loadEntry и saveToEntry, описанные ниже).

Чтение файла:

Function setTitle() { chrome.fileSystem.getDisplayPath(currentEntry, function(path) { document.title = path + " - Simple Text"; }); } function loadEntry(entry) { currentEntry = entry; setTitle(); entry.file(readFile); } function readFile(file) { var reader = new FileReader(); reader.onloadend = function(e) { $("textarea").val(this.result); }; reader.readAsText(file); }

В функции setTitle() мы меняем заголовок окна, чтобы показать путь к текущему файлу. То, как будет отображаться этот заголовок, зависит от системы. На Chrome OS он вообще не показывается. chrome.fileSystem.getDisplayPath - наиболее корректный способ получить путь файлу, подходящий, чтобы показывать его пользователю. Другое представление пути доступно через entry.fullPath .

В File API есть два различных объекта, описывающих файл: FileEntry и File. Грубо говоря, FileEntry олицетворяет путь к файлу, а File - данные, в нём содержащиеся. Следовательно, для того, чтобы прочитать файл, необходимо по Entry получить объект File. Это достигается с помощью асинхронного метода entry.file() .

Код этого примера сделан максимально коротким, чтобы уместить его в формат статьи. Если вы хотите посмотреть на более развёрнутые примеры того, как используются те или иные возможности Chrome API, на Гитхабе опубликован большой набор примеров Chrome apps . Официальная документация по всем программным интерфейсам - на developer.chrome.com . Основное место, где можно получить ответы на конкретные вопросы по программированию Chrome-приложений - .

manifest.json

{ "name": "Simple Text", "description": "An extremely simple text editor (sample Chrome app)", "version": "0.1", "icons": { "48": "icon/48.png", "128": "icon/128.png" }, "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": { "background": { "scripts": ["js/background.js"] } }, "permissions": [ {"fileSystem": ["write"]} ], "file_handlers": { "text": { "title": "Simple Text", "types": ["application/javascript", "application/json", "application/xml", "text/*"], "extensions": ["c", "cc", "cpp", "css", "h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] } } }

Разберём поля, которые тут встретились. С названием и описанием всё ясно. Версия является обязательным полем - Chrome Web Store будет требовать, чтобы она менялась, когда вы загружаете обновление вашего приложения.

Var entryToLoad = null; function init(launchData) { var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) { entryToLoad = launchData["items"]["entry"] } var options = { frame: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700 }; chrome.app.window.create("index.html", options); } chrome.app.runtime.onLaunched.addListener(init);

Background page работает в фоновом режиме независимо от окон приложения. Большую часть времени он не загружен в память. При запуске системы его код исполняется и может установить обработчики тех или иных событий, самое распространённое из которых - onLaunched. Когда обработчики установлены, background page, как правило, выгружается из памяти и запускается обратно только если произошло одно из событий, на которые он подписан.

Когда пользователь кликает на иконку приложения, или открывает в нём какой-то файл, в background page запускается событие onLaunched . В него передаются параметры вызова, в частности, файл(ы), которые приложение должно открыть. Код entryToLoad = launchData["items"]["entry"] сохраняет переданный в приложение файл в локальной переменной, откуда его потом возьмёт код редактора. Событие onLaunched может прийти и тогда, когда приложение уже открыто. В этом случае код в background page может сам решить, открывать ли новое окно, или совершить какие-то действия в уже открытом окне.

Для полноты картины приведу CSS:

Body { margin: 0; } header { background-color: #CCC; border-bottom: 1px solid #777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: left; display: -webkit-box; height: 48px; padding: 0px 12px 0px 12px; } button { margin: 8px; } textarea { border: none; -webkit-box-sizing: border-box; font-family: monospace; padding: 4px; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px; width: 100%; } textarea:focus { outline: none !important; }

Основной код: работа с файлами

Итак, разберём код в js/main.js . Я буду приводить его фрагментами, полный код - на Гитхабе .

Function init(entry) { $("#open").click(open); $("#save").click(save); $("#saveas").click(saveAs); chrome.runtime.getBackgroundPage(function(bg) { if (bg.entryToLoad) loadEntry(bg.entryToLoad); }); } $(document).ready(init);

Задача функции инициализации - добавить обработчики к кнопкам и получить из background page файл для открытия. Контекст background page получается из основного окна асинхронно с помощью chrome.runtime.getBackgroundPage .

Обработчики нажатий на кнопки:

Var currentEntry = null; function open() { chrome.fileSystem.chooseEntry({"type": "openWritableFile"}, loadEntry); } function save() { if (currentEntry) { saveToEntry(currentEntry); } else { saveAs(); } } function saveAs() { chrome.fileSystem.chooseEntry({"type": "saveFile"}, saveToEntry); }

Текущий FileEntry мы будем хранить в глобальной переменной currentEntry.

Единственная специфичная особенность в приведённом выше коде - это метод chrome.fileSystem.chooseEntry . С помощью этого метода открывается окно выбора файлов (своё на каждой системе). Как и все прочие функции для работы с файловой системой, этот метод асинхронный и получает callback для продолжения работы (в нашем случае функции loadEntry и saveToEntry, описанные ниже).

Чтение файла:

Function setTitle() { chrome.fileSystem.getDisplayPath(currentEntry, function(path) { document.title = path + " - Simple Text"; }); } function loadEntry(entry) { currentEntry = entry; setTitle(); entry.file(readFile); } function readFile(file) { var reader = new FileReader(); reader.onloadend = function(e) { $("textarea").val(this.result); }; reader.readAsText(file); }

В функции setTitle() мы меняем заголовок окна, чтобы показать путь к текущему файлу. То, как будет отображаться этот заголовок, зависит от системы. На Chrome OS он вообще не показывается. chrome.fileSystem.getDisplayPath - наиболее корректный способ получить путь файлу, подходящий, чтобы показывать его пользователю. Другое представление пути доступно через entry.fullPath .

В File API есть два различных объекта, описывающих файл: FileEntry и File. Грубо говоря, FileEntry олицетворяет путь к файлу, а File - данные, в нём содержащиеся. Следовательно, для того, чтобы прочитать файл, необходимо по Entry получить объект File. Это достигается с помощью асинхронного метода entry.file() .

Код этого примера сделан максимально коротким, чтобы уместить его в формат статьи. Если вы хотите посмотреть на более развёрнутые примеры того, как используются те или иные возможности Chrome API, на Гитхабе опубликован большой набор примеров Chrome apps . Официальная документация по всем программным интерфейсам - на developer.chrome.com . Основное место, где можно получить ответы на конкретные вопросы по программированию Chrome-приложений - .

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

Зачем

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

Packaged apps и hosted apps

Дело в том, что существует два принципиально разных типа приложений: 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.

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

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

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

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

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

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

Пример

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

Юзеры, использующие Google Chrome в качестве браузера по умолчанию, наверняка имеют представление о магазине приложений. Те, кому приходилось с ними работать, знают, приложения – это лишь ссылки на интернет-страницы соответствующих онлайн-сервисов. Они располагаются на отдельной панели браузера по адресу: «chrome://apps» (пример смотрите на скриншоте).
Приложения Google Chrome

В последнее время компания выпускает приложения Chrome для компьютера, разработанные на языках программирования JavaScript и HTML5. Они запускаются в отдельных от браузера процессах и не требуют сетевого соединения, хоть и используют для своей работы движок Chrome.

Новые приложения Google Chrome

Приложение для браузера Хром – это самостоятельная программа, написанная на языках программирования (в порядке популярности):

1. JavaScript – используется для написания скриптов для браузеров;
2. HTML – язык гипертекстовой разметки страниц в сети;
3. Native Client – позволяет запускать приложения в различных браузерах, независимо от ОС;
4. Emscripten – компилятор С++, выдающий код JavaScript на выходе.

Порой используются и другие менее популярные движки для разработки веб-приложений, но без применения технологии Flash от Adobe. По окончанию компилирования исходный код программы сжимается, после чего способен работать автономно на без интернета, Магазин приложений предлагает инсталлировать Google Keep на ПК, графические редакторы Sketchpad или Pixlr, блокнот Writer или отечественную игру Cut the Rope, и запускать их как классические программы через панель запуска приложений. Она, кстати, не является достоянием Windows, и функционирует также на Linux и MacOS.

Chrome – платформа для запуска приложений

Учтите, что при использовании приложений, интернет магазин google chrome установит панель для запуска программ в автоматическом режиме, не спрашивая и не уведомляя пользователя о совершении действий.

По завершении инсталляции в панели задач создается ярлык, запускающий панель запуска, где отображается список используемых на компьютере приложений для Хром. Через нее программы запускаются или удаляются, не требуя функционирования интернет-обозревателя. Старые приложения, которые рекомендуется заменить на обновленные, обозначаются стрелочкой, как ярлыки (по сути, ими и являются – ведут на соответствующие сайты).

Панель запуска приложений chrome при наличии активного интернет-соединения выполняет синхронизацию закладок, истории навигации, сохраненных паролей и т. д. Если случайно удалили приложение настройки google chrome, перейдите по ссылке https://chrome.google.com/webstore/launcher и загрузите его.

Примеры приложений Chrome для компьютера

В google chrome store представлено немало программ для ПК, среди которых многофункциональные графические и текстовые редакторы, конвертеры величин, утилиты для заметок, множество игр, клиенты для социальных сетей и прочих сервисов. Программы для гугл хром являются полноценными и с легкостью заменят ваши ежедневные приложения, тем более что работают они офлайн. Использование программ от Google обладает несколькими преимуществами:

• доступ к сервисам возможен всегда:
• синхронизация с браузером на всех устройствах после авторизации;
• не вызывают критических ошибок в работе Windows.

TechSmith Snagit

Рис 2. Графический редактор TechSmith Snagit

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

Pocket

Зайдя в магазин Google многие обращали внимание на приложение для Google Chrome под названием Pocket – клиент одноименного сервиса. Он предназначен для хранения интересных пользователю статей, которые тот планирует прочитать позже. Программа отображает список сохраненных статей в виде эскизов и позволяет выполнять поиск необходимых публикаций по их заголовку. В процессе сохранения интернет-страницы очищаются от рекламы.
Дополнительно Pocket позволяет сохранять публикации в архив или делиться с интереснейшими из них с друзьями в социальных сетях или отправлять по электронной почте.