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 hata ayıklama

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

Chrome Uygulamalarını tanıyın

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

  • Manifest, uygulamanızın meta bilgilerini belirtir. Manifest, Chrome'a uygulama, nasıl başlatılacağı ve uygulamanın gerektirdiği ek izinler.
  • Arka plan komut dosyası olarak da adlandırılan etkinlik sayfası, uygulamanın ömrünü yönetmekten sorumludur. döngüsünü de takip eder. Arka plan komut dosyası, uygulama penceresinin açılması ve kapatılması.
  • Tüm kod dosyaları Chrome uygulamasında paketlenmelidir. Buna HTML, CSS, JS ve Yerel dahildir Müşteri modülleri.
  • Uygulama simgeleri dahil olmak üzere öğeler de Chrome uygulamasında paketlenmelidir.

Manifest oluşturma

Sık kullandığınız kod/metin düzenleyiciyi 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. Bunu oluşturacaksınız dosyayı açın.

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

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

"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 chrome.app.runtime.onLaunched uygulamanız gerekir 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() yeni bir pencere oluşturur. temel HTML sayfasını (index.html) oluşturun. 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 dinleyiciler, pencereler, yayın mesajları ve başlatma verileri içerebilir. Bunlar, etkinlik sayfası tarafından uygulamayı yönetmek için kullanılır.

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

"Hello World" ifadesini görüntüleyecek basit bir web sayfası oluşturma mesajı ekrana gönderin ve index.html:

<!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ının içine paketlenmiş ilave JavaScript, CSS veya öğeler.

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

Bu PNG'yi, kullanıcıların lansman menüsünde görecekleri uygulama simgesi olarak kullanacaksınız.

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

Artık proje klasörünüzde şu 4 dosya bulunuyor olmalıdır:

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

Chrome uygulamasını geliştirici modunda yükleme

Uygulamanızı hızlı bir şekilde yükleyip başlatmak için geliştirici modunu kullanın. dağıtım paketidir.

  1. Chrome çok amaçlı adres çubuğundan chrome://extensions sayfasına gidin.
  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 dosyayı yüklemek için dosyayı seçin uygulamasını indirin.

Paketlenmemiş uzantıları yükle

Tamamlanmış Hello World uygulamanızı kullanıma sunun

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

1. Adım&#39;dan sonra tamamlanan Hello World uygulaması

Tebrikler, yeni bir Chrome Uygulaması oluşturdunuz.

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

Chrome Geliştirici Araçları'nı kullanarak uygulamanızı sorunsuz bir şekilde inceleyebilir, hata ayıklayabilir, denetleyebilir ve uygulamanızı normal bir web sayfasında yapılır.

Kodunuzda değişiklik yaptıktan ve uygulamanızı yeniden yükledikten sonra (sağ tıklayın > Uygulamayı Yeniden Yükle), Hata olup olmadığını kontrol etmek için Geliştirici Araçları konsolunu kullanın (sağ tıklayın > Öğeyi İncele).

Öğeyi İncele iletişim kutusu

(Arka Plan Sayfasını İncele seçeneğini 3. Adımda alarmlarla ele alacağız.)

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

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

Daha fazla bilgi için

Bu adımda tanıtılan API'lerin bazıları hakkında daha ayrıntılı bilgi için aşağıdaki konulara 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 » seçeneğine gidin