Önceki dersimizde temel olarak üzerinde çalışacağımız yapıların neye benzediğini anladıktan sonra, geliştirme aşamasına bir adım atabiliriz. İlk olarak, önceki derste belirttiğimiz üzere bilgisayarımızda Google Chrome’u kurduktan sonra, masaüstümüze project adında bir klasör oluşturuyoruz.
Burası, uzantılarımızın kaynak kodlarının bulunacağı klasör olacak. Önümüzdeki bölümde, adım adım bir uzantının omurgalarını oluşturuyor olacağız.
Uzantı Terminolojisi:
manifest.json
manifest.json, bu ismi kullanmak zorunda olduğunuz tek dosya olmakla beraber, geliştirdiğimiz uzantının kimliğini taşıyan dosyadır diyebiliriz. Bu dosya, doğrudan bu isme sahip olmalı ve doğrudan project klasörünün içinde olmalıdır, project klasörünün içinde bulunan başka bir klasörde olamaz, çünkü bu dosya, doğruda root(kök) dizinde bulunmalıdır. İçerisinde bulunan veriler uzantı açısından kritik öneme sahip olsa da, aslında gayet basit bir temele sahiptir. Hadi bir adet manifest.json dosyası oluşturup giriş yapalım.
Bunun için, Visual Studio Code editöründen project klasörüne erişin, sol tarafta bulunan Explorer bölümüne sağ tıklayıp Yeni Dosya / New File ‘a tıklayıp, isim olarak manifest.json yazın.
Dosyanın içeriği sağ tarafta karşınıza çıkacaktır, çıkmazsa yine Explorer bölümünden dosyanın üzerine çift tıklayarak sağ tarafta dosyayı açabilirsiniz.
Gördüğünüz gibi dosyamızın içi boş, şimdi en temel kodları yazalım.
{
“manifest_version”: 3,
“name”: “Siber Otag”,
“version”: “1.0.0”,
“description”: “Bu bölüm uzantının açıklama bölümüdür.”,
“icons”: {
“128”: “images/icon-128.png”
}
}
İnceleyelim:
JSON kod blokları, { } olarak gözüken burgulu parantez(curly bracket) arasına yazılır. Bu durumda, ilk satırda açılışımızı yapmış oluyoruz. İkinci satırda, manifest dosyamızın versiyonu yazıyor. Kafanızın karışmasına hiç gerek yok, zaten 3’den öncekiler desteklenmiyor ve henüz daha yenisi de çıkmadı. Yani basitçe 3 yazıp geçiyoruz. Name kısmı tabi ki isim için ayrılan alan.
Version kısmı tamamen sizin eklentinizin versiyonunu yazmanız için, isterseniz 1.0.0 veya 1.0 yazabilirsiniz, şimdilik aşırı önem arz etmiyor.
Description, açıklama anlamına geliyor, basitçe eklentinizin ne işe yaradığını tanımlamanız için.
İcons kısmı, uzantımızın ikonları için, uzantımız tamamlandığında ve markete eklenme sürecine geldiğinde 16×16, 32×32, 48×48 ,128×128 genişliklerinde ikonu eklememiz gerekli olabilir ancak şimdilik geliştirme aşamasında kodumuzda sadece 128×128 ikon bekleyen kodu tutuyoruz. İkon eklemeden devam edelim.
Bu dosyada ayrıca, dikkat etmeniz gereken bir önemli nokta ise virgüllerin kullanımıdır. Gördüğünüz üzere, iç içe kod bloklarında ve aslında bütün kod bloklarında, kapanan kod bloğundan sonra gelen başka bir kod bloğu varsa kapanışın yanına virgül ekleniyor. Eğer kapanıştan sonra başka bir blok gelmeden virgül eklerseniz hata alacaksınız ve uzantı çalışmayabilir.
Şuanda, çalışmaya hazır bir uzantımız var, hadi bunu tarayıcımıza ekleyelim. İlk önce tarayıcımızda Geliştirici Modu’nu aktif etmemiz gerekecek. Bunun için, Chrome’u açın ve sağ üstte bulunan üç noktayı kullanarak Uzantılar kısmnına gelin. Sağ üstte bulunan Geliştirici Modu’nu aktif edin. Şimdi yapmamız gereken, sol üstte bulunan Paketlenmemiş öğe yükle butonuna basıp project klasörümüzü seçmek.
Bu aşamaya kadar geldiyseniz, bir hata almanız gerekmekte. Bu hata, ikon eklemediğimiz için oldu ve bunun için editörümüze geri dönüp icons kısmını siliyoruz dosyayı kaydedip Yeniden dene butonuna tıklıyoruz. Üst satırda bulunan virgülü silmeyi unutmayın, kritik önem taşımakta.
Yeniden dene butonuna bastığınızda karşılacağınız ekranda uzantınız hakkında girdiğiniz temel bilgilerin yazması gerekmekte. Eğer olmuyorsa, hataları çözüp adımları tekrar edip, dosyanızı kaydedip tekrar denemelisiniz. Unutmayın, tekrar denemek ve hataları çözmek sizi daha iyi bir yazılım geliştirici olma yolunda ilerletecektir, pes etmeyin. Hatasız şekilde bu aşamaya kadar geldiyseniz, ilk uzantınızı tarayıcınıza eklediniz demektir. Şimdi üstte bulunan uzantılar butonundan (puzzle logosu) uzantınızı kolay erişim için sabitleyebilir ve tıklayarak çalıştırabilirsiniz.
Tıkladığınızda pek işe yarar şeylerin olmadığını görebilirsiniz, çünkü şuanda uzantımızın sadece kök kodunu yazdık diyebilirim, yani içerisinde asıl fonksiyonları yerine getirecek olan kodlar henüz eklenmedi. İlerleyen yazılarımızda bazı basit fonksiyonlar ekleyerek uzantı geliştirmenin derinliklerine ineceğiz, daha sonraki yazılarımızda ise örnek projeler yaparak daha iyi bir geliştirici olma yolunda ilerleyeceğiz. Bir sonraki yazımda görüşene dek mutlu kalın.
Bölüm Sonu Ödevleri:
- JSON nedir?
- icons kod bloğunu geri ekleyip bir icon yüklemesi yapıp uzantıyı başarılı şekilde çalıştırın.
