Mar
29
2014

Google Chrome İçin Eklenti Geliştirme

Bugün sizlere adım adım bir eklentinin nasıl yazılacağını ve bunu google chrome`a nasıl yükleyeceğinizi anlatacağım.Ayrıca da web sayfaları üzerindeki  nesneleri otomatik olarak değiştirebileceğiniz kendim için hazırladığım eklentiden bahsedeceğim.Bu yazıyı okuduktan sonra sizde kendi ihtiyaçlarınıza ve hayalgücünüze göre eklenti geliştirebilirsiniz.

1) Masa üstünde bir klasör oluşturup içerisinde manifest.json dosyasını oluşturalım.
Bu json dosyasını projemizin iskeleti gibi düşünebiliriz.Gerekli tanımlamaları,yetkileri burada yapıyoruz.

manifest.json

{
  "name" : "Temizkod Eklenti",
  "version" : "1.0",
  "manifest_version" : 2,
  "description" : "Bu bir google chrome eklentisidir.",
  "browser_action" : {
    "default_icon" : "icon.png",
    "default_popup" : "temizkod.html"
  }
}

Gördünüz gibi burada eklentimizin adını,versiyonunu,tanımını ve browser_action ile de diğer kullanacağımız dosyaları belirtik.

2)Şimdi de temizkod.html dosyamızı oluşturupp ,içerisine html kodlarımızı yazalım ve kayıt edelim.

temizkod.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Temizkod Eklenti</title>
</head>
<body>
Merhaba Dünya
</body>
</html>

3)Son olarak da dosyamıza Eklentimizi Chrome`a eklediğimizde tarayıcımız üzerinde görünecek icon`u ekliyoruz ve eklentimiz hazır.

Şimdi sıra uygulamayı Chrome`a eklemeye geldi.

Taracıyı aç ->  Araçlar – > Uzantılar ve ardından geliştirici modu clikliyoruz son olarakda paketlenmiş uzantıyı yükle diyoruz. Eklentimizi etkinleştirdiğimizde uygulamamız hazır.
Gördüğünüz gibi bu kadar basit gerisi sizin hayal gücünüze kalmış.

Şimdi de  jquery`ninde yardımıyla kendim için geliştirdiğim bir eklentiden bahsedeceğim.Özelikle gün içerisinde login sayfalarında belirli elementleri(textbox,checkbox,drop-down list,datepicker..) default olarak seçili getirtmek veya alanları dolu olarak getirmek beni tekrarar tekrar aynı işlemleri yapmaktan kurtarmış oldu.

İlk olarak  jquery dosyasını indirerek klasörümüze ekliyoruz.Ardından manifest dosyasına aşağıdaki satırları ekliyoruz ve bu sayede sayfalardaki nesneleri işleyebiliyoruz.

"content_scripts": [ {
"js": [ "jquery.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]

Nesnelerin üzerine gelip sağ click ile ögeyi denetle diyerek onun id,name ve value gibi değerlerini öğrenebiliriz. Ve background.js dosyasında bu nesneleri aşağıdaki gibi işleyebiliriz.

//eğer input type == text ise
$('#id').val('yazmakistediğinizdeğer');

//eğer input type == chexckbox ise
$('input:checkbox[name=nesneninnamedeğeri]').attr('checked',true);
//yada
$('input:checkbox[name=nesneninvaluedeğeri]').attr('checked',true);

//eğer dropdown menu içinden bir neseneyi default olarak seçmek istiyorsanız
$('select option[value="nesneninvaluedeğeri"]').attr("selected",true);

Size yol göstermesi amacıyla hazırladığım küçük bir örneği aşağıdaki linkten indirebilirsiniz.

download

 

Yazar Hakkında

Eren Kiraz 6 adet yazısı bulunuyor..

Bilgisayar Mühendisi

Print Friendly