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

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.

• Chrome İçin Uzantı (Eklenti) Yapımı: İlk Adım - Manifest.json için okuyun
• Chrome İçin Uzantı Yapımı: Merhaba Dünya! -Yükleme bilgileri ve genel yapı için okuyun.

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.