Nazım Can Altınova

Firefox Eklentisi Nasıl Yazılır? - Kısım 1

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?

Tabii ki geliştirebiliriz. Fakat Add-on SDK’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 ise HTML, CSS ve JavaScript gibi çok bilinen dilleri kullandığı için eklenti geliştirmeyi 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ı ö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 olarak 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ı aşağıda 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; jpm ise Node tabanlı, JavaScript ile yazılmış ve cfx’e göre daha yeni bir SDK. jpm’in aslında hala yapım aşamasında olduğunu söyleyebiliriz. Fakat şu anda stabil 1.0 sürümü bulunuyor ve şu anki cfx’ten çok da farkı yok. 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) ile indirilebiliyor. npm, node.js ile birlikte gelen bir paket yöneticisi, 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 indirilip kurulmuş olacak. jpm’in 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: Eklentinizin kurulu olduğu bir Firefox penceresi 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’ye 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’ye post eder.

Eklenti Hiyerarşisi

Eklenti hiyerarşisine geçmeden önce isterseniz komut satırı ile bir klasör oluşturalım, sonra o klasöre girip 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 eklentimizin package.json dosyasının içeriğini gösterip kaydetmek isteyip istemediğimizi soruyor. Biz de bir problem yoksa Enter’a bası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üzde varsayılan olarak bazı dosyalar oluşturuluyor. Hiyerarşik olarak şu şekilde bir yapı oluşuyor:

ilk-eklentim
| - index.js
| - package.json
| - test
  | - test-index.js
  • package.json: Eklentimiz ile ilgili verileri tutan dosyadır. Bunun yanı sıra eklentimizin Addon Manager’da nasıl sunulacağı ile ilgili verileri de burada tutar. İlk eklentimizi oluştururken sorulan sorular buraya kaydedilmişti. Eklentiyi oluştururken girdiğimiz verileri buradan manuel olarak değiştirebilirsiniz. Yazılabilecek diğer özelliklerin listesi için package.json MDN sayfasından yardım alabilirsiniz.
  • index.js: Eğer eklentiyi oluştururken eklentinin başlangıç noktasını boş bıraktıysanız ana dizinde bir index.js dosyası oluşturulur. Bu dosya, eklentiniz çalışmaya başladığında ilk olarak işlenecek 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ında SDK API’lerine geçip ardından ilk eklentimizi yazmaya başlayacağız. İkinci kısmın sizin için daha keyifli 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üşmek üzere, iyi günler.