Chrome İçin Uzantı Yapımı: Kod Çalıştırma

02 Oca 2011 Paz 4 yorum

Uzantılar ile JavaScript kodları çalıştırarak site içeriklerinde değişiklik yapmak mümkün.

Daha önce Opera için anlattığım kod yerleştirme (script injection) konusunu şimdi Chrome için veriyorum. Opera'daki Facebook sponsor reklam engelleyicisinin aynısını Chrome için de hazırlayacağız.


Rahatsız edici reklamlara elveda.

 

Bilmeniz Gerekenler?

Aşağıdaki yazılarıma göz atarak uzantılar hakkında bilgi sahibi olmalısınız.

Bu iki yazıyı okuduktan ve Merhaba Dünya uzantısını oluşturduktan sonra sırayla aşağıdaki adımları gerçekleştiriyoruz.

 

Manifest Dosyasındaki Değişiklikler:

Kodun Facebook sitesine entegre olması ve sitede çalışması için çeşitli izinler vermeliyiz. Yeni "manifest.json" içeriği aşağıdaki şekilde olacak:

{
"name": "Facebook Reklam Engelle",
"version": "1.0",
"description": "Facebook'taki reklamlarını engelleyen uzantımız.",
"icons": { "16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png" },
"browser_action": {
"default_icon": "icon_16.png",
"name": "Facebook Reklam Engelle",
"popup": "pencere.html"
},
"content_scripts": [
{
"matches": ["http://*.facebook.com/*","https://*.facebook.com/*"],
"run_at": "document_end",
"js": ["engelle.js"]
}
],
"permissions": [
"tabs",
"http://*.facebook.com/*",
"https://*.facebook.com/*"
]
}

Şimdi eklediğimiz yeni özelliklere bakalım.

 

İçerik Kodları:

Manifest dosyamıza eklediğimiz aşağıdaki kod, hazırlayacağımız JavaScript dosyasının hangi sitelere, ne zaman entegre edileceğini gösteriyor. 

 "content_scripts": [
{
"matches": ["http://*.facebook.com/*","https://*.facebook.com/*"],
"run_at": "document_end",
"js": ["engelle.js"]
}
],

Aşağıdaki satır kodun Facebook ve alt alan adlarında çalıştırılacağını belirtiyor.

"matches": ["http://*.facebook.com/*","https://*.facebook.com/*"]

Aşağıdaki satır kodun ne zaman çalıştırılacağını gösteriyor. Şu an sayfa yüklemesi bittiğinde çalışacak.

"run_at": "document_end",

Aşağıdaki satır entegre edilecek kod dosyasının ismini gösteriyor.

"js": ["engelle.js"]

 

İzinler:

Manifest dosyamıza eklediğimiz aşağıdaki kod uzantının sekmelere ulaşmasına ve web sayfaları üzerinde değişiklik yapmasına izin veriyor.

"permissions": [
"tabs",
"http://*.facebook.com/*",
"https://*.facebook.com/*"
]

 

JavaScript Dosyası İçeriği:

Reklamları kaldırmaya yarayacak olan "engelle.js" dosyamızın içeriği aşağıdaki gibi olacak:

window.addEventListener( 'load', function()
{
if(document.getElementById("pagelet_netego_ads"))
document.getElementById("pagelet_netego_ads").innerHTML="";
}, false );

Bu dosya diğer uzantı dosyaları ile aynı klasörde olmalıdır.

 

Merhaba Dünya uzantımızda gerekli değişiklikleri yaparak Facebook Reklam Engelleyicimizi hemen deneyebilirsiniz.

15861 kez okundu.

4 Yorum Var

  1. Süleyman demiş ki

    Merhaba ben cromda youtube adresindeki videoyu otamatik yani crome açılınca arka planda çalışmasını istiyorum böyle bir eklenti hazırlarmısınız? Tabiki ücreti karşılıgında slymn.fb.71@hotmail.com cevabınızı bekliyorum.

  2. Onur Akgül demiş ki

    Merhaba Ben Sitem İçin Tema Yapmak İstiyorum Onu Yükleyince Site Değişicek Nasıl Ayarlicam

  3. İsmail Görkem Kara demiş ki

    Dersler çok güzel teşekkürler, sizden ayar sayfası ve arka plan sayfası için de bir ders rica ediyorum.

    • Ahmet Soyarslan demiş ki

      Opera için anlatmıştım, uzun süredir ilgilenmiyorum bu konu ile ama zamanım olursa Chrome için de bir kaç anlatım yapabilirim.

  4. enes demiş ki

    html dosyası istiyor

    pencere.html

    • Ahmet Soyarslan demiş ki

      Merhaba Dünya eklentisi ile ilgili sayfada bu dosyanın nasıl oluşturulacağı ve içeriği yer alıyor.



Yorum Yazın