Создайте свое первое приложение

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

Приложение Chrome содержит следующие компоненты:

  • Манифест сообщает Chrome о вашем приложении, о том, что это такое, как его запустить и какие дополнительные разрешения ему требуются.
  • Фоновый скрипт используется для создания страницы событий, отвечающей за управление жизненным циклом приложения.
  • Весь код должен быть включен в пакет приложения Chrome. Сюда входят модули HTML, JS, CSS и Native Client.
  • Все значки и другие ресурсы также должны быть включены в пакет.

Шаг 1. Создайте манифест

Сначала создайте файл manifest.json ( Форматы: Файлы манифеста подробно описывают этот манифест):

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

Шаг 2. Создайте фоновый скрипт.

Затем создайте новый файл с именем background.js со следующим содержимым:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

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

Шаг 3. Создайте страницу окна.

Создайте файл window.html :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Шаг 4. Создайте значки

Скопируйте эти значки в папку вашего приложения:

Шаг 5. Запустите приложение.

Включить флаги

Многие из API-интерфейсов приложений Chrome все еще являются экспериментальными, поэтому вам следует включить экспериментальные API, чтобы вы могли их опробовать:

  • Перейдите на страницу chrome://flags .
  • Найдите «Экспериментальные API расширения» и нажмите ссылку «Включить».
  • Перезапустите Хром.

Загрузите ваше приложение

Чтобы загрузить приложение, откройте страницу управления приложениями и расширениями, щелкнув значок настроек Chrome и выбрав «Инструменты» > «Расширения» .

Убедитесь, что флажок Режим разработчика установлен.

Нажмите кнопку «Загрузить распакованное расширение» , перейдите в папку вашего приложения и нажмите «ОК» .

Откройте новую вкладку и запустите

Загрузив приложение, откройте страницу новой вкладки и щелкните значок нового приложения.

Или загрузите и запустите из командной строки.

Эти параметры командной строки Chrome могут помочь вам в повторении:

  • --load-and-launch-app=/path/to/app/ устанавливает распакованное приложение по заданному пути и запускает его. Если приложение уже запущено, оно перезагружается с обновленным содержимым.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll запускает приложение, уже загруженное в Chrome. Он не перезапускает ранее запущенное приложение, но запускает новое приложение с обновленным содержимым.