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ą.