Krok 1. Utwórz i uruchom aplikację Chrome

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 ukończenie tego kroku: 10 minut.
Aby zobaczyć podgląd czynności, które wykonasz w tym kroku, przeskocz na dół strony ↓.

Poznaj Aplikacje Chrome

Aplikacja Chrome zawiera te komponenty:

  • Pole manifest określa metadane aplikacji. Plik manifestu informuje Chrome o aplikacji, sposobu jej uruchomienia i ewentualnych dodatkowych uprawnień.
  • Strona zdarzenia (nazywana też skryptem działającym w tle) odpowiada za zarządzanie czasem działania aplikacji. cyklu. Skrypt działający w tle służy do rejestrowania detektorów konkretnych zdarzeń w aplikacji, takich jak uruchamianiu i zamykaniu okna aplikacji.
  • Wszystkie pliki z kodem muszą być spakowane w aplikacji Chrome. Dotyczy to m.in. HTML, CSS, JS i reklam natywnych. Moduły klienta.
  • Zasoby, w tym ikony aplikacji, również powinny zostać spakowane do aplikacji Chrome.

Utwórz plik manifestu

Otwórz ulubiony edytor kodu/tekstu i utwórz następujący 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ę, że ten plik manifestu opisuje skrypt działający w tle o nazwie background.js. Utworzony przez Ciebie plik.

"background": {
  "scripts": ["background.js"]
}

Ikonę aplikacji udostępnimy w dalszej części tego kroku:

"icons": {
  "128": "icon_128.png"
},

Tworzenie skryptu działającego w tle

Utwórz następujący 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 dla i wykonuje funkcję wywołania zwrotnego:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Po uruchomieniu aplikacji Chrome chrome.app.window.create() utworzy nowe okno z jako źródłową stronę HTML (index.html). 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ć dodatkowe detektory, okna, wiadomości postów i dane uruchamiania – wszystko z których służy strona wydarzenia do zarządzania aplikacją.

Tworzenie widoku HTML

Utwórz prostą stronę internetową, która będzie wyświetlać „Hello World” i zapisz ją jako 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 strony, w tym pliku HTML możesz umieścić dodatkowy spakowany kod JavaScript, CSS lub komponenty.

Dodaj ikonę aplikacji

Kliknij prawym przyciskiem myszy ten obraz o wymiarach 128 x 128 i zapisz go w folderze projektu jako _icon128.png:

Ikona aplikacji Chrome do tego ćwiczenia w Codelabs

Ten plik PNG zostanie użyty jako ikona naszej aplikacji, którą użytkownicy zobaczą w menu uruchamiania.

Sprawdź, czy wszystkie pliki zostały utworzone.

W folderze projektu powinny się teraz znajdować te 4 pliki:

Zrzut ekranu folderu plików

Instalowanie aplikacji Chrome w trybie programisty

korzystać z trybu programisty, aby szybko ładować i uruchamiać aplikację bez konieczności jej finalizowania. pakietu dystrybucyjnego.

  1. Otwórz chrome://extensions z omniboksu Chrome.
  2. Odznacz pole wyboru Tryb programisty.

Włączanie trybu programisty

  1. Kliknij Wczytaj rozszerzenie bez pakietu.
  2. W oknie wyboru plików przejdź do folderu projektu aplikacji i wybierz go, aby wczytać .

Wczytaj rozszerzenia bez pakietu

Uruchom gotową aplikację Hello World

Po wczytaniu projektu jako rozszerzenia bez pakietu kliknij Uruchom obok zainstalowanej aplikacji. O powinno się otworzyć nowe, niezależne okno:

Aplikacja Hello World została uruchomiona po kroku 1

Gratulacje, właśnie udało Ci się utworzyć nową aplikację Chrome.

Debugowanie aplikacji Chrome za pomocą Narzędzi deweloperskich w Chrome

Za pomocą Narzędzi dla programistów w Chrome możesz sprawdzać, debugować, kontrolować i testować aplikację w taki sam sposób jak co zwykłe strony internetowe.

Po wprowadzeniu zmian w kodzie i ponownym załadowaniu aplikacji (kliknij prawym przyciskiem myszy > Odśwież aplikację) sprawdź, Konsola Narzędzi deweloperskich w przypadku wszelkich błędów (kliknij prawym przyciskiem myszy > Zbadaj element).

Okno dialogowe Zbadaj element

(Opcję Sprawdź stronę w tle omówimy w kroku 3 w przypadku alarmów).

Konsola JavaScript Narzędzi deweloperskich ma dostęp do tych samych interfejsów API, które są dostępne dla Twojej aplikacji. Możesz łatwo przetestuj wywołanie interfejsu API przed dodaniem go do kodu:

Dziennik konsoli Narzędzi deweloperskich

Więcej informacji

Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:

Chcesz przejść dalej? Przejdź do sekcji Krok 2. Zaimportuj istniejącą aplikację internetową »