Opera İçin Eklenti Yapımı: CSS Yerleştirme

08 Oca 2011 Cmt

Hazırlayacağınız eklentiler ile web sayfalarını istediğiniz gibi şekillendirin.

Opera eklentileri ile sitelerin stilleri üzerinde değişiklikler yapmak mümkün. Bu örneğimizde hazırlayacağımız eklenti ile Facebook’un sağ kısmındaki bölümü kaldırarak haber akışlarına daha geniş bir alan sağlayacağız.

Haber akışları için daha geniş bir alan.

CSS Stil Dosyasını Hazırlayın:

Eklenti klasörünüzde “stil.css” isimli bir stil dosyası hazırlayın. Bu dosya Facebook sayfası yüklendiğinde sayfaya uygulanacak stilleri barındıracak. Örneğimizde sağ paneli kaldırıp orta alanı genişleteceğinz. Dosya içeriğimiz şöyle olacak:

#rightCol{
display: none;
}
.hasLeftCol .hasRightCol #contentArea {
width: 95%;
}

Arkaplan Kod Dosyasını Hazırlayın:

Eklenti tarayıcıya yüklendiğinden itibaren çalışan dosya olan “index.html” dosyamızın içeriği şu şekilde olacak:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>CSS Yerleştirme</title>
<meta charset="UTF-8">
<script src="background.js"></script>
</head>
<body>
</body>
</html>

Şimdi de sürekli dinlemede kalacak olan JavaScript kodlarını içeren “background.js” dosyasını hazırlayacağız. Bu dosyamızın içeriği şu şekilde olacak:

JavaScript Yerleştirme:

Hazırladığımız CSS dosyasını siteye çağırmak için JavaScript yerleştirme (script injection) yöntemini kullanacağız. Konu ile ilgili olarak buradaki yazıyı okuyabilirsiniz. Eklenti klasörümüzde “includes” klasörü oluşturup içerisine Not Defteri ile “injected.js” isimli bir dosya oluşturuyoruz. Bu dosya sadece Facebook ve alt alan adlarında yüklenecek ve sayfa yüklenmesi bittiğinde çalışacak. Dosya içeriği aşağıdaki gibi olacak:

// ==UserScript==
// @include http://*.facebook.com/*
// @include https://*.facebook.com/*
// ==/UserScript== window.addEventListener('load', function() {

var cssdosyasi = 'stil.css';

if (!cssdosyasi) {
opera.postError('HATA: CSS dosyasi yok');
return;
}

var onCSS = function(event) {
var message = event.data;
if (message.topic === 'CSSYuklendi' && message.data.path === cssdosyasi) {
opera.extension.removeEventListener('message', onCSS, false);

var css = message.data.css;
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
}
} opera.extension.addEventListener('message', onCSS, false);

opera.extension.postMessage({
topic: 'CSSYukle',
data: cssdosyasi
});
}, false);

Bu dosyaların kısaca görevinden bahsedecek olursak, gömülü kodlar (injected script) doğrudan bilgisayardaki dosyalara ulaşamazlar. Bu yüzden dosyalar arasında mesajlaşma yöntemini kullanıyoruz. Facebook sayfası yüklenmesi bittiğinde gömülü kodumuz (injected.js) arkaplanda çalışan kodumuza (background.js) bir mesaj gönderiyor. Arkaplan kodumuz mesajda belirtilen CSS dosyasını bilgisayardan okuyup, gömülü koda bu dosyanın içeriğini iletiyor. İletilen içerik de gömülü kod tarafından siteye uygulanıyor.

İster Geliştiri Modu’nda isterseniz de eklentiyi paketleyerek hemen deneyebilirsiniz. Eklentinin denenmesi hakkında buradaki yazıya göz atabilirsiniz.