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-файл с расширением. После этого понадобится заполнить небольшую анкету приложения и добавить скриншоты.

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

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

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

Особенности браузера Google Chrome

Браузер обладает рядом ключевых возможностей, благодаря которым пользователи останавливают свой выбор именно на продукте от компании Google. К ним можно отнести:

• Оптимизированная работа с вкладками, что позволяет в три раза ускорить скорость их загрузки.
• Возможность синхронизировать личную информацию (вкладки, закладки и пароли) между различными Андроид устройствами всего в несколько нажатий.
• Уникальная функция сжатия трафика, при помощи которой объем полученных и переданных данных можно сократить в 2 раза. Такой функционал будет особенно полезен людям, использующим для доступа в интернет мобильный трафик.
• Умный поиск, который параллельно с вводом Вашего поискового запроса предлагает возможные варианты поиска.
• Встроенная функция автоматического перевода, благодаря которой больше не будет никаких языковых барьеров.
• Удобная реализация работы с вкладками браузера Google Chrome, благодаря чему работать с ними одно удовольствие.
• Наличие конфиденциального серфинга. При включении данной функции никто не сможет отследить Ваши перемещения в интернете.

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

Посмотрите на эту подборку лучших приложений для Google Chrome.

Sunrise Calendar

Sunrise Calendar – это самое прекрасное бесплатное приложение-календарь. Вы можете синхронизировать его с iCloud и календарем Google. Вы можете быстро добавлять события одним кликом по кнопке запуска, регулировать продолжительность и добавлять любые необходимые детали. Красоты приложению добавляет то, что оно является кросс-платформенным, и вы сможете пользоваться им не только на ноутбуке или стационарном компьютере, но также и на планшете или смартфоне.

Lazarus Form Recovery

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

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

0h h1

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

Telegram

Telegram - это ультра-безопасное и зашифрованное облачное приложение, созданное для обмена сообщениями, которое позволяет общаться с друзьями с помощью любого устройства. Это простое в использовании приложение позволит иметь доступ ко всем вашим сообщениям что с ноутбука, что с планшета, что со смартфона. Недавнее обновление добавило встроенную поддержку сервисов Instagram и Twitter, а также YouTube, Vine и Vimeo. Это одно из самых безопасных приложений для обмена сообщениями.

Gmail Offline

Gmail Offline решает одну из самых больших проблем почтовых приложений - доступность в автономном режиме. Это приложение синхронизируется с вашей учетной записью Gmail каждый раз, когда вы находитесь в сети, позволяя получить доступ к почте в тот момент, когда вы не подключены. Вы можете читать сообщения, архивировать почту и даже писать новые письма или ответы. В следующий раз, когда приложение обнаружить доступное подключение к Интернету, оно автоматически выполняет все действия.

WeatherBug

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

Pixlr Touch Up

Pixlr Touch Up - это простой и бесплатный редактор фотографий, который идеально подходит для редактирования фотографий для того, чтобы выложить из в социальные сети или онлайн-галерею. Возможности приложения включают в себя обрезку изображения, изменение размера, поворот, регулирование цвета и контрастности, применение цветовых фильтров. Кнопки Undo и Redo позволят отменить неподходящие изменения, а отредактированные изображения вы сможете сохранить на жестком диске или на Google Drive. Это, конечно, не Photoshop, но зато очень хорошее приложение для моментальной обработки.

Google Keep

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

Pocket

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

LastPass

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

Вконтакте

Если вы следите за популярными технологиям,такими как блоги или Techcrunch Download Squad ,вы могли заметить, тизерные сообщения о веб-приложениях Google Chrome , новой функции Chromium которую разработчики Google Chrome развивают в течение некоторого времени.План компании Google является предоставление веб-приложений в новой версии Chrome Web Store . Есть бесплатные и платные приложения, которые пользователи Chrome могут установить в веб-браузере.

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

Google Chrome веб-приложения .

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

Chrome веб-приложения.
На скриншоте выше показаны два веб-приложения Chrome и одно во вкладке. Gmail и Google Calendar являются веб-приложениями. При нажатии на них открывается веб-страница службы в браузере. Я честно не в состоянии выяснить существующие различия между веб-приложениями и удержании вкладки в этой точке, за исключением лучших иконок вкладки и тот факт, что веб-приложения перечислены в новых закладках.Я считаю, что это пример концепции. Например,в статьях Techcrunch показан скриншот игры, которая, вероятно, работает локально, а не на веб-сайте.

Веб-приложения Chrome игры
Как вы можете видеть на скриншоте выше нет URL в адресной строкепредполагая, что она выполняется локально (или, что URL-адрес был удален с экрана).
Как включить веб-приложения Chrome в Google Chrome Dev.
Веб-приложения Chrome могут быть включены в Google Chrome - Chromium . В Download Squad размещены инструкции:
Google Chrome поставляется с тремя веб-приложениями для тестирования. Они обеспечивают функциональность Google Docs, Gmail и Google Calendar.
Приложения расположены в C: \ Users \ имя пользователя \ AppData \ Local \ Google \ Chrome \ Application \ 6.0.453.1 \ Resources \ на Windows. Обратите внимание, что версия изменяется с каждым новым релизом Chrome .
Вам нужно добавить параметр запуска-Enable-приложений в браузере. Самый простой способ сделать это, создать ярлык, щелкните правой кнопкой мыши на ярлыке и выберите свойства. Цель должна выглядеть подобным образом в конце C: \ Users \ имя пользователя \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe включить приложения
Теперь откройте меню расширений, нажав на значок гаечного ключа на панели инструментов Chrome , там вы увидите инструменты и расширения.
Выберите распаковать расширения и перейдите к папке ресурсов. Каждое веб- приложение Chrome должно быть установлено отдельно.
Веб-приложения сразу появляются на странице «Новая вкладка», где они могут быть запущены.А что вы думаете по этому поводу? Дайте знать в комментариях.

Для тестирования приложения, которое вы разрабатываете, необходимо будет добавить его в свой браузер. Для этого на странице chrome://extensions нужно отметить чекбокс «Режим разработчика» («Developer mode»). После этого станет возможным добавить ваше расширение или приложение.

manifest.json

Код любого приложения для 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; }

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

Так как в нашем примере мы для простоты ограничимся минимальным набором возможностей, то основной код редактора будет посвящён почти исключительно работе с файлами. Для этого используется несколько API, часть из которых уже находится на пути к стандартизации W3C. File API и сопутствующие интерфейсы - большая тема, заслуживающая отдельной статьи. В качестве хорошего введения рекомендую .

Итак, разберём код в 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-приложений - .