Utwórz pierwszą aplikację

Z tego samouczka dowiesz się, jak utworzyć pierwszą aplikację Chrome. Aplikacje Chrome mają podobną strukturę tak aby obecni programiści rozpoznali plik manifestu i metody pakowania. Gdy musisz utworzyć plik ZIP z kodem i zasobami, by opublikować .

Aplikacja Chrome zawiera te komponenty:

  • Plik manifestu zawiera informacje o Twojej aplikacji, o tym, czym jest, jak ją uruchomić i o dodatkowych opcjach. wymaganych uprawnień.
  • Skrypt działający w tle jest używany do tworzenia strony zdarzenia odpowiedzialnej za zarządzanie czasem życia aplikacji. cyklu.
  • Cały kod należy umieścić w pakiecie aplikacji Chrome. Dotyczy to m.in. HTML, JS, CSS i klienta natywnego modułów.
  • W pakiecie musisz też umieścić wszystkie ikony i inne zasoby.
.

Krok 1. Utwórz plik manifestu

Najpierw utwórz plik manifest.json (Formaty: pliki manifestu opisuje ten plik manifestu w: szczegóły):

{
  "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 przykładowym kodzie powyżej zdarzenie onLaunched będzie wywoływane, gdy użytkownik uruchomi aplikację. it a następnie natychmiast otworzy okno aplikacji o określonej szerokości i wysokości. Tło może zawierać dodatkowe detektory, okna, wiadomości postów oraz dane uruchamiania, z których wszystkie są używane przez stronę wydarzenia 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 warto włączyć eksperymentalne interfejsy API, możesz je wypróbować:

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

Wczytaj aplikację

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

Sprawdź, czy pole 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 karty.

Możesz też wczytać i uruchomić aplikację z poziomu wiersza poleceń

Te opcje wiersza poleceń Chrome mogą ułatwić iterację:

  • --load-and-launch-app=/path/to/app/ instaluje aplikację rozpakowaną z podanej ścieżki, go uruchamia. Jeśli aplikacja jest już uruchomiona, zostanie załadowana ponownie ze zaktualizowaną zawartością.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll uruchamia aplikację już załadowaną do Chrome. Nie Uruchom ponownie dowolną działającą aplikację, ale spowoduje to uruchomienie nowej aplikacji ze zaktualizowaną zawartością.