На этом этапе вы узнаете:
- Основные строительные блоки приложения Chrome, включая файл манифеста и фоновые сценарии.
- Как установить, запустить и отладить приложение Chrome.
Примерное время выполнения этого шага: 10 минут.
Чтобы просмотреть то, что вы выполните на этом этапе, прыгните вниз этой страницы ↓ .
Познакомьтесь с приложениями Chrome
Приложение Chrome содержит следующие компоненты:
- Манифест указывает метаинформацию вашего приложения. Манифест сообщает Chrome о вашем приложении, о том, как его запустить, а также о любых дополнительных разрешениях, которые ему требуются.
- Страница событий , также называемая фоновым скриптом , отвечает за управление жизненным циклом приложения. В фоновом сценарии вы регистрируете прослушиватели для определенных событий приложения, таких как запуск и закрытие окна приложения.
- Все файлы кода должны быть упакованы в приложение Chrome. Сюда входят модули HTML, CSS, JS и Native Client.
- Ресурсы , включая значки приложений, также должны быть упакованы в приложение Chrome.
Создать манифест
Откройте свой любимый редактор кода/текста и создайте следующий файл с именем манифест.json :
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
Обратите внимание, как этот манифест описывает фоновый скрипт с именем background.js . Далее вы создадите этот файл.
"background": {
"scripts": ["background.js"]
}
Позже на этом этапе мы предоставим вам значок приложения:
"icons": {
"128": "icon_128.png"
},
Создайте фоновый скрипт
Создайте следующий файл и сохраните его как background.js :
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
Этот фоновый скрипт просто ожидает события запуска chrome.app.runtime.onLaunched для приложения и выполняет функцию обратного вызова:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
Когда приложение Chrome запускается, chrome.app.window.create() создаст новое окно, используя базовую HTML-страницу ( index.html ) в качестве источника. На следующем шаге вы создадите представление HTML.
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
Фоновые сценарии могут содержать дополнительные прослушиватели, окна, сообщения публикации и данные запуска — все они используются страницей событий для управления приложением.
Создайте HTML-представление
Создайте простую веб-страницу для вывода на экран сообщения «Hello World» и сохраните ее как index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Как и любую другую веб-страницу, в этот HTML-файл вы можете включить дополнительный упакованный JavaScript, CSS или ресурсы.
Добавить значок приложения
Щелкните правой кнопкой мыши и сохраните это изображение размером 128x128 в папке проекта как _icon 128.png :
Вы будете использовать этот PNG в качестве значка нашего приложения, который пользователи будут видеть в меню запуска.
Подтвердите, что вы создали все свои файлы
Теперь в папке вашего проекта должны быть эти 4 файла:
Установите приложение Chrome в режиме разработчика
Используйте режим разработчика , чтобы быстро загрузить и запустить приложение без необходимости дорабатывать его в качестве дистрибутивного пакета.
- Доступ к расширениям chrome:// из омнибокса Chrome.
- Снимите флажок Режим разработчика .
- Нажмите «Загрузить распакованное расширение» .
- Используя диалоговое окно выбора файлов, перейдите к папке проекта вашего приложения и выберите ее, чтобы загрузить приложение.
Запустите готовое приложение Hello World.
После загрузки проекта как распакованного расширения нажмите «Запустить» рядом с установленным приложением. Должно открыться новое отдельное окно:
Поздравляем, вы только что создали новое приложение Chrome!
Отладка приложения Chrome с помощью Chrome DevTools
Вы можете использовать инструменты разработчика Chrome для проверки, отладки, аудита и тестирования вашего приложения так же, как вы это делаете на обычной веб-странице.
После внесения изменений в код и перезагрузки приложения ( щелкните правой кнопкой мыши > Перезагрузить приложение ), проверьте консоль DevTools на наличие ошибок ( щелкните правой кнопкой мыши > Проверить элемент ).
(Мы рассмотрим опцию «Проверить фоновую страницу» на шаге 3 с помощью сигналов тревоги.)
Консоль DevTools JavaScript имеет доступ к тем же API, что и ваше приложение. Вы можете легко протестировать вызов API перед добавлением его в свой код:
Для дополнительной информации
Более подробную информацию о некоторых API, представленных на этом этапе, см.:
- Формат файла манифеста ↑
- Манифест - Иконки ↑
- Жизненный цикл приложения Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Готовы перейти к следующему шагу? Перейдите к шагу 2. Импортируйте существующее веб-приложение »
,На этом этапе вы узнаете:
- Основные строительные блоки приложения Chrome, включая файл манифеста и фоновые сценарии.
- Как установить, запустить и отладить приложение Chrome.
Примерное время выполнения этого шага: 10 минут.
Чтобы просмотреть то, что вы выполните на этом этапе, прыгните вниз этой страницы ↓ .
Познакомьтесь с приложениями Chrome
Приложение Chrome содержит следующие компоненты:
- Манифест указывает метаинформацию вашего приложения. Манифест сообщает Chrome о вашем приложении, о том, как его запустить, а также о любых дополнительных разрешениях, которые ему требуются.
- Страница событий , также называемая фоновым скриптом , отвечает за управление жизненным циклом приложения. В фоновом сценарии вы регистрируете прослушиватели для определенных событий приложения, таких как запуск и закрытие окна приложения.
- Все файлы кода должны быть упакованы в приложение Chrome. Сюда входят модули HTML, CSS, JS и Native Client.
- Ресурсы , включая значки приложений, также должны быть упакованы в приложение Chrome.
Создать манифест
Откройте свой любимый редактор кода/текста и создайте следующий файл с именем манифест.json :
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
Обратите внимание, как этот манифест описывает фоновый скрипт с именем background.js . Далее вы создадите этот файл.
"background": {
"scripts": ["background.js"]
}
Позже на этом этапе мы предоставим вам значок приложения:
"icons": {
"128": "icon_128.png"
},
Создайте фоновый скрипт
Создайте следующий файл и сохраните его как background.js :
/**
* Listens for the app launching then creates the window
*
* @see /apps/app.window.html
*/
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
Этот фоновый скрипт просто ожидает события запуска chrome.app.runtime.onLaunched для приложения и выполняет функцию обратного вызова:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
Когда приложение Chrome запускается, chrome.app.window.create() создаст новое окно, используя базовую HTML-страницу ( index.html ) в качестве источника. На следующем шаге вы создадите представление HTML.
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
Фоновые сценарии могут содержать дополнительные прослушиватели, окна, сообщения публикации и данные запуска — все они используются страницей событий для управления приложением.
Создайте HTML-представление
Создайте простую веб-страницу для вывода на экран сообщения «Hello World» и сохраните ее как index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Как и любую другую веб-страницу, в этот HTML-файл вы можете включить дополнительный упакованный JavaScript, CSS или ресурсы.
Добавить значок приложения
Щелкните правой кнопкой мыши и сохраните это изображение размером 128x128 в папке проекта как _icon 128.png :
Вы будете использовать этот PNG в качестве значка нашего приложения, который пользователи будут видеть в меню запуска.
Подтвердите, что вы создали все свои файлы
Теперь в папке вашего проекта должны быть эти 4 файла:
Установите приложение Chrome в режиме разработчика
Используйте режим разработчика , чтобы быстро загрузить и запустить приложение без необходимости дорабатывать его в качестве дистрибутивного пакета.
- Доступ к расширениям chrome:// из омнибокса Chrome.
- Снимите флажок Режим разработчика .
- Нажмите «Загрузить распакованное расширение» .
- Используя диалоговое окно выбора файлов, перейдите к папке проекта вашего приложения и выберите ее, чтобы загрузить приложение.
Запустите готовое приложение Hello World.
После загрузки проекта как распакованного расширения нажмите «Запустить» рядом с установленным приложением. Должно открыться новое отдельное окно:
Поздравляем, вы только что создали новое приложение Chrome!
Отладка приложения Chrome с помощью Chrome DevTools
Вы можете использовать инструменты разработчика Chrome для проверки, отладки, аудита и тестирования вашего приложения так же, как вы это делаете на обычной веб-странице.
После внесения изменений в код и перезагрузки приложения ( щелкните правой кнопкой мыши > Перезагрузить приложение ), проверьте консоль DevTools на наличие ошибок ( щелкните правой кнопкой мыши > Проверить элемент ).
(Мы рассмотрим опцию «Проверить фоновую страницу» на шаге 3 с помощью сигналов тревоги.)
Консоль DevTools JavaScript имеет доступ к тем же API, что и ваше приложение. Вы можете легко протестировать вызов API перед добавлением его в свой код:
Для дополнительной информации
Более подробную информацию о некоторых API, представленных на этом этапе, см.:
- Формат файла манифеста ↑
- Манифест - Иконки ↑
- Жизненный цикл приложения Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Готовы перейти к следующему шагу? Перейдите к шагу 2. Импортируйте существующее веб-приложение »