Opera İçin Eklenti Yapımı

14 Ara 2010 Sal

11. sürümü eklenti desteği ile gelen Opera tarayıcısı için kendi eklentimizi yapıyoruz.

Tarayıcı eklentileri çok popüler, öyle ki bazı kullanıcılar sırf istedikleri eklentilerin başka tarayıcılarda olmaması nedeniyle kullandığı web tarayıcıdan vazgeçemiyor. Bu yazımda biz de eklenti dünyasına giriş yapıyoruz.

Eklenti (Plug-in) Nedir?

Yazılımların standart kurulumunda yer almayan genellikle 3. şahıslar tarafından yazılan küçük uygulamalardır. Eklentiler yazılımlara ek özelliklerde sağlarlar. Örneğin reklam filtresi bulunmayan bir web tarayıcısına eklenti ile bir filtre eklenebilir, müzik programının eklentiler ile farklı formatları oynatması sağlanabilir.

Neden Opera İçin Eklenti?

Opera'nın eklenti desteğine yeni kavuşmuş olması eklenti geliştiricilerinin kendilerini tanıtması için büyük bir avantaj. Şu an resmi sitesinde sadece 195 eklenti indirilmeye sunulmuş durumda. Güzel bir arayüze sahip, kullanışlı bir eklenti yazarak Opera kullanıcılarının gözdesi olmak sizin elinizde.

İlk eklentimiz.

Neler Bilmeliyim?

Şayet bir web geliştirici iseniz JavaScript ile içli dışlısınız demektir. Eklenti yazmak için JavaScript kodlarına aşina olmanız gerekiyor. Arayüz içinse CSS ve HTML şart.

Merhaba Dünya: Ben Bir Opera Eklentisiyim!

Her uygulama geliştirmenin ilk aşaması "Merhaba Dünya" olmuştur. Biz de eklenti dünyasına merhaba diyeceğiz.

Eklenti Dosyaları:

Basit bir eklenti paketinde (.oex dosyası) aşağıdaki dosyalar yer alıyor.

config.xml (eklenti bilgileri)
index.html (anasayfa)
popup.html (eklenti penceresi)
icon.png (18x18 ve 64x64)

İlk olarak bu dosyaları kaydedeceğimiz bir klasör oluşturacağınz. Bilgisayarınızda "merhabadünya" isimli bir klasör açın.

Eklentinin Kalbi: Config.XML

Opera'nın eklentimizi tanıması için config.xml dosyası oluşturup eklenti bilgilerini gireceğinz. Bu bilgilerden bazıları şunlar:

Eklenti Adı
Açıklaması
Yazar, e-postası ve web sitesi
Eklenti Simgesi

Bizim kullanacağımız config.xml dosyasının içeriği şu şekilde olacak:

<?xml version="1.0" encoding="utf-8"?>
    <widget xmlns="http://www.w3.org/ns/widgets" version="1.0">
    <name>Merhaba Dünya</name>
    <description>İlk eklenti çalışmamız.</description>
    <author href="http://www.biltek.info" email="ahmetfx@gmail.com">Ahmet SOYARSLAN</author>
    <icon src="simge_64.png"/>
</widget>

Bu dosyayı oluşturmak için boş bir Not Defteri dosyası açın ve yukardaki içeriği içine kopyalayın. Dosyayı .txt yerine .xml olarak "merhabadünya" klasörüne kaydedin.

Eklenti Simgelerinin Hazırlanması:

Oluşturacağımız eklenti için iki adet simge dosyası hazırlayacağız. Photoshop, Paint veya Flash gibi bir yazılım kullanarak 64x64 piksel boyutlarında boş bir çalışma alanı oluşturun. Simgenin çizimini bitirdikten sonra "simge_64.png" ismiyle çalışma klasörümüze kaydedin. Aynı dosyayı 18x18 piksel boyutlarına küçülterek "simge_18.png" olarak kaydedin. Büyük simge eklentiler sayfasında, küçük simge ise araç çubuğunda gözükecek.

Eklenti Düğmesinin Oluşturulması:

Çalışma klasörümüzde "index.html" isimli boş bir dosya oluşturun. Bu dosyaya aşağıdaki içeriği kopyalayın.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Merhaba Dünya</title>
<meta charset="UTF-8">
<script>
      window.addEventListener( 'load', function(){
     var ToolbarUIItemProperties = {
    disabled: false,
    title: "Merhaba Dünya",
    icon: "simge_18.png",
    popup: {
             href: "pencere.html",
            width: 300,
             height: 150
               },
    }
     theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
      opera.contexts.toolbar.addItem(theButton);
}, false );
</script>
</head>
<body>
</body>
</html>

Bu HTML dosyası eklenti penceresinin (pencere.html) açılması için bir düğme oluşturacak. Düğmenin simgesi "simge_18.png", açılacak pencerenin genişliği 300 piksel, yüksekliği ise 150 piksek olacak. Düğme üzerinde gelindiğinde ise "Merhaba Dünya" yazısı görüntülenecek. Şimdilik bu dosyada değişiklik yapmamıza gerek yok.

Eklenti Penceresinin Oluşturulması:

Çalışma klasörümüzde "pencere.html" isimli boş bir dosya oluşturun. Bu dosyada herhangi bir HTML dosyasında yapabileceğiniz herşeyi yapabilirsiniz. CSS stilleri kullanabilir, resim ekleyebilir, JavaScript kodları çalıştırabilir hatta Jquery, Protoype gibi fonksiyon kütüphanelerini bile çağırabilirsiniz. Biz şimdilik sadece "Merhaba Dünya" diyeceğiz. Bu yüzden içeriğimiz aşağıdaki gibi olacak.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Merhaba Dünya</title>
<meta charset="UTF-8">
<style>
h1 {
text-align:center;
font:bold 16px/53px;
}
body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>

</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Ben bir Opera eklentisiyim.</p>
</body>
</html>

Gördüğnüz gibi basit bir CSS stili de kullandık.

Eklentiyi Test Etme:

Opera tarayıcısını başlatın ve çalışma klasörümüzdeki "config.xml" dosyasını sürükleyip Opera penceresi üzerine bırakın. Yükleme işlemini onayladığınızda eklenti simgemiz araç çubuğunda belirecek ve tıkladığımızda pencere dosyamız gözükecek.

Merhaba Dünya!

Eklenti Üzerindeki Değişiklikler Yapma:

Çalışma klasörümüz içerisindeki dosyalarda değişiklik yaparsanız eklentiyi tekrar kurmanıza gerek yok. Opera menüsünden Extensions->Manage Extensions yolunu izleyin. Açılan pencerede "Merhaba Dünya" eklentisini bulun ve altındaki Reload düğmesine tıklayın. Böylece eklenti dosyalarında yapılan değişiklikleri görebileceksiniz.

Eklentiyi Kapatma ve Kaldırma:

Araç çubuğunda eklenti simgesine sağ tıklayarak ya da Opera menüsünde Extensions->Manage Extensions yolunu izleyerek açılan pencereden eklentinizi kapatabilir veya tamamen kaldırabilirsiniz. Eklentiyi config.xml'i sürükleyerek yüklemiş iseniz merak etmeyin çalışmalarınız silinmeyecektir.

Eklentiyi Dağıtım İçin Paketleme:

Eklenti klasöründeki tüm dosyaları seçerek bir ZIP arşivine ekleyin. Daha sonra .zip olan dosya uzantısını .oex olarak değiştirin. Artık eklentimiz yayınlanmaya ve Opera kullancılarına iletilmeye hazır. Çift tıklayarak yükleyebilir ya da eklentiler sayfasında yer alması için Opera'ya gönderebilirsiniz.

Merhaba Dünya örnek eklentisini indirmek için tıklayın.

Eklenti dünyasına ilk adımı attık. Bir sonraki yazımda daha gelişmiş özelliklere sahip bir eklentinin yapımını anlatacağım. Görüşmek üzere..