İ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.
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:
- Yeni bir sekmeye
chrome://extensions
yazarak Uzantılar sayfasına gidin. (Tasarım gereğichrome://
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.
- 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.
İş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 () 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ının işlem simgesini (araç çubuğu simgesi) tıklayın. Bir pop-up görürsünüz.
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ı 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:
- Pop-up'ı açın.
- Pop-up'ı sağ tıklayın.
- Denetle'yi seçin.
- DevTools'da Konsol paneline gidin.
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 hakkında daha fazla bilgi edinmek için Hatalar düğmesini tıklayın:
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:
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. |