Krok 1. Utwórz i uruchom aplikację Chrome

W tym kroku poznasz:

  • Podstawowe elementy składowe aplikacji Chrome, w tym plik manifestu i skrypty działające w tle.
  • Instalowanie, uruchamianie i debugowanie aplikacji Chrome.

Szacowany czas potrzebny na wykonanie tego kroku: 10 minut.
Aby zobaczyć, co wykonasz w tym kroku, przejdź na sam dół strony ↓.

Poznaj Aplikacje Chrome

Aplikacja Chrome zawiera te komponenty:

  • Plik manifest określa metainformacje o aplikacji. Informuje on Chrome o Twojej aplikacji, sposobie jej uruchomienia i wymaganych dodatkowych uprawnieniach.
  • Strona zdarzenia (tzw. skrypt w tle) odpowiada za zarządzanie cyklem życia aplikacji. Skrypt działający w tle to miejsce, w którym rejestrujesz detektory określonych zdarzeń aplikacji, takich jak uruchomienie i zamknięcie okna aplikacji.
  • Wszystkie pliki kodu muszą być spakowane w aplikacji Chrome. Dotyczy to modułów HTML, CSS, JS i klienta natywnego.
  • W aplikacji Chrome należy również spakować zasoby, w tym ikony aplikacji.

Tworzenie pliku manifestu

Otwórz ulubiony edytor kodu lub tekstu i utwórz ten plik o nazwie manifest.json:

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

Zwróć uwagę, jak ten plik manifestu opisuje skrypt działający w tle o nazwie background.js. Teraz utworzysz ten plik.

"background": {
  "scripts": ["background.js"]
}

W dalszej części tego kroku wyświetlimy ikonę aplikacji:

"icons": {
  "128": "icon_128.png"
},

Utwórz skrypt działający w tle

Utwórz ten plik i zapisz go jako 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 }
  });
});

Ten skrypt działający w tle czeka na zdarzenie uruchomienia chrome.app.runtime.onLaunched przez aplikację i wykonuje funkcję wywołania zwrotnego:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Po uruchomieniu aplikacji Chrome chrome.app.window.create() utworzy nowe okno, używając podstawowej strony HTML (index.html) jako źródła. Widok HTML utworzysz w następnym kroku.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

Skrypty działające w tle mogą zawierać dodatkowych detektorów, okien, postów i danych uruchamiania. Wszystkie te elementy są używane przez stronę zdarzenia do zarządzania aplikacją.

Tworzenie widoku HTML

Utwórz prostą stronę internetową, która będzie wyświetlać wiadomość „Hello World” na ekranie i zapisz ją w pliku index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Podobnie jak w przypadku każdej innej strony, plik HTML może zawierać dodatkowe pakiety JavaScript, CSS lub zasoby.

Dodawanie ikony aplikacji

Kliknij prawym przyciskiem myszy i zapisz ten obraz o wymiarach 128 x 128 w folderze projektu jako _icon128.png:

Ikona aplikacji Chrome na potrzeby tego ćwiczenia z programowania

Ten plik PNG posłuży za ikonę naszej aplikacji, którą użytkownicy zobaczą w menu uruchamiania.

Sprawdź, czy wszystkie pliki zostały utworzone

W folderze projektu powinny się już znaleźć te 4 pliki:

Zrzut ekranu folderu plików

Instalowanie aplikacji Chrome w trybie programisty

Tryb programisty pozwala szybko załadować i uruchomić aplikację bez konieczności finalizowania jej jako pakietu dystrybucyjnego.

  1. Otwórz stronę chrome://extensions w omniboksie Chrome.
  2. Odznacz pole wyboru Tryb programisty.

Włącz tryb programisty

  1. Kliknij Wczytaj rozszerzenie bez pakietu.
  2. W oknie wyboru plików przejdź do folderu projektu aplikacji i wybierz go, aby wczytać aplikację.

Wczytaj rozszerzenia bez pakietu

Uruchom gotową aplikację Hello World

Po wczytaniu projektu jako rozszerzenia bez pakietu kliknij Uruchom obok zainstalowanej aplikacji. Powinno się otworzyć nowe samodzielne okno:

Aplikacja Hello World gotowa po kroku 1

Gratulacje, udało Ci się utworzyć nową aplikację Chrome.

Debugowanie aplikacji Chrome za pomocą Narzędzi deweloperskich w Chrome

Za pomocą Narzędzi deweloperskich w Chrome możesz sprawdzać, debugować, kontrolować i testować aplikacje tak samo jak na zwykłej stronie internetowej.

Po wprowadzeniu zmian w kodzie i ponownym załadowaniu aplikacji (kliknięcie prawym przyciskiem myszy > Załaduj ponownie aplikację) sprawdź, czy w konsoli Narzędzi deweloperskich nie ma błędów (kliknij prawym przyciskiem myszy > Zbadaj element).

Okno dialogowe Sprawdzanie elementu

(Opcję Zbadaj stronę w tle omówimy w kroku 3 z alarmami).

Konsola JavaScript w Narzędziach deweloperskich ma dostęp do tych samych interfejsów API, które są dostępne dla Twojej aplikacji. Wywołanie interfejsu API możesz łatwo przetestować, zanim dodasz je do kodu:

Dziennik konsoli Narzędzi deweloperskich

Więcej informacji

Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:

Chcesz przejść do następnego kroku? Przejdź do Kroku 2. Zaimportuj istniejącą aplikację internetową »