Merhaba, Firefox’a eklenti yazmakla ilgili elle tutulur bir Türkçe içerik bulmak çok zor. Genelde olanlar da çok eski oluyor ve yeni teknolojiler içermedikleri için de öğrenmenin hiç bir anlamı kalmıyor. Bu nedenle benim de uzun süredir aklımda bulunan bir konuyu sonunda ele almam gerektiğini düşündüm. Bu yazıda; Mozilla tarafından hazırlanan Firefox Add-on SDK ile, HTML, CSS ve JavaScript kullanılarak nasıl bir eklenti geliştireceğimizi ve bu eklentiyi geliştirirken nasıl bir yol izlememiz gerektiğini anlatmaya çalışacağım.

Yazıda değineceğimiz konu başlıkları:

  • Firefox Add-on SDK nedir ve neden onu kullanıyoruz?
  • Add-on SDK kurulumu
  • Komutlar ve eklenti hiyerarşisi
  • SDK API’leri
  • Basit bir eklenti yapalım
  • Sonuç

Firefox Add-on SDK Nedir ve Neden Onu Kullanıyoruz?

Firefox Add-on SDK bize Firefox’a eklenti geliştirirken yardımcı olan, komut satırı ile çalışan bir yazılım geliştirme kitidir. Firefox Add-on SDK’yı nasıl indireceğimiz konusuna aşağıda değineceğim. Add-on SDK ile yukarıda da bahsettiğim gibi Html, CSS ve Javascript kullanarak eklenti geliştirebiliyoruz. Add-on SDK daha önce Jetpack Project ya da Jetpack SDK olarak adlandırılıyordu fakat artık bu isimle pek anılmıyor. Yine de SDK ile ilgili araştırma yaparken size yardımı dokunabilir. Aklınızın bir köşesinde bulunmasında yarar var.

Peki neden Add-on SDK’yı kullanıyoruz? Onsuz bir eklenti geliştiremez miyiz?

Tabi ki geliştirebiliriz. Fakat Add-on SDK’sının çıkmasının bir nedeni var. O da daha kolay ve anlaşılır bir şekilde eklenti yazabilmek. SDK’dan önce XUL (XML User Interface Language) temelli eklentiler yazabiliyorduk. XUL, Html’e göre anlaşılması biraz daha zor ve düşük seviyeli olduğundan eklenti yazmak çok karmaşık bir hal alabiliyordu. SDK ile Html, CSS ve Javascript çok bilinen diller olduğundan dolayı eklenti geliştirmeyi de kolaylaştırdı. Eğer hala ben zoru seviyorum ve XUL ile eklentiler geliştirmek istiyorum diyorsanız sizi buraya alalım. Ben bu yazımda XUL anlatmayacağım. SDK kurulumu ile devam edebiliriz.

Add-on SDK Kurulumu

Add-on SDK kullanarak eklenti geliştirebilmeniz için ihtiyacınız olanlar:

  • Python 2.5, 2.6 ya da 2.7. Buradaki önemli nokta, Python 3.x versiyonlarının hiçbir platformda desteklenmemesi. Bu nedenle kurulum yaparken Python versiyonunu ona göre seçmeyi unutmayın.
  • Firefox (Doğal olarak :) Versiyon 38 ve üstü tercih edilir)
  • Firefox Add-on SDK’nın kendisi. Firefox 38’den sonrasını kullanıyorsanız, size node temelli jpm’i kullanmanızı tavsiye öneriyorum. Jpm’i nasıl indireceğiniz ile ilgili açıklamaları yazının devamında bulabilirsiniz. Eğer Firefox 38’den önceki bir sürümü kullanıyorsanız cfx’i kullanmanız gerekiyor. cfx SDK’yı tarball ya da zip haliyle buradaki linklerden indirebilirsiniz. Bunlardan sadece birini kurmanız eklenti yazmanız için yeterli. Neden iki adet SDK’nın olduğunu ve bunların farklarını altta anlatmaya çalışacağım.

Jpm ve cfx mi? Nedir bunlar?

Şu anda iki çeşit sdk paketi bulunmakta. Bunlardan biri jpm, diğeri ise cfx. cfx, python ile yazılmış bir sdk, jmp ise node temelli native javascript ile yazılan ve cfx’e göre daha yeni olan bir sdk. jpm aslında hala yapım aşamasında diyebiliriz. Fakat şu anda stabil 1.0 sürümü bulunuyor ve şu anki cfx’den çok da farkı bulunmamakta. Yeniliklere ayak uydurmak açısından eğer Firefox 38’den yüksek bir sürüm kullanıyorsanız jpm’i kullanmanızı öneririm. :) cfx’in nasıl kurulacağına buradaki MDN linkinden bakabilirsiniz biz jpm ile yolumuza devam ediyoruz.

Add-on SDK Kurulumu (jpm)

jpm bir node.js paketi olduğu için node.js’in package manager’ı(npm) tarafından indirilebiliyor. npm node.js ile birlikte gelen bir manager, bu nedenle SDK’yı kurmak istiyorsak öncelikle node.js’i indirmeliyiz. node.js‘i kendi sitesinden indirebilirsiniz.

Node.js kurulumunu bitirdiysek artık SDK kurulumuna geçebiliriz demektir. Bu kısım da aslında gayet basit. komut satırına gelip aşağıdaki satırı yazmamız gerekiyor.

npm install jpm -g

Eğer mac veya linux tabanlı bir işletim sistemi kullanıyorsanız admin (sudo) iznine ihtiyaç duyabilirsiniz. Onun için de aşağıdaki satırı terminale yazmamız gerekmekte:

sudo npm install jpm -g

SDK bir süre sonra sizin yerinize indirip kurulmuş hale geliyor. Jpm’nin doğru indiğini ve çalıştığını kontrol etmek için aşağıdaki gibi kısaca jpm komutunu yazabiliriz:

jpm

Bunu yazdıktan sonra özet ve kullanılabilir komutların listesi karşımıza çıktıysa eğer, jpm düzgün bir şekilde kurulmuş demektir.

Komutlar ve Eklenti Hiyerarşisi

jpm Komutları

jpm’de 6 adet komut bulunmaktadır. Bunlar:

  • jpm init: Bize bir başlangıç noktası olması açısından eklenti iskeletini oluşturur.
  • jpm run: Sizin eklentiniz kurulu bir şekilde olan Firefox ekranı açar.
  • jpm test: Eklentinizin unit testlerini çalıştırır.
  • jpm xpi: Firefox Add-ons’a yüklemek için eklentinizi XPI formatında paketler.
  • jpm post: Eklentinizi XPI formatında paketleyip bir url’e post eder.
  • jpm watchpost: Eklentinizdeki dosyalarda bir değişiklik olup olmadığını kontrol eder. Eğer değişiklik varsa otomatik olarak XPI formatında paketleyip belirli bir url’e post eder.

Eklenti Hiyerarşisi

Eklenti hiyerarşisine geçmeden önce isterseniz bir komut satırı ile klasör oluşturalım sonra o klasöre girip ardından jpm init komutunu yazarak bir eklenti iskeleti oluşturalım.

cd C:\
mkdir ilk-eklentim
cd ilk-eklentim
jpm init

jpm init komutunu yazıp enter’a bastıktan sonra package.json dosyasına eklemek için bize birkaç soru soruyor. Bu sorular sırasıyla:

  • Eklenti başlığı
  • Eklenti adı
  • Versiyon
  • Açıklama
  • Eklentinin başlangıç noktası
  • Yazarın adı
  • Eklentinin yazılacağı engine’ler
  • Son olarak da eklentinin lisans tipi

Dikkat ederseniz bazı soruların yanında parantez içinde varsayılan değerleri gözüküyor. Eğer şimdilik ne vereceğinizi bilmiyorsanız varsayılan değerlerinde bırakabilirsiniz.

Tüm bunları girdikten sonra bize eklentimizin package.json dosyası şu şekilde olacak, kaydedeyim mi diyip altında da dosyanın içeriğini gösteriyor. Biz de bir problem yoksa enter’layıp bu şekilde kaydediyoruz. package.json’ın ne olduğunu daha bilmiyorsanız merak etmeyin. Yazının devamında bahsedeceğim.

Yukarıdaki eklenti kurulumunu yaptıktan sonra eklenti klasörümüze varsayılan olarak bazı dosyalar oluşturuluyor. Hiyerarşik olarak şu şekilde bir görüntüsü oluşmakta:

ilk-eklentim | - index.js | - package.json | - test | - test-index.js

  • package.json: Eklentimiz ile ilgili verileri tutan dosyadır. Bunun sıra eklentimizin Addon Manager’da nasıl sunulacağı ile ilgili verileri de burada tutar. İlk eklentimizi oluştururken sorulan sorular buraya kayıt olmuştu. Uygulamayı yüklerken yazdığımız verileri buradan manuel olarak değiştirebilirsiniz. Daha fazla yazılabilir özelliklerin listesi için package.json MDN sayfasından yardım alabilirsiniz.
  • index.js: Eğer eklentiyi oluşturuken eklentinin başlangıç noktasını boş bıraktıysanız size ana dizine index.js dosyası oluşturulur. Burası sizin eklentinizin çalışmaya başladığı andan itibaren ilk olarak işleneceği Javascript dosyasıdır. Yani eklenti bu Javascript dosyasından giriş yapar. Ana işleri burada halletmemiz gerekiyor. Ya da başka bir dosyada yapıp onu bu dosyaya require edebiliriz.
  • test/test-index.js: Eklentinin unit testleri test klasörü altında yer alır. test-index.js dosyası ise adı üstünde, index.js dosyasının bir unit testi olduğunu gösteriyor. Buraya unit testlerimizi yazacağız.

Yazı dizimizin bu kısmında daha çok Firefox’a eklenti geliştirmekle ilgili teorik şeyleri öğrendik. İkinci kısımda ise ellerimiz biraz daha klavyeye değmeye başlayacak. Kabul ediyorum, teorik ve başlangıç düzeyindeki bilgiler bazen sıkıcı olabiliyor. Ama yazıyı buraya kadar okuyabildiyseniz gayet sabırlı birisiniz demektir :) Yazının ikinci kısmından SDK API’lerine geçip ardından ilk eklentimizi yazmaya başlayacağız. İkinci kısın sizin için daha iyi geçeceğini düşünüyorum. Aynı zamanda yaptığımız örnek projeyi GitHub’a da atacağım. Böylelikle oradan yardım alarak daha rahat öğrenebilirsiniz.

Yazının ikinci kısmı çıktığında yazının en üstüne ve altına link ekleyeceğim. Bu sayfadan ya da bloğun ana sayfasından ikinci kısmı takip edebilirsiniz. Tekrar görüşme üzere, iyi günler.