İlk Uygulamanızı Oluşturun

Bu eğitim, ilk Chrome Uygulamanızı oluşturmanız konusunda size yol gösterir. Chrome Uygulamaları uzantılara benzer bir şekilde yapılandırılmıştır. Böylece mevcut geliştiriciler, manifest ve sunum yöntemlerini tanırlar. İşiniz bittiğinde, uygulamanızı publish için yalnızca kodunuzun ve öğelerinizin bir zip dosyasını oluşturmanız gerekir.

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

  • Manifest, Chrome'a uygulamanız, uygulamanızın ne olduğu, nasıl başlatılacağı ve gerektirdiği ek izinler hakkında bilgi verir.
  • Arka plan komut dosyası, uygulama yaşam döngüsünü yönetmekten sorumlu etkinlik sayfasını oluşturmak için kullanılır.
  • Tüm kod Chrome uygulaması paketine eklenmelidir. Bunlara HTML, JS, CSS ve Native Client modülleri dahildir.
  • Tüm simgeler ve diğer öğeler de pakete dahil edilmelidir.

1. Adım: Manifest dosyasını oluşturun

Önce manifest.json dosyanızı oluşturun (Formats: Manifest Files bu manifesti ayrıntılı olarak açıklar):

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

2. Adım: Arka plan komut dosyasını oluşturun

Ardından, background.js adında aşağıdaki içeriğe sahip yeni bir dosya oluşturun:

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

Yukarıdaki örnek kodda, kullanıcı uygulamayı başlattığında onLaunched etkinliği tetiklenir. Ardından hemen, uygulama için belirtilen genişlik ve yükseklikte bir pencere açılır. Arka plan komut dosyanız ek dinleyiciler, pencereler, yayın mesajları ve başlatma verileri içerebilir. Bunların tümü, uygulamayı yönetmek için etkinlik sayfası tarafından kullanılır.

3. Adım: Bir pencere sayfası oluşturun

window.html dosyanızı oluşturun:

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

4. Adım: Simgeleri oluşturun

Bu simgeleri uygulama klasörünüze kopyalayın:

5. Adım: Uygulamanızı kullanıma sunun

İşaretleri etkinleştir

Chrome Uygulamaları API'lerinin birçoğu hâlâ deneysel aşamada olduğundan deneysel API'ları deneyebilmek için etkinleştirmeniz gerekir:

  • chrome://flags sayfasına gidin.
  • "Deneysel Uzantı API'ları"nı bulun ve "Etkinleştir" bağlantısını tıklayın.
  • Chrome'u yeniden başlatın.

Uygulamanızı yükleyin

Uygulamanızı yüklemek için Chrome ayarları simgesini tıklayıp Araçlar > Uzantılar'ı seçerek uygulama ve uzantı yönetimi sayfasını açın.

Geliştirici modu onay kutusunun işaretli olduğundan emin olun.

Paketlenmemiş uzantı yükle düğmesini tıklayın, uygulamanızın klasörüne gidin ve Tamam'ı tıklayın.

Yeni sekme aç ve başlat

Uygulamanızı yükledikten sonra Yeni Sekme sayfası açın ve yeni uygulama simgenizi tıklayın.

Veya komut satırından yükleyin ve başlatın

Chrome'a aşağıdaki komut satırı seçenekleri, yinelemenizi yapmanıza yardımcı olabilir:

  • --load-and-launch-app=/path/to/app/, paketlenmemiş uygulamayı verilen yoldan yükler ve başlatır. Uygulama zaten çalışıyorsa güncellenmiş içerikle yeniden yüklenir.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll, Chrome'da yüklü olan bir uygulamayı başlatır. Önceden çalışan uygulamaları yeniden başlatmaz, ancak yeni uygulamayı güncellenmiş içerikle başlatır.