Utwórz pierwszą aplikację

W tym samouczku omawiamy tworzenie pierwszej aplikacji Chrome. Aplikacje Chrome mają strukturę podobną do rozszerzeń, aby obecni programiści mogli rozpoznać metody tworzenia pliku manifestu i tworzenia pakietu. Gdy to zrobisz, musisz utworzyć plik ZIP z kodem i zasobami, aby publish aplikację.

Aplikacja Chrome zawiera te komponenty:

  • Plik manifestu informuje Chrome o Twojej aplikacji, jej działaniu, uruchamianiu i wymaganych dodatkowych uprawnieniach.
  • Skrypt w tle służy do utworzenia strony zdarzenia odpowiedzialnej za zarządzanie cyklem życia aplikacji.
  • Cały kod musi być zawarty w pakiecie aplikacji Chrome. Obejmuje to moduły HTML, JS, CSS i klienta natywnego.
  • Wszystkie ikony i inne zasoby muszą również znajdować się w pakiecie.

Krok 1. Utwórz plik manifestu

Najpierw utwórz plik manifest.json (formaty: pliki manifestu szczegółowo opisują ten plik manifestu):

{
  "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" }
}

Krok 2. Utwórz skrypt działający w tle

Następnie utwórz nowy plik o nazwie background.js z następującą zawartością:

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

W tym przykładowym kodzie zdarzenie onLaunched jest wywoływane, gdy użytkownik uruchomi aplikację. Następnie od razu otworzy się okno aplikacji o określonej szerokości i wysokości. Skrypt działający w tle może zawierać dodatkowe detektory, okna, wiadomości postów i dane uruchamiania, które są wykorzystywane przez stronę zdarzenia do zarządzania aplikacją.

Krok 3. Utwórz stronę okna

Utwórz plik window.html:

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

Krok 4. Utwórz ikony

Skopiuj te ikony do folderu aplikacji:

Krok 5. Uruchom aplikację

Włącz flagi

Wiele interfejsów API Aplikacji Chrome jest nadal w fazie eksperymentalnej, dlatego zalecamy włączenie ich eksperymentalnych, aby móc je wypróbować:

  • Otwórz chrome://flags.
  • Odszukaj pozycję „Eksperymentalne interfejsy API rozszerzeń” i kliknij odpowiadający jej link „Włącz”.
  • Uruchom ponownie Chrome.

Wczytaj aplikację

Aby wczytać aplikację, otwórz stronę zarządzania aplikacjami i rozszerzeniami, klikając ikonę ustawień Chrome i wybierając Narzędzia > Rozszerzenia.

Upewnij się, że pole wyboru Tryb programisty jest zaznaczone.

Kliknij przycisk Wczytaj rozszerzenie bez pakietu, przejdź do folderu aplikacji i kliknij OK.

Otwórz nową kartę i uruchom

Po załadowaniu aplikacji otwórz stronę Nowa karta i kliknij ikonę nowej aplikacji.

Wczytywanie i uruchamianie z wiersza poleceń

Te opcje wiersza poleceń dotyczące Chrome mogą ułatwić powtórzenie:

  • --load-and-launch-app=/path/to/app/ instaluje bez pakietu aplikację z podanej ścieżki i uruchamia ją. Jeśli aplikacja jest już uruchomiona, spowoduje to ponowne załadowanie zaktualizowanej zawartości.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll uruchamia aplikację, która jest już załadowana w Chrome. Nie uruchamia ponownie żadnej wcześniej uruchomionej aplikacji, ale uruchamia nową aplikację ze zaktualizowaną zawartością.