Chrome İçin Uzantı (Eklenti) Yapımı: İlk Adım

Google'un gözde tarayıcısı Chrome için uzantı yapımına başlıyoruz.

Aldığım istekler üzerine Opera 11 için geliştirdiğim Facebook Runner eklentisini Chrome'a uyarladım. Bu esnada Chrome uzantıları hakkında da bilgi sahibi oldum. Tıpkı Opera İçin Eklenti Yapımı yazılarımda olduğu gibi şimdi de Chrome İçin Uzantı Yapımı yazılarım başlıyor. Tabi bu Opera için daha fazla yazı yazmayacağım ya da kullanmayı bıraktığım anlamına gelmiyor. Şayet eklentiler ile ilgili iseniz sitemi menüdeki bağlantılar aracılığı ile takip etmenizi öneririm.

Tarayıcılar eklentiler ile daha da güçleniyor.

Uzantı Nedir? Eklenti Nedir?

Önceleri eklenti ismiyle anılan tarayıcı içi uygulamalar Google Chrome ile birlikte uzantı ismini aldı. İkisi de aynı anlamı taşıyor.

Çalışma Klasörünü Oluşturun:

İlk olarak uzantıyı geliştireceğiniz klasörü oluşturun. Örneğin, "merhabadunya" isimli bir klasör ilk uzantımız için uygun olabilir.

Uzantının Kalbi: manifest.json

Opera eklentilerindekii config.xml ile benzerlik gösteren bu dosya uzantımız ile ilgili çeşitli ayarlar ve bilgiler içeriyor. Bunlardan birkaçı:

• Uzantı adı (zorunlu)
• Sürümü (zorunlu)
• Tanımı
• Simgeleri
• Dili
• Seçenekler sayfası adresi
• Arkaplan kod adresi
• Destek ve güncelleme adresleri

Çalışma klasörünüze gidin ve boş bir Not Defteri dosyası oluşturun. İsmini manifest.json olarak değiştirin. Bu dosyanın içeriğini aşağıdaki gibi değiştirin:

{
"name": "Uzantı adı",
"version": "1.0",
"description": "Kısa tanım",
"icons": { "16": "icon_16.png",
                "48": "icon_48.png",
                "128": "icon_128.png" },
"homepage_url": "http://www.desteksayfasi.com/",
"default_locale": "tr",
"browser_action": {
               "default_icon": "icon_16.png",
               "name": "Uzantı adı",
                "popup": "popup.html"
},
"background_page": "index.html",
"options_page": "options.html"
}

Şimdi bu dosyadaki bazı önemli satırlara ve kullanımlarına değinelim.

"icons": { ... }

Uzantının simgelerinin adresleri burada belirtiliyor.  Üç simgenin de ayrı ayrı kullanıldığı yerler var:

• 16x16 piksellik simge uzantı ayarlarında sekmede gözüküyor.
• 48x48 piksellik simge uzantı yönetimi ekranında gözüküyor
• 128x128 piksellik simge  Chrome Web Store'da ve yükleme esnasında gözüküyor.

"default_locale": "tr"

Uzantı çoklu dil desteğine sahipse varsayılan olarak hangi dilin seçileceğini belirtiyor. Tek dile sahip uzantılarda kullanmaya gerek yok.

"browser_action": {...}

Uzantı bir açılır pencereye sahip olacaksa pencere adresini burada belirtiyoruz. Opera 11 eklentimizde Merhaba Dünya yazısını yazdırdığımız pencere ile aynı. Aynı zamanda pencereyi açmak için düğme simgesini ve düğme üzerine gelindiğinde gözükecek metin de burada belirleniyor.

"background_page": "index.html"

Opera 11 için eklenti geliştirken bahsetmiştim. Penceredeki kodlar sadece pencere açıkken çalışır. Eğer arkaplanda da kod çalıştırmak istiyorsak ayrı bir dosya kullanıyoruz. Bu bölümün kullanım amacı Opera eklentilerinde index.html dosyasının kullanımı ile aynı.

"options_page": "options.html"

Uzantı kullanıcıların özelleştirecebileceği çeşitli seçeneklere sahip olacaksa bu bölümde ayarların değiştirilmesi için hazırladığımız dosyanın adresini veriyoruz.

Daha Fazla Parametre:

Bir uzantıda yer alabilecek temel parametrelerden bahsettim. Şimdi biraz daha detaylara inelim.

"permissions": [ ]

Uzantının erişim izinlerinin ayarlandığı bu parametrenin kullanımı şu şekilde:

"permissions": [
"tabs",
"bookmarks",
"http://*.google.com/",
"unlimitedStorage"
]

• "tabs" : Uzantının Chrome sekmeleriyle iletişime geçebileceğini, sekme açıp kapatabileceği izinlerini verir.
• "bookmarks" : Uzantının sık kullanılanlara erişimini açar.
• "http://*.google.com/" : Örnekte uzantının Google sitesi üzerinde değişiklik yapabilmesine, veri okuyabilmesine izin veriliyor. * joker karakteri sayesinde Google'ın alt alana adlarına da izin verişmiş oluyor.
• "unlimitedStorage" : Uzantının sınırsız bilgi depolamasına izin verir. Kullanılmadığı takdirde bu sınır 5 MB'tır. 

Daha fazla izin seçeneğini görmek için tıklayın.

"update_url"

Eğer uzantıyı Google Web Store yerine farklı bir sunucuda yayınlamak istiyorsanız kullanıcıların güncellemelerden haberlerinin olması için bu parametreyi kullanmalısınız. Kullanım şekli:

"update_url": "http://guncellemebilgisi.xml"

Güncelleme XML dosyaının içerği aşağıdaki gibi olmalıdır.

<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
 <app appid='Uzantı Kimliği (ID)'>
 <updatecheck codebase='http://sunucu/uzanti.crx' version='2.0' />
</app>
</gupdate>

Uzantı yönetim ekranı.

Uzantınızın kimliğini (ID) Chrome'da Araçlar->Uzantılar ekranından öğrenebilirsiniz.

Manifest dosyamızı hazırlayarak Chrome için uzantı yapımına ilk adımımızı attık. Bir sonraki yazımda "Merhaba Dünya: Ben bir Chrome uzantısıyım." uygulamasını gerçekleştireceğiz..