Hello World uzantısı

İlk Hello World uzantınızı oluşturarak Chrome uzantısı geliştirmeyle ilgili temel bilgileri öğrenin.

Genel bakış

Bir "Hello World" örneği oluşturacak, uzantıyı yerel olarak yükleyecek, günlükleri bulabilecek ve diğer önerileri keşfedeceksiniz.

Hello World

Kullanıcı, uzantı araç çubuğu simgesini tıkladığında bu uzantı, "Merhaba Uzantılar"ı görüntüler.

Hello uzantısı
Hello Uzantısı pop-up'ı

Uzantı dosyalarınızı depolamak için yeni bir dizin oluşturarak başlayın. İsterseniz tam kaynak kodu GitHub'dan indirebilirsiniz.

Ardından, bu dizinde manifest.json adlı yeni bir dosya oluşturun. Bu JSON dosyası, uzantının özellikleri ve yapılandırmasını açıklar. Örneğin, çoğu manifest dosyası, Chrome'un uzantının işlem simgesi olarak kullanması gereken resmi ve uzantının işlem simgesi tıklandığında pop-up'ta gösterilecek HTML sayfasını tanımlayan bir "action" anahtarı içerir.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Simgeyi dizininize indirin ve adını "default_icon" anahtarındakiyle eşleşecek şekilde değiştirdiğinizden emin olun.

Pop-up için hello.html adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Uzantı artık, uzantının işlem simgesi (araç çubuğu simgesi) tıklandığında bir pop-up görüntüler. Yerel olarak yükleyerek Chrome'da test edebilirsiniz. Tüm dosyaların kaydedildiğinden emin olun.

Paketlenmemiş bir uzantıyı yükle

Paketlenmemiş bir uzantıyı geliştirici modunda yüklemek için:

  1. Yeni bir sekmeye chrome://extensions yazarak Uzantılar sayfasına gidin. (Tasarım gereği chrome:// URL'ler bağlanabilir değildir.)
    • Alternatif olarak, Uzantılar menüsü bulmaca düğmesini tıklayıp menünün altındaki Uzantıları Yönet'i seçin.
    • Alternatif olarak, Chrome menüsünü tıklayın, fareyle Diğer Araçlar'ın üzerine gelin ve ardından Uzantılar'ı seçin.
  2. Geliştirici modu'nun yanındaki açma/kapatma düğmesini tıklayarak Geliştirici Modu'nu etkinleştirin.
  3. Paketlenmemiş öğe yükle düğmesini tıklayın ve uzantı dizinini seçin.
    Uzantılar sayfası
    Uzantılar sayfası (chrome://extensions)

İşte burada! Uzantı başarıyla yüklendi. Manifest'e hiçbir uzantı simgesi eklenmemişse uzantı için genel bir simge oluşturulur.

Uzantıyı sabitle

Varsayılan olarak, yerel olarak yüklediğinizde uzantı, uzantılar menüsünde (Bulmaca) görüntülenir. Geliştirme sırasında uzantınıza hızlı bir şekilde erişmek için uzantınızı araç çubuğuna sabitleyin.

Uzantıyı sabitleme
Uzantıyı sabitleme

Uzantının işlem simgesini (araç çubuğu simgesi) tıklayın. Bir pop-up görürsünüz.

merhaba dünya uzantısı
Hello World uzantısı

Uzantıyı yeniden yükleyin

Koda geri dönün ve manifest'te uzantının adını "Dünyanın Merhaba Uzantıları!" olarak değiştirin.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

Dosyayı kaydettikten sonra, bu değişikliği tarayıcıda görmek için uzantıyı da yenilemeniz gerekir. Uzantılar sayfasına gidin ve açık/kapalı düğmesinin yanındaki yenile simgesini tıklayın:

Uzantıları yeniden yükleme

Uzantı ne zaman yeniden yüklenmelidir?

Aşağıdaki tabloda, değişiklikleri görmek için hangi bileşenlerin yeniden yüklenmesi gerektiği gösterilmektedir:

Uzantı bileşeni Uzantının yeniden yüklenmesini gerektirir
Manifest Evet
Hizmet çalışanı Evet
İçerik komut dosyaları Evet (ve ana makine sayfası)
Pop-up Hayır
Seçenekler sayfası Hayır
Diğer uzantı HTML sayfaları Hayır

Konsol günlüklerini ve hatalarını bulma

Konsol günlükleri

Geliştirme sırasında tarayıcı konsolu günlüklerine erişerek kodunuzda hata ayıklayabilirsiniz. Bu durumda, pop-up'ın günlüklerini bulacağız. hello.html sitesine komut dosyası etiketi ekleyerek başlayın.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

Bir popup.js dosyası oluşturun ve aşağıdaki kodu ekleyin:

console.log("This is a popup!")

Bu mesajın Console'da günlüğe kaydedildiğini görmek için:

  1. Pop-up'ı açın.
  2. Pop-up'ı sağ tıklayın.
  3. Denetle'yi seçin.
    Pop-up inceleniyor.
    Pop-up denetleniyor.
  4. DevTools'da Konsol paneline gidin.
    Geliştirici Araçları Kod Paneli
    Pop-up'ı inceleme

Hata günlükleri

Şimdi uzantıyı kıralım. Bunu yapmak için popup.js öğesindeki kapanış tırnak işaretini kaldırabiliriz:

console.log("This is a popup!) // ❌ broken code

Uzantılar sayfasına gidin ve pop-up'ı açın. Hatalar düğmesi görünür.

Hata düğmesi içeren uzantılar sayfası

Hata hakkında daha fazla bilgi edinmek için Hatalar düğmesini tıklayın:

Uzantı hatası ayrıntıları

Hizmet çalışanı, seçenekler sayfası ve içerik komut dosyalarında hata ayıklama hakkında daha fazla bilgi edinmek için Uzantılarda hata ayıklama bölümüne bakın.

Uzantı projelerini yapılandırma

Bir uzantı projesini yapılandırmanın birçok yolu vardır ancak tek ön koşul, aşağıdaki örnekte olduğu gibi manifest.json dosyasını uzantının kök dizinine yerleştirmektir:

Bir uzantı klasörünün içeriği: manifest.json, background.js, komut dosyaları klasörü, pop-up klasörü ve görseller klasörü.

TypeScript'i kullanma

VSCode veya Atom gibi bir kod düzenleyici kullanarak geliştirme yapıyorsanız Chrome API'si için otomatik tamamlamadan yararlanmak için chrome-types npm paketini kullanabilirsiniz. Chromium kaynak kodu değiştiğinde bu npm paketi otomatik olarak güncellenir.

🚀 Derlemeye hazır mısınız?

Uzantıyla ilgili öğrenme yolculuğunuza başlamak için aşağıdaki eğitimlerden birini seçin.

Uzantı Öğrenecekleriniz
Komut dosyalarını her sayfada çalıştırma Bir öğeyi her sayfaya otomatik olarak eklemek için.
Etkin sekmeye komut dosyası yerleştirme Uzantı işlemini tıkladıktan sonra geçerli sayfada kod çalıştırmak için.
Sekmeleri yönetme Tarayıcı sekmelerini yöneten bir pop-up oluşturmak için
Hizmet çalışanları ile etkinlikleri yönetme Uzantı hizmet çalışanının etkinlikleri işleme şekli.