Chrome için basit bir extension (uzantı) yapalım

Bugün aktif IP adresimizi gösteren (WAN) bir Chrome eklentisi yapacağız. Adını peşin peşin koydum : Maqas IP Viewer. Tasarım için uğraşabilecek zaman ve imkan olsa biraz uğraşacaktım ama amaç nasıl yapıldığı ile ilgili olduğu içinaçıkcası uğraşmadım. O sebeple beni eleştirmeden önce bunu düşünün.

Yapı çok basit; HTML, CSS ve JavaScript bilmek yeterli, inanın bu şekilde harikalar yaratabilirsiniz ki yaratanları görüyoruz.

Temelde 3 dosyamız var:
#  Gösterimi sağlayacak olan popup.html
#  Uygulamanın bilgi, ayar ve değerlerini yazdığımız manifest.json
#  Eklentiyi gösteren 32x32ikonu  icon.png

Tabi unutulmamalıdırki, popup.html sayfasına harici olarak CSS ve JS dosyalarıda eklenebilir. Bu kişinin yoğurt yemesiyle alakalıdır. JS RSS sınıfı için ben benzerini yapmıştım. Bu uygulamayı hazırlamadan önce hazırlık olarak BURADA da bahsettiğim, droidpark altına hazırladığımız servisi kullanacağım. 

Servis adresini hatırlayalım : http://droidpark.com/whatismyip/

Yapacağımız kabaca şu; popup.html dosyasına iframe ile servisimizi bağlayacağız. Eklenti ile açtığımız sayfada onu göstermesini sağlayacağız. Basit ve etkili. (Bu cümleyi umarım RSS yaparkende söylerim)

popup.html dosyasının kodları en yalın haliyle şöyle; 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Maqas.Net</title>
</head>

<body>
			<iframe id="myframe"
					name="MaqasNet IP Viewer" 
					src="http://droidpark.com/whatismyip/index.php"  
					scrolling="0" ></iframe>
</body>
</html>

manifest.json dosyası;
{
  "name": "Maqas IP Viewer",
  "version": "1.0",
  "description": "MaqasNet IP gösterim eklentisidir.",
  "browser_action": {
	"default_icon": "icon.png",
	"popup":"popup.html"
  },
  
  "permissions": [ "http://www.maqas.net" ]
}

Aslında gayet açık; burada eklentinin ismini, versiyonunu, kısa açıklamasını giriyoruz. Browser tarafında ise göstereceği dosyayı, eklenti ikonunu gösteriyoruz.
 
Sonrasında ise Ayarlar butonundan, Araçlara, oradanda uzantılar geçiyor ve seçiyoruz.

 2012-01-27-m-01.png

Burada eklentimizi test edebilmemize olanak sağlayan bir nokta var . Sağ üst köşede Geliştirici modunu seçtiğinizde açılan alanda Paketlenmemiş Uzantıyı Yükle butonu göreceksiniz.

2012-01-27-m-022.png


Uzantıyı bu noktadan yükledikten sonra eğer fatal bir hata yapmadıysanız ekranda çalıştığını göreceksiniz. 

Uygulamanız son halini aldıktan sonra mutlaka Google'ın Extension alanına atmak isteyeceksiniz. Bunun içinse Google'ın Web mağası adını verdiği ;

https://chrome.google.com/webstore/category/extensions?hl=tr  adresine girip login oluyoruz. Login olduktan sonra sağ üst köşede bulunan ayarlar butonundan Geliştirici Hesap Özetine giriyoruz.

2012-01-27-m-05.png


Bu noktadan sonra Extension'ı eklemek üzere yönergeleri takip ediyoruz. Güzel bir JS RSS sınıfı ile sitenizin son yazılarını bu şekilde uzantı haline getirebilirsiniz. Hatta bu ev ödeviniz olsun.

Saygılarımla
Hakan Müştak '2012

Eklenti Link : https://chrome.google.com/webstore/detail/gahlalegandmpannnoggnelmgpkoanil?hl=tr






0.010468006134 | 3.5