Bu sayfa, Cloud Translation API ile çevrilmiştir.

Hello World uzantısı

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

Genel Bakış

Bir "Hello World" oluşturacaksınız Örneğin, uzantıyı yerel olarak yükleyin, günlükleri bulun ve diğer önerileri keşfedin.

Merhaba Dünya

Kullanıcı, uzantı araç çubuğu simgesini tıkladığında "Merhaba Uzantılar" ifadesi gösterilir.

Merhaba uzantısı — Hello Extension pop-up'ı

Uzantı dosyalarınızı depolamak için yeni bir dizin oluşturarak başlayın. Dilerseniz, kaynak kodunu GitHub'dan kaldırmalısınız.

Sonra, bu dizinde manifest.json adlı yeni bir dosya oluşturun. Bu JSON dosyası, uzantının özellikler ve yapılandırma. Örneğin çoğu manifest dosyası, şunları içeren bir "action" anahtarı içerir: uzantının işlem simgesi olarak kullanması gereken resmi ve uzantının işlem simgesi tıklandığında.

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

Dizininize simgeyi indirin ve adını "default_icon" anahtarındakilerle eşleşecek şekilde değiştirdiğinizden emin olun.

Pop-up için hello.html adında 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ülüyor. Web sitemiz g.co/newsinitiative/labs üzerinden yerel olarak yükleyerek bunu Chrome'da yapabilirsiniz. Tüm dosyaların kaydedildiğinden emin olun.

Paketlenmemiş bir uzantı yükle

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

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

Uzantılar sayfası (chrome://extensions)

İşte oldu! Uzantı başarıyla yüklendi. Tarayıcıda herhangi bir uzantı simgesi yoksa manifest dosyasında, uzantı için genel bir simge oluşturulur.

Uzantıyı sabitle

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

Uzantının işlem simgesini (araç çubuğu simgesi) tıklayın; bir pop-up göreceksiniz.

hello world uzantısı — Hello World uzantısı

Uzantıyı yeniden yükle

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

{
  "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. Git Uzantılar sayfasına gidin ve açık/kapalı açma/kapatma düğmesinin yanındaki yenileme simgesini tıklayın:

Uzantıyı yeniden yükleme

Uzantı ne zaman yeniden yüklenir?

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üklenmesi gerekiyor
Manifest	Evet
Hizmet çalışanı	Evet
İçerik komut dosyaları	Evet (artı 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. Böyle bir durumda, pop-up'ın günlüklerini bulur. hello.html hesabına bir 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'a kaydedildiğini görmek için:

Pop-up'ı açın.
Pop-up'ı sağ tıklayın.
Denetle'yi seçin.

Bir pop-up inceleniyor.
DevTools'nda Konsol paneline gidin.

Pop-up'ı inceleme

Hata günlükleri

Şimdi uzantıyı bitirelim. Bunun için popup.js içindeki 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 içeren uzantılar sayfası düğmesi

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 Hata ayıklama bölümüne bakın uzantıları.

Uzantı projelerini yapılandırma

Uzatma projelerini yapılandırmanın birçok yolu vardır. Ancak, tek ön koşul manifest.json dosyasını uzantının kök dizininde açın (aşağıdaki örnekte gösterildiği gibi):

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

TypeScript kullanma

VSCode veya Atom gibi bir kod düzenleyici kullanarak geliştirme yapıyorsanız npm paketi chrome-types, Chrome için otomatik tamamlamadan</br> yararlanın API. Chromium kaynak kodu, bu npm paketi otomatik olarak güncellenir anlamına gelir.

🚀 Geliştirmeye hazır mısınız?

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

Uzantı	Öğrenecekleriniz
Her sayfada komut dosyası çalıştırma	Her sayfaya otomatik olarak bir öğe 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.