Chrome İçin Uzantı Yapımı: Merhaba Dünya!
İlk uzantımızı (eklentimizi) oluşturuyoruz.
Bir önceki yazımda "manifest.json" dosyasını yapısından ve nasıl oluşturacağımızdan bahsetmiştim. Şayet bu dosya hakkında bilmedikleriniz varsa ilk olarak buradaki yazımı okumanızı öneririm.
İlk uzantımız.
İçerisinde uzantıyı geliştireceğiniz, "merhabadunya" isimli bir klasörü oluşturun. Not Defteri kullanarak uzantı bilgilerinin bulunacağı ve çeşitli ayarların yapılabileceğii "manifest.json" dosyamızı burada oluşturun. Şimdilik Merhaba Dünya uzantımızın tercihler sayfası, arkaplanda çalışan kodları vs. olmayacağından bu dosyanın içeriği şu şekilde olacak.
{
"name": "Merhaba Dünya",
"version": "1.0",
"description": "İlk Chrome uzantımız.",
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"browser_action": {
"default_icon": "icon_16.png",
"name": "Merhaba Dünya",
"popup": "pencere.html"
}
}
Burada uzantımızın adını, sürümünü, tanımını, simgelerini, düğmesini ve düğmeye tıklandığında açılacak olan "pencere.html" dosyamızı belirlemiş olduk.
İlk olarak uzantının bulunduğu klasörde üç adet simge dosyası oluşturuyoruz. Simgelerin 16x16, 48x48 ve 128x128 piksel boyutlarında ve PNG formatında olmasına dikkat edin. Simgelerin kullanım alanlarına önceki yazımda değinmiştim.
Uzantı Penceresi:
Çalışma klasörümüzde pencere.html isimli boş bir HTML dosyası oluşturuyoruz. Bu dosyanın içeriği uzantı düğmesine tıklandığında gözükecek.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Merhaba Dünya</title>
<meta charset="UTF-8">
<style>
h1 {
text-align:center;
font:bold 16px/53px;
}
body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Ben bir Chrome uzantısıyım.</p>
</body>
</html>
Bu dosyada normal bir HTML dosyasında kullanabildiğiniz tüm etiketleri, JavaScript kodlarını ve CSS stillerini kullanabilirsiniz.
Uzantının Yüklenmesi:
Chrome özelleştirme düğmesine tıklayın. Menüde Araçlar->Uzantılar yolunu izleyin.
Chrome'un Uzantı Yönetim penceresi.
Açılan Uzantılar ekranında "Paketlenmemiş uzantıyı yükle" düğmesine tıklayın ve "merhabadunya" klasörümüzü bilgisayarınızda bularak seçin. Uzantı yüklenecek ve simgesi araç çubuğundaki yerini alacaktır.
İlk uzantımızı başarıyla yükledik.
Uzantının Paketlenmesi:
Oluşturduğunuz uzantıyı başka kullanıcılarla paylaşmak istiyorsanız paketlemeniz gerekiyor. Chrome uzantıları .CRX olarak paketleniyor.
Uzantılar ekranında "Uzantıyı paketle" düğmesine tıkladıktan sonra çalışma klasörünüzü seçerseniz uzantınız .CRX olarak kaydedilmş olacaktır. Bu dosyayı çalışma klasörünün bir üst klasörü içerisinde görebilirsiniz.
Bir sonraki yazımda arkaplanda kod çalıştırmaya ve dosyalar arasındaki veri alışverişine yer vereceğim.
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
Kodlarda Biraz Değişiklik Oldu Arkadaşlar.
Hata Alanlar Manifest Versiyonundan Dolayı Alıyorlar.
Düzelttiğiniz Takdirde Tıkladığınızda Birşey Acılmıyorsa Sebebi default_popup Olmadığından. Manifest Dosyasını aşağıdaki gibi kullanırsanız bir sıkıntı kalmayacaktır.
{
"name": "Merhaba Dünya",
"version": "1.0",
"description": "İlk Chrome uzantımız.",
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"browser_action": {
"default_icon": "icon_16.png",
"name": "Merhaba Dünya",
"default_popup": "pencere.html"
},
"manifest_version": 2
}
Saygılar iyi Çalışmalar.
Volkan AKBALIK
Bilgi için teşekkürler, yazıyı hazırlayalı epey oldu, eklenti altyapsında değişiklikler meydana gelmiş olabilir.
Resimli anlatsanız tam anlayamadım!
dedeğinizin hepsini yapıyorum yükle diyorum "Could not load extension from falan diye bir yazı çıkıyor.. ne yapmama lazım ??
hocam ben bir sitenin css bilgilerini değiştirmek istiyorum. yani sadece bana farklı gözüksün istiyorum eklentiyi yükledikten sonra. bunu nasıl yapabilirim? userstyle.org var sanırım bununla ilgili. beceremedim bir türlü :(
emeğine sağlık hocam...aslında eklenti yapmak istemiyorum ama benim kullanacağım eklenti tam olarak yok aslında var ama listen.Grooveshark da arama yapıyor engelli olduğu için onun yerine http://retro.grooveshark.com dan arama yapmasını nasıl sağlıyabilirim adresi değiştirmek için crx dosyasını not defterinde açmaya çalıştım ama açılmadı bunu nasıl yapabilirim...
Dosyayı WinRAR ile açmayı deneyin.
face bu yaptıklarından bir haberdar olursA İŞİN YAŞ :D