Membuat Aplikasi Pertama Anda

Tutorial ini akan memandu Anda membuat Aplikasi Chrome pertama. Aplikasi Chrome memiliki struktur yang serupa ke ekstensi sehingga developer saat ini akan mengenali manifes dan metode pengemasannya. Saat Anda selesai, Anda hanya perlu membuat file zip kode dan aset Anda untuk memublikasikan .

Aplikasi Chrome berisi komponen berikut:

  • Manifes ini memberi tahu Chrome tentang aplikasi Anda, apa itu, cara meluncurkannya, dan lainnya izin akses yang diperlukan.
  • Skrip latar belakang digunakan untuk membuat halaman peristiwa yang bertanggung jawab untuk mengelola kehidupan aplikasi siklus.
  • Semua kode harus disertakan dalam paket Aplikasi Chrome. Ini termasuk HTML, JS, CSS, dan Native Client modul.
  • 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 di ):

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

Dalam kode contoh di atas, peristiwa onLaunched akan diaktifkan saat pengguna memulai aplikasi. Ini kemudian segera membuka jendela untuk aplikasi dengan lebar dan tinggi yang ditentukan. Latar belakang Anda dapat berisi pemroses tambahan, jendela, pesan postingan, dan data peluncuran, yang semuanya digunakan oleh laman acara 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

Aktifkan tanda

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

  • Buka chrome://flags.
  • Cari "Experimental Extension API", lalu klik "Enable"-nya tautan.
  • Mulai ulang Chrome.

Memuat Aplikasi

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

Pastikan kotak centang Mode developer telah dipilih.

Klik tombol Muat ekstensi yang belum dibuka, buka folder aplikasi Anda, lalu klik Oke.

Buka tab baru dan luncurkan

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

Atau, muat dan luncurkan dari command line

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

  • --load-and-launch-app=/path/to/app/ menginstal aplikasi yang belum dibuka dari jalur yang diberikan, dan meluncurkannya. Jika aplikasi sudah berjalan, aplikasi akan dimuat ulang dengan konten yang telah diperbarui.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll meluncurkan aplikasi yang sudah dimuat ke Chrome. Tidak memulai ulang aplikasi yang sedang berjalan sebelumnya, namun tindakan ini akan meluncurkan aplikasi baru dengan konten yang telah diperbarui.