Chrome apps как добавить приложение

Создаем приложение Chrome для своего сайта меньше чем за 5 минут

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» , «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-архив с ним. Удачи!

Создание простого Chrome приложения

В прошлом топике я постарался рассказать, что такое Chrome app, и зачем их писать. В этом, как обещал, я опишу процесс создания простого Chrome-приложения. В качестве примера будет использован текстовый редактор. Во-первых, его можно написать очень коротко, так чтобы практически весь код поместился в статью. Во-вторых, в текстовом редакторе будут использоваться несколько характерных для Chrome (и других основанных на Chromium браузеров) программных интерфейсов. В-третьих, да, я уже писал текстовый редактор для 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": [ ], "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 будет требовать, чтобы она менялась, когда вы загружаете обновление вашего приложения.

Стандарные размеры иконок, требующихся для приложения — 48×48 и 128×128 пикселов. Также в некоторых случаях используется иконка размера 16×16. Кроме этого, другие размеры иконки могут потребоваться в случаях, когда она будет показываться на дисплеях высокого разрешения, как на Chromebook Pixel и новых MacbookPro.

«manifest_version» — версия формата файла manifest. В данный момент следует использовать значение 2.

«offline_enabled» — как можно ожидать, данный флаг установлен для приложений, работающих вне зависимости от наличия доступа к интернету.

Следующая конструкция — главная в файле:

Тут браузеру сообщается, как запускать приложение. В отличие от расширений, для которых background page является необязательным атрибутом, в приложении он всегда есть. Логика работы такова: при запуске приложения сначала загружается код background page. Он может регистрировать обработчики тех или иных событий, в частности, события onLaunched , который затем стартует, когда пользователь тем или иным способом открывает приложение.

В разделе «permissions» описываются настройки доступа для приложения. В нашем случае добавлена возможность сохранять файлы.

Наконец, в разделе «file_handlers» описаны типы файлов, открываемых приложением. Для разных типов файлов в файловом менеджере Chrome OS могут показывать разные строчки в меню. Например, для одних файлов пункт в меню может выглядеть «Смотреть изображение в СуперПрограмме», а для других — «Редактировать текст в СуперПрограмме».

Назначение Chrome-приложения программой для открытия того или иного типа файлов работает пока только в Chrome OS.

Background page

Весь код, реализующий background page находится в файле js/background.js. Вот он:

var entryToLoad = null; function init(launchData) < var fileEntry = null if (launchData && launchData['items'] && launchData['items'].length >0) < entryToLoad = launchData['items'][0]['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’][0][‘entry’] сохраняет переданный в приложение файл в локальной переменной, откуда его потом возьмёт код редактора. Событие onLaunched может прийти и тогда, когда приложение уже открыто. В этом случае код в background page может сам решить, открывать ли новое окно, или совершить какие-то действия в уже открытом окне.

Метод chrome.app.window.create создаёт новое окно приложения. Первый параметр — путь к открываемому в нём html-файлу (относительно директории приложения). Второй — параметры окна. Остановлюсь на одном из них. frame: ‘chrome’ создаёт окно с обычным для текущей операционной системы оформлением. Другой вариант здесь — frame: ‘none’ . В этом случае приложение запускается в «голом» окне, и разработчик должен будет сам позаботиться о добавлении кнопок для закрытия, свёртывания и развёртывания окна, а также области, за которую окно можно будет таскать по экрану.

index.html

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

        
Open Save Save as 
   

Мы воспользуемся jQuery, чтобы немного упростить код. Для редактирования мы будем использовать поле . В настоящем редакторе вместо это будет использоваться более интеллектуальный модуль редактирования. Наиболее распространённые варианты: CodeMirror и Ace.

Для полноты картины приведу 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

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

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

Итак, разберём код в 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(, loadEntry); > function save() < if (currentEntry) < saveToEntry(currentEntry); >else < saveAs(); >> function saveAs() < chrome.fileSystem.chooseEntry(, 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() .

FileReader — отдельный объект, предназначеный для чтения файлов. Он позволяет достаточно гибко управлять процессом чтения, но нам от него в данном случае нужно просто прочесть всё содержимое файла.

Запись файла, как и чтение, не содержит специфичного для Chrome кода:

function saveToEntry(entry) < currentEntry = entry; setTitle(); var blob = new Blob([$('textarea').val()], ); entry.createWriter(function(writer) < writer.onwrite = function() < writer.onwrite = null; writer.write(blob); >writer.truncate(blob.size); >); > 

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

 entry.createWriter(function(writer) < writer.write(blob); >); 

Заключение

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

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

• chrome apps
• текстовый редактор
• chrome api
• google chrome
• google chrome apps

• Блог компании Google Developers
• Google Chrome

Как установить приложение для Android в браузер Google Chrome?

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

Прежде всего, если вы хотите собственными руками попробовать установить в Хром приложения для Android, то подготовьте сам браузер. Вам понадобится Google Chrome не ниже 37 версии, причем обязательно 64-битный. А еще лучше установите Canary-сборку.

Чтобы приложения для Android заработали в браузере, необходимо установить в него специальный плагин/расширение, который создан на базе технологии NaCl и позволяет исполнять apk-файлы. Официальный плагин устанавливается в Chrome OS в момент первой загрузки одного из избранных приложений, но нам это никак не поможет, потому что мы хотим выйти за эти ограничения. И тут нам на помощь приходит неофициальный плагин ARChon. Скачиваем архив и распаковываем его. А далее устанавливаем в браузер в режиме разработчика.

Теперь со стороны браузера все готово. Вот только ему нельзя просто так взять и скормить apk-файл. Приложение должно быть оформлено в виде Chrome App, с манифестом, иконкой и прочей нечестью. Для самых ленивых уже есть готовое тестовое приложение в виде игры 2048. Загружаем, распаковываем и устанавливаем в браузер так же, как и плагин. Больше ничего делать не надо — игра доступна на chrome:apps и вполне корректно работает.

А для любителей поэкспериментировать мы продолжаем инструкцию. В браузер можно установить и любое другое андроидное приложение. Для этого можно воспользоваться неофициальной утилитой chromeos-apk, которая позволяет собрать из apk архив, подходящий для Хрома. Но это отдельная сложная инструкция, а для ленивых любителей поэкспериментировать есть способ чуть проще. Берем тестовой приложение (игрушка 2048), ссылку на которое мы давали выше. Если заглянуть в ее папку и пройти по определенному адресу, то вы найдете apk-установщик.

Не нужно быть гением, чтобы догадаться заменить здесь apk-файл игры на нужный нам. Поэтому идем на известный пиратский сайт, где выбираем то, что хочется попробовать в Google Chrome, и скачиваем. Можно даже не заменять, а просто поместить рядом с другим именем, как мы и поступили с приложением для ВКонтакте.

Остается открыть manifest.json, который лежит в корневой папке приложения, и отредактировать несколько строк (имя файла и ID приложения).

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

Сохраняем отредактированный манифест. По вкусу заменяем иконку icon.png (необязательно). Устанавливаем так же, как и все остальное. Запускаем. Получаем то же, что и мы:

Или не получаем, потому что многие приложения имеют зависимости от системных библиотек, завязаны на какие-то иные особенности смартфонов и планшетов, а их разработчики в страшном сне не могли представить себе подобное применение мобильного приложения. Особенно обидно за WhatsApp, который так хотелось иметь под рукой в браузере, но оно банально не запускается. Зато мы почти запустили Хром в Хроме (дальше этого сообщения ничего не работает):

Ну как вам такое? Верите в будущее, где все Android-приложения заработают в браузере Google Chrome, а про веб-приложения разработчики забудут навсегда?

UPD. Спасибо Берку за табличку, где собраны приложения, подходящие для запуска, и даже ссылки на уже полностью готовые архивы.

UPD 2. Angry Birds Star Wars работает. Только масштабировать нельзя.

Управление настройками согласия для приложений

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Режим согласия для Google Аналитики позволяет корректировать алгоритм работы тегов Google на основе статуса согласия пользователей. Вы можете настроить передачу информации о том, получено ли согласие для идентификаторов Google Аналитики и Google Рекламы. Добавлять режим согласия в приложения можно с помощью SDK Google Аналитики для Firebase. Задайте настройки по умолчанию и используйте API setConsent , чтобы автоматически управлять настройками с учетом согласия, которое предоставляют вам пользователи приложения. Дополнительную информацию вы можете найти в статье Режим согласия на сайтах и в мобильных приложениях.

iOS Android

Базовая настройка

Хранилища как Google Рекламы, так и Google Аналитики по умолчанию включены для приложений. Чтобы изменить эти настройки, выполните инструкции ниже.

Хранилище Google Аналитики

Чтобы отключить хранилище Google Аналитики, откройте файл Info.plist file для своего приложения и задайте для GOOGLE_ANALYTICS_DEFAULT_ALLOW_ANALYTICS_STORAGE значение NO . Пример из исходного XML:

GOOGLE_ANALYTICS_DEFAULT_ALLOW_ANALYTICS_STORAGE 

Хранилище Google Рекламы

Чтобы отключить хранилище Google Рекламы, откройте файл Info.plist file для своего приложения и задайте для GOOGLE_ANALYTICS_DEFAULT_ALLOW_AD_STORAGE значение NO . Пример из исходного XML:

GOOGLE_ANALYTICS_DEFAULT_ALLOW_AD_STORAGE 

Чтобы повторно включить хранилища Аналитики и Рекламы, например после получения пользовательского согласия, вызовите метод экземпляра setConsent для Analytics .

Обновление согласия

Чтобы обновить значения для хранилищ Аналитики и Рекламы после запуска приложения, вызовите метод setConsent .

Значение, заданное методом setConsent , сохраняется при выполнении всех действий в приложении и переопределяет значение по умолчанию. Значение сохраняется до тех пор, пока метод setConsent не будет вызван снова, даже если пользователь закроет и снова откроет приложение. Вызов setConsent для изменения настроек хранилища Рекламы не влияет на состояние хранилища Аналитики.

В примере ниже показано, как метод setConsent меняет значения для хранилищ Аналитики и Рекламы на granted (разрешено):

Swift

Analytics.setConsent([ .analyticsStorage: .granted .adStorage: .granted ]) 

Objective-C

[FIRAnalytics setConsent:@< FIRConsentTypeAnalyticsStorage : FIRConsentStatusGranted FIRConsentTypeAdStorage : FIRConsentStatusGranted >]; 

Проверка настроек согласия

Проверить, правильно ли работают настройки согласия в вашем приложении, можно с помощью консоли отладки Xcode.

Выполните следующие действия:

1. Включите ведение подробных журналов на устройстве.
2. Найдите параметр ad_storage или analytics_storage в консоли отладки Xcode. Например, если включены и Аналитика, и хранилище Google Рекламы, то вы увидите следующее сообщение:

ad_storage is granted. analytics_storage is granted. 

Отправить отзыв

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-01-03 UTC.