1. Adım: Bir Chrome Uygulaması Oluşturun ve Çalıştırın

Bu adımda şunları öğreneceksiniz:

  • Manifest dosyası ve arka plan komut dosyaları da dahil olmak üzere bir Chrome uygulamasının temel yapı taşları.
  • Chrome Uygulaması yükleme, çalıştırma ve uygulamada hata ayıklama.

Bu adımın tamamlanması için tahmini süre: 10 dakika.
Bu adımda ne tamamlayacağınızı önizlemek için bu sayfanın en altına atlayın ↓.

Chrome Uygulamalarını tanıyın

Bir Chrome Uygulaması şu bileşenleri içerir:

  • Manifest, uygulamanızın meta bilgilerini belirtir. Manifest dosyası, Chrome'a uygulamanız, nasıl başlatacağınız ve gerektirdiği ek izinler hakkında bilgi verir.
  • Arka plan komut dosyası olarak da adlandırılan etkinlik sayfası, uygulama yaşam döngüsünün yönetiminden sorumludur. Arka plan komut dosyası, uygulama penceresinin başlatılması ve kapatılması gibi belirli uygulama etkinlikleri için işleyicileri kaydettiğiniz yerdir.
  • Tüm kod dosyaları Chrome uygulamasında paketlenmelidir. Bunlara HTML, CSS, JS ve Native Client modülleri dahildir.
  • Uygulama simgeleri de dahil olmak üzere öğeler, Chrome Uygulaması'nda da paketlenmelidir.

Manifest oluşturma

Favori kod/metin düzenleyicinizi açın ve manifest.json adlı aşağıdaki dosyayı oluşturun:

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

Bu manifestin background.js adlı bir arka plan komut dosyasını nasıl açıkladığına dikkat edin. Ardından, bu dosyayı oluşturacaksınız.

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

Bu adımın ilerleyen bölümlerinde size bir uygulama simgesi sağlanacaktır:

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

Arka plan komut dosyası oluşturma

Aşağıdaki dosyayı oluşturun ve background.js olarak kaydedin:

/**
 * 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 }
  });
});

Bu arka plan komut dosyası, yalnızca uygulama için chrome.app.runtime.onLaunched başlatma etkinliğini bekler ve geri çağırma işlevini yürütür:

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

Chrome uygulaması başlatıldığında, chrome.app.window.create() kaynak olarak temel bir HTML sayfasını (index.html) kullanarak yeni bir pencere oluşturur. HTML görünümünü bir sonraki adımda oluşturacaksınız.

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

Arka plan komut dosyaları ek işleyiciler, pencereler, yayın mesajları ve başlatma verileri içerebilir. Bunların tümü, etkinlik sayfası tarafından uygulamayı yönetmek için kullanılır.

HTML görünümü oluşturma

Ekranda "Hello World" mesajı görüntüleyecek basit bir web sayfası oluşturun ve index.html olarak kaydedin:

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

Diğer web sayfalarında olduğu gibi, bu HTML dosyasına da paketlenmiş ek JavaScript, CSS veya öğeler ekleyebilirsiniz.

Uygulama simgesi ekleyin

Bu 128x128 boyutundaki resmi sağ tıklayıp proje klasörünüze _icon128.png olarak kaydedin:

Bu codelab için Chrome Uygulaması simgesi

Kullanıcıların başlat menüsünde göreceği uygulama simgesi olarak bu PNG'yi kullanacaksınız.

Tüm dosyalarınızı oluşturduğunuzu onaylayın

Şu anda proje klasörünüzde şu 4 dosya olmalıdır:

Dosya klasörü ekran görüntüsü

Geliştirici modunda bir Chrome Uygulaması yükleme

Uygulamanızı dağıtım paketi olarak tamamlamak zorunda kalmadan hızlı bir şekilde yüklemek ve başlatmak için geliştirici modunu kullanın.

  1. Chrome çok amaçlı adres çubuğundan chrome://extensions sayfasına erişin.
  2. Geliştirici modu onay kutusunu işaretleyin.

Geliştirici modunu etkinleştir

  1. Paketlenmemiş uzantı yükle'yi tıklayın.
  2. Dosya seçici iletişim kutusunu kullanarak uygulamanızın proje klasörüne gidin ve uygulamanızı yüklemek için bu klasörü seçin.

Paketlenmemiş uzantıları yükle

Tamamlanmış Hello World uygulamanızı başlatma

Projenizi paketlenmemiş bir uzantı olarak yükledikten sonra yüklü uygulamanızın yanındaki Başlat'ı tıklayın. Yeni bir bağımsız pencere açılır:

1. adımdan sonra tamamlanan Hello World uygulaması

Tebrikler, yeni bir Chrome Uygulaması oluşturdunuz!

Chrome Geliştirici Araçları ile Chrome Uygulamasında Hata Ayıklama

Uygulamanızı normal bir web sayfasındaki gibi denetlemek, hata ayıklamak, denetlemek ve test etmek için Chrome Geliştirici Araçları'nı kullanabilirsiniz.

Kodunuzda değişiklik yaptıktan ve uygulamanızı yeniden yükledikten sonra (sağ tıklayın > Uygulamayı Yeniden Yükle), Geliştirici Araçları konsolunda hata olup olmadığını kontrol edin (sağ tıklayın > Öğeyi Denetle).

Öğeyi Denetle iletişim kutusu

(Alarmlarla, 3. Adımda Arka Plan Sayfasını Denetle seçeneğini ele alacağız.)

Geliştirici Araçları JavaScript konsolu, uygulamanızda kullanılabilen API'lere erişebilir. Bir API çağrısını kodunuza eklemeden önce kolayca test edebilirsiniz:

Geliştirici Araçları konsol günlüğü

Daha fazla bilgi için

Bu adımda tanıtılan API'lerden bazıları hakkında daha ayrıntılı bilgi için aşağıdaki makalelere bakın:

Bir sonraki adıma geçmeye hazır mısınız? 2. Adım - Mevcut bir web uygulamasını içe aktarın » bölümüne gidin.