Langkah 1: Membuat dan Menjalankan Aplikasi Chrome

Pada langkah ini, Anda akan mempelajari:

  • Elemen penyusun dasar Aplikasi Chrome, termasuk file manifes dan skrip latar belakang.
  • Cara menginstal, menjalankan, dan men-debug Aplikasi Chrome.

Perkiraan waktu untuk menyelesaikan langkah ini: 10 menit.
Untuk melihat pratinjau apa yang akan Anda selesaikan pada langkah ini, turun ke bagian bawah halaman ini ↓.

Mengenal Aplikasi Chrome

Aplikasi Chrome berisi komponen berikut:

  • Manifes menentukan informasi meta aplikasi Anda. Manifes memberi tahu Chrome tentang aplikasi, cara meluncurkannya, dan izin tambahan apa pun yang diperlukan.
  • Halaman peristiwa, yang juga disebut skrip latar belakang, bertanggung jawab untuk mengelola kehidupan aplikasi siklus. Skrip latar belakang adalah tempat Anda mendaftarkan pemroses untuk peristiwa aplikasi tertentu seperti peluncuran dan penutupan jendela aplikasi.
  • Semua file kode harus dikemas dalam Aplikasi Chrome. Ini termasuk HTML, CSS, JS, dan Native Modul klien.
  • Aset, termasuk ikon aplikasi, juga harus dikemas dalam Aplikasi Chrome.

Membuat manifes

Buka editor kode/teks favorit Anda dan buat file berikut bernama manifest.json:

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

Perhatikan cara manifes ini menjelaskan skrip latar belakang bernama background.js. Anda akan membuat berikutnya.

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

Kami akan memberi Anda ikon aplikasi nanti di langkah ini:

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

Membuat skrip latar belakang

Buat file berikut dan simpan sebagai 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 }
  });
});

Skrip latar belakang ini hanya menunggu peristiwa peluncuran chrome.app.runtime.onLaunched untuk dan mengeksekusi fungsi callback:

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

Saat Aplikasi Chrome diluncurkan, chrome.app.window.create() akan membuat jendela baru menggunakan halaman HTML biasa (index.html) sebagai sumber. Anda akan membuat tampilan HTML di langkah berikutnya.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

Skrip latar belakang dapat berisi pemroses, jendela, postingan pesan tambahan, dan data peluncuran—semuanya yang digunakan oleh laman peristiwa untuk mengelola aplikasi.

Membuat tampilan HTML

Membuat halaman web sederhana untuk menampilkan "Hello World" ke layar dan simpan sebagai index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Sama seperti laman web lainnya, dalam file HTML ini Anda dapat menyertakan paket JavaScript tambahan, CSS, atau aset.

Menambahkan ikon aplikasi

Klik kanan dan simpan gambar berukuran 128x128 ini ke folder project sebagai _icon128.png:

Ikon Aplikasi Chrome untuk codelab ini

Anda akan menggunakan PNG ini sebagai ikon aplikasi yang akan dilihat pengguna di menu peluncuran.

Konfirmasi bahwa Anda telah membuat semua file

Sekarang Anda seharusnya memiliki 4 file ini di folder project:

Screenshot folder file

Menginstal Aplikasi Chrome dalam mode developer

Gunakan mode developer untuk memuat dan meluncurkan aplikasi dengan cepat tanpa harus menyelesaikan aplikasi sebagai paket distribusi Google Anda.

  1. Akses chrome://extensions dari omnibox Chrome.
  2. Centang kotak Mode developer.

Aktifkan mode developer

  1. Klik Muat ekstensi yang belum dibuka.
  2. Dengan menggunakan dialog pemilih file, buka folder proyek aplikasi Anda dan pilih untuk memuat .

Memuat ekstensi yang belum dibuka

Meluncurkan aplikasi Hello World yang sudah selesai

Setelah memuat project sebagai ekstensi yang belum dibuka, klik Launch di samping aplikasi terinstal. J jendela mandiri baru akan terbuka:

Aplikasi Hello World yang sudah selesai setelah Langkah 1

Selamat, Anda baru saja membuat Aplikasi Chrome baru!

Men-debug Aplikasi Chrome dengan Chrome DevTools

Anda dapat menggunakan Chrome Developer Tools untuk memeriksa, men-debug, mengaudit, dan menguji aplikasi seperti seperti yang biasa Anda lakukan di laman web biasa.

Setelah membuat perubahan pada kode dan memuat ulang aplikasi (klik kanan > Reload App), periksa Konsol DevTools untuk memeriksa error (klik kanan > Periksa Elemen).

Kotak dialog Inspect Element

(Kita akan membahas opsi Periksa Halaman Latar Belakang pada Langkah 3 dengan alarm.)

Konsol JavaScript DevTools memiliki akses ke API yang sama dengan yang tersedia untuk aplikasi Anda. Anda dapat dengan mudah menguji panggilan API sebelum menambahkannya ke kode Anda:

Log konsol DevTools

Untuk informasi selengkapnya

Untuk informasi yang lebih mendetail tentang beberapa API yang diperkenalkan di langkah ini, lihat:

Siap untuk melanjutkan ke langkah berikutnya? Buka Langkah 2 - Impor aplikasi web yang ada »