Opera İçin Eklenti Yapımı: Veri Alışverişi
Arkaplanda çalışan kodlarımız ile eklenti penceresi arasındaki veri alışverişini gerçekleştiriyoruz.
Opera eklentilerinde JavaScript kodlarını çalıştırabildiğimiz dosyalar arasındaki mesajlaşma ile bir dosyadan diğerine değişken gönderebilir ve alabiliriz. Bu yazımda Merhaba Dünya eklentimizde yer alan index.html ve pencere.html dosyaları arasındaki mesajlaşmayı anlatacağım.
index.html ve pencere.html iletişimi
Niçin Kullanıyoruz?
1. Normalde "index.html" dosyasında tanımladığınız bir değişkene "pencere.html" dosyasında doğrudan ulaşamazsınız. Bu değişkeni Opera'nın özel fonksiyonu ile göndermelisiniz. Gönderilen değişkeni de "pencere.html" dosyasında başka bir fonksiyon ile almalısınız. Bu durumun tersi de geçerli.
2. Eklenti penceresi (pencere.html) sekme bilgilerine doğrudan ulaşamıyor, fakat "index.html" dosyasının böyle bir sınırlaması yok. Bu durumda "index.html" ile aldığımız sekme bilgilerini (adres, başlık vs.) eklenti penceresine gönderebiliriz.
İlk Değişkenimizi Gönderelim:
"index.html" dosyasına ekleyeceğimiz aşağıdaki kod, "mesaj" değişkenini eklenti çalışmaya başladığında yayınlayacak.
<script>
var mesaj="Merhaba";
opera.extension.onconnect=function()
{
opera.extension.broadcastMessage(mesaj)
}
</script>
Buradaki "opera.extension.onconnect" fonksiyonu eklenti yüklendiğinde (eklentiler sayfalar açıldıktan sonra yüklenirler) tetiklenir. Bu fonksiyon ile "mesaj" değişkenine verdiğimiz "Merhaba" değerini yayınlıyoruz. Artık bu değişken diğer dosyalardan alınabilir durumda.
Mesajı Yakalayıp Yazdırmak:
"pencere.html" dosyasına ekleyeceğimiz aşağıdaki kod ile mesaj değişkenini alıp "mesajlar" kimliğine sahip olan <p> etiketi içerisine yazdırıyoruz.
<script>
opera.extension.onmessage=function(event)
{
if(event.data=="Merhaba")
{
document.getElementById('mesajlar').innerHTML+="index.html: "+event.data;
}
}
</script>
Buradaki "opera.extension.onmessage" fonksiyonu eklenti dosyalarının herhangi birinde mesaj yayınlanması ile tetikleniyor.
BODY bölümümüz bu şekilde olabilir. Yukardaki Javascript kodlarınıi BODY etiketinin bitimine yazmalısınız. Aksi takdirde kodlar BODY oluşturulmadan çalışacağından sorun çıkaracaktır.
<body>
<h1>Mesajlar</h1>
<p id="mesajlar"></p>
</body>
Gelen Mesaja Cevap Göndermek:
"pencere.html" dosyasına aldığımız değişken üzerinde işlem yaptıktan sonra tekrar "index.html" dosyasına göndermemiz gerekebilir. Çünkü "index.html" dosyasındaki kodlar sürekli aktif durumdadır. Eklenti penceresindeki kodlar ise sadece pencere açıkken çalıştırılır.
Yukardaki kodu bu şekilde düzenleyerek "Merhaba" iletisine "Nasılsın?" ile cevap veriyoruz.
<script>
var cevap="Nasılsın?";
opera.extension.onmessage=function(event)
{
if(event.data=="Merhaba")
{
document.getElementById('mesajlar').innerHTML+="index.html: "+event.data;
opera.extension.postMessage(cevap);
document.getElementById('mesajlar').innerHTML+="<br/>pencere.html: "+cevap;
}
}
</script>
Cevap mesajını gönderdiğimiz fonksiyon satırı:
opera.extension.postMessage(cevap);
Gönderdiğimiz cevabı "index.html" dosyasında aşağıdaki kod ile alabilir ve kullanabiliriz.
<script>
opera.extension.onmessage=function(event)
{
var gelencevap=event.data;
}
</script>
Tek seferde Birden Fazla Mesaj Göndermek:
Tüm değişkenleri tek bir mesaj içerisine yükleyip göndermek mümkün. Yukarda "Nasılsın?" cevabını index.html dosyamıza almıştık. Şimdi "İyiyim." ve "Teşekkür ederim." mesajlarını eklenti penceresine tek seferde yanıt olarak göndereceğiz.
"index.html" dosyasında gelen cevabı aldığımız fonksiyonu bu şekilde düzenleyin:
<script>
var karsilik1="İyiyim.",karsilik2="Teşekkür ederim.";
opera.extension.onmessage=function(event){
if(event.data=="Nasılsın?")
{
var mesaj = {
mesaj1: karsilik1,
mesaj2: karsilik2
}
opera.extension.broadcastMessage(mesaj);
}
}
</script>
Her iki karşılık mesajını tanımlayıp "mesaj" değişkeni içerisine aktardık. Gelen mesajın "Nasılsın?" olması durumunda "mesaj" değişkeni yayınlanıyor. Artık bu değişkene diğer dosyalardan ulaşabilriz.
Çoklu Mesajların Okunması:
Birden fazla değişkene sahip mesajların okunması "mesaj" içerisindeki değişkenlerin isimleriyle yapılıyor. pencere.html dosyasındaki Javascript kodumuzu aşağıdaki gibi değiştirirdiğimizde "Nasılsın? " sorumuza gelen cevabı ekrana yazdırabiliriz.
<script>
var cevap="Nasılsın?";
opera.extension.onmessage=function(event)
{
if(event.data=="Merhaba")
{
document.getElementById('mesajlar').innerHTML+="index.html: " +event.data;
opera.extension.postMessage(cevap);
document.getElementById('mesajlar').innerHTML +="<br/>pencere.html: "+cevap;
}
else if(event.data.mesaj1!="" && event.data.mesaj2!="")
{
document.getElementById('mesajlar').innerHTML +="<br/>index.html: "+event.data.mesaj1+"<br/>index.html: "+event.data.mesaj2;
}
}
</script>
Görüldüğü gibi çoklu değişkenleri "event.data.mesaj1" ve "event.data.mesaj2" kodları ile aldık ve kullandık.
Artık haberleşme eklentimizi deneyebiliriz. Örnek dosyayı indirmek için tıklayın.
Bir sonraki yazımda verileri kalıcı olarak kaydetmeyi ve tercihler sayfasının oluşturulmasına yer vereceğim. Görüşmek üzere...
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
