Membuat Aplikasi Pertama Anda

Tutorial ini memandu Anda dalam membuat Aplikasi Chrome pertama Anda. Aplikasi Chrome memiliki struktur yang mirip dengan ekstensi sehingga developer saat ini akan mengenali manifes dan metode pengemasan. Setelah selesai, Anda hanya perlu membuat file zip kode dan aset untuk publish aplikasi.

Aplikasi Chrome berisi komponen berikut:

  • Manifes memberi tahu Chrome tentang aplikasi Anda, definisinya, cara meluncurkannya, dan izin tambahan yang diperlukan.
  • Skrip latar belakang digunakan untuk membuat halaman peristiwa yang bertanggung jawab untuk mengelola siklus proses aplikasi.
  • Semua kode harus disertakan dalam paket Aplikasi Chrome. Ini mencakup modul HTML, JS, CSS, dan Native Client.
  • Semua ikon dan aset lainnya juga harus disertakan dalam paket.

Langkah 1: Buat manifes

Pertama-tama, buat file manifest.json Anda (Format: File Manifes menjelaskan manifes ini secara detail):

{
  "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" }
}

Langkah 2: Buat skrip latar belakang

Selanjutnya, buat file baru bernama background.js dengan konten berikut:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

Pada kode contoh di atas, peristiwa onLaunched akan diaktifkan saat pengguna memulai aplikasi, lalu langsung membuka jendela aplikasi dengan lebar dan tinggi yang ditentukan. Skrip latar belakang Anda dapat berisi pemroses tambahan, jendela, pesan postingan, dan data peluncuran, yang semuanya digunakan oleh halaman peristiwa untuk mengelola aplikasi.

Langkah 3: Buat halaman jendela

Buat file window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Langkah 4: Buat ikon

Salin ikon ini ke folder aplikasi Anda:

Langkah 5: Luncurkan aplikasi Anda

Mengaktifkan tanda

Banyak dari API Aplikasi Chrome yang masih bersifat eksperimental, jadi Anda harus mengaktifkan API eksperimental sehingga Anda dapat mencobanya:

  • Buka chrome://flags.
  • Temukan "Experimental Extension API", dan klik link "Enable".
  • Mulai ulang Chrome.

Memuat aplikasi

Untuk memuat aplikasi, tampilkan halaman pengelolaan aplikasi dan ekstensi dengan mengklik ikon setelan Chrome dan memilih Alat > Ekstensi.

Pastikan kotak centang Mode developer telah dipilih.

Klik tombol Load unpacked extension, buka folder aplikasi Anda dan klik OK.

Buka tab baru dan luncurkan

Setelah memuat aplikasi, buka laman Tab Baru dan klik ikon aplikasi baru.

Atau, muat dan luncurkan dari command line

Opsi command line untuk Chrome berikut dapat membantu Anda melakukan iterasi:

  • --load-and-launch-app=/path/to/app/ menginstal aplikasi yang belum diekstrak dari jalur tertentu, dan meluncurkannya. Jika sudah berjalan, aplikasi akan dimuat ulang dengan konten yang telah diperbarui.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll meluncurkan aplikasi yang sudah dimuat ke Chrome. Tindakan ini tidak memulai ulang aplikasi yang sebelumnya berjalan, tetapi meluncurkan aplikasi baru dengan konten yang telah diupdate.