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:
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:
Instalowanie aplikacji Chrome w trybie programisty
Tryb programisty pozwala szybko załadować i uruchomić aplikację bez konieczności finalizowania jej jako pakietu dystrybucyjnego.
- Otwórz stronę chrome://extensions w omniboksie Chrome.
- Odznacz pole wyboru Tryb programisty.
- Kliknij Wczytaj rozszerzenie bez pakietu.
- W oknie wyboru plików przejdź do folderu projektu aplikacji i wybierz go, aby wczytać aplikację.
Uruchom gotową aplikację Hello World
Po wczytaniu projektu jako rozszerzenia bez pakietu kliknij Uruchom obok zainstalowanej aplikacji. Powinno się otworzyć nowe samodzielne okno:
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).
(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:
Więcej informacji
Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:
- Format pliku manifestu ↑
- Plik manifestu – ikony ↑
- Cykl życia aplikacji Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Chcesz przejść do następnego kroku? Przejdź do Kroku 2. Zaimportuj istniejącą aplikację internetową »