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