Как создавать и публиковать приложения и расширения Chrome. Элементы и приложения Chrome для компьютера Что такое приложение хром

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

Эта статья предназначена для администраторов Chrome Enterprise и разработчиков, имеющих опыт создания пакетов приложений Chrome и их публикации.

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

Подготовка

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

Шаг 1. Создайте приложение или расширение

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

  1. Создайте на компьютере папку, в которой будут храниться файлы приложения или расширения. Присвойте ей имя приложения.
  2. Создайте файл манифеста.
    1. Создайте в текстовом редакторе файл JavaScript ® Object Notation (JSON). Посмотрите пример файла JSON для приложения-закладки.
    2. Проверьте, правильно ли отформатирован код в файле JSON, с помощью специального инструмента, например JSONLint .
  3. Поместите файл manifest.json в папку приложения или расширения.
  4. Создайте логотип.
    1. Изображение должно иметь размер 128 х 128 пикселей.
    2. Сохраните файл логотипа под названием 128.png в папке приложения.

Шаг 2. Протестируйте приложение или расширение

Разработчики могут тестировать свои приложения и расширения в браузере Chrome или на устройствах Chrome OS.

Чтобы устранить неполадки в приложении или расширении, воспользуйтесь журналами Chrome.

Шаг 3. Создайте коллекцию приложений (необязательно)

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

Шаг 4. Опубликуйте приложение или расширение в Интернет-магазине Chrome

Разработчик может сделать приложение или расширение общедоступным либо ограничить доступ к нему. При публикации в Интернет-магазине Chrome можно выбрать один из трех вариантов.

  • Общедоступное : кто угодно может найти и установить приложение.
  • Доступ по ссылке : установить приложение или расширение можно только по ссылке. Оно не включается в результаты поиска в Интернет-магазине Chrome. Ссылку можно отправить пользователям как в домене организации, так и за его пределами.
  • Частное : найти и установить приложение или расширение могут только пользователи в вашем домене. Кроме этого, можно предоставить доступ к продукту только доверенным тестировщикам, чьи имена указаны в панели инструментов разработчика.

Чтобы добавить приложение или расширение в Интернет-магазин Chrome, создайте ZIP-архив соответствующей папки, а затем опубликуйте продукт .

Шаг 5. Настройте правила работы с приложением или расширением

В панели администратора Google можно управлять использованием приложений и расширений на устройствах Chrome и в браузере Chrome на компьютерах Windows, Mac и Linux в вашей организации. Правила Chrome можно настраивать

Мобильные устройства уже давно являются основной целью вирусных атак. Зараженные телефоны дают практически все – доступ к личной информации, выход в интернет, доступ к банкингу и т.д. Буквально недавно начал атаковать новый – Chromes. Сегодня мы расскажем что это за и как можно эффективно его из системы.

Что за приложение?

Chromes – это вредоносная мобильная , работающая в фоне. У приложения две основные цели: перехват личных данных (контакты, журналы вызовов, история серфинга), отправка “дорогих” СМС и подписки на платный контент, который сейчас активно предлагается мобильными операторами. проникает на смартфоны вместе с зараженными приложениями, которые вы скачиваете с Play Marketa, либо другого магазина.

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

Удаляем Chromes с телефона

На сегодняшний день, вирусный процесс Chromes обнаруживается практически всеми популярными антивирусами – Dr.Web, ESET, Kaspersky, AVG, включая даже встроенную защиту от Сбербанк онлайн. Простое удаление через стандартный Диспетчер не помогает – будет устанавливаться автоматически. Дело в том, что файл удаляется легко, но вот отыскать загрузчик сложнее. Плюс ко всему, загрузчик может прикрываться администрированием.

Итак, для того, что бы убрать Chromes из Android попробуйте сделать следующее:


Эти шаги должны помочь в удалении вирусной программки. Но если вдруг не поможет и программа будет опять устанавливаться, тогда самым простым вариантом будет “Сброс до заводских” . Если вы не желаете стирать все с телефона, тогда можно попробовать отыскать загрузчик. Найти его бывает порой сложно, но опытные пользователи могут использовать утилиту Titanium BackUp, которая отслеживает активные процессы и вы можете поочередно замораживать их.

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

Если удаление не помогает

Если программка все равно появляется через некоторое время, а загрузчик вы найти не можете, тогда можно просто:


Это временное решение, пока про этот зловред не будет собрано больше информации.

Заключение

Начал активничать недавно, но уже наделал много шума. После всех очисток обязательно зайдите в личный кабинет вашего мобильного оператора – проверьте там список подключенных услуг. Также проверьте перечень ваших подписок на мобильный контент. Если не знаете как это сделать – звоните оператору. Дело в том, что в среднем такая подписка стоит 20 руб. в день, а если троян успел сделать несколько таких, то в конце месяца вы можете получить хороший минус на счете. Если возникли вопросы – все в комментарии.

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

Зачем

Одну и ту же функциональность можно реализовать с помощью совершенно разных технологий: можно написать программу для Windows, сделать web-сервис, мобильное приложение для Android и/или iOS и т.д. Что может подтолкнуть автора сделать выбор в пользу приложения для Chrome?
  • Работа на ChromeOS. На данный момент Chrome app ­- основной способ донести вашу программу до пользователей Chromebook"ов . Стоит ли оно того? Chromebook"ов пока меньше, чем, скажем, компьютеров под Windows, но тенденция меняется. В прошлом году в США было продано в 5 раз больше Chromebook"ов чем Macbook"ов
  • Приложения Chrome без каких-либо дополнительных усилий работают на Windows, Linux и OS X. Конечно, есть множество других способов сделать приложение переносимым, но большинство из них оказываются заметно более затратными.
  • С недавних пор появилась возможность портировать Chrome apps на 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 , представляют собой.crx файлы, являющиеся zip-архивами. Свойства расширения/приложения описываются в файле manifest.json , а UI в них написан на HTML5. Многие программные интерфейсы Chrome доступны как расширениям, так и приложениям.

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

  • управлять своими окнами,
  • напрямую работать с файлами на компьютере пользователя,
  • назначаться программами для открытия операционной системой тех или иных типов файлов,
  • открывать TCP и UDP соединения (этим, к примеру пользуется SSH-клиент для Chrome),
  • работать с USB.

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

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

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

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

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

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

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

Пример


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

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