İ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ı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=9&hl=tr)
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ğichrome://
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ıyı sabitleme](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=9&hl=tr)
Uzantının işlem simgesini (araç çubuğu simgesi) tıklayın; bir pop-up göreceksiniz.
![hello world uzantısı](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=9&hl=tr)
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ı 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 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 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):
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. |