G+ OT

Facebook Size Dar Geliyorsa Genişletin

Yazan: ahmetfx | 08 Ocak 2011 | eklenti css Facebook Özelleştirme sitelere css ekleme 610

Facebook size dar mı geliyor, haberleri okuyamıyor musunuz…hiç sıkmayın kendinizi, kolayca genişletin sayfanızı. Nasıl mı?

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:

function CSSYukle(event, cssdosyasi) {
 var req = new XMLHttpRequest();
 req.open('GET', cssdosyasi, false);
 req.send();
 
if (!req.responseText) {
 opera.postError('HATA: Dosya okunamadi ' + cssdosyasi);
 return;
 }
 
event.source.postMessage({
 topic: 'CSSYuklendi',
 data: {
 css: req.responseText,
 path: cssdosyasi
 }
 });
 }
 
function onMessage(event) {
 var message = event.data;
 if (message.topic == 'CSSYukle') {
 var cssdosyasi = message.data;
 CSSYukle(event, cssdosyasi);
 }
 }
 
window.addEventListener('DOMContentLoaded', function() {
 opera.extension.onmessage = onMessage;
 }, false);

 

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.

  • Pingback: Tweets that mention Opera Türkiye | Facebook Size Dar Geliyorsa Genişletin -- Topsy.com

  • http://www.operaturkiye.net agresiff

    Ellerine sağlık :)

  • http://metude.blogspot.com/ metude

    Yine güzel bir yazı…

  • http://www.ahmetsoyarslan.com ahmetfx

    Teşekkürler.

    • http://www.operaturkiye.net zahek

      Eline sağlık.

  • http://www.doguhanfidan.com Doğuhan Fidan

    Merhaba. Küçük bir sorum olacaktı;

    bütün bu dosyaları tek tek nereye atacağımızı belirtmemişsiniz (bazılarını “plugins” isimli klasöre atın demişsiniz ama diğerlerini nereye atacağız?)

    ve eğer ki hepsi “plugins”e atılacaktıysa, doğru yaptım herşeyi, fakat hiçbir değişiklik görmedim. Herhangi bir yanlışım mı var?