13 Nisan 2012 Cuma

Chrome'a nasıl uygulama geliştirilir?


Basit bir örnek üzerinden anlatmaya çalışacağım. Örneğim için Ubuntu Linux'umu kullanıyorum. Ancak Windows işletim sistemi kullanıyor olmanız, örnekteki hiç bir detayı değiştirmez. Aynı şekilde uygulayabilirsiniz. Chrome uygulamarı için home dizinim altında chromeExt isminde bir dizin oluşturdum ve örneğimiz için ise testApp isminde bir dizin daha oluşturdum. Chrome'a uygulama geliştirmek için gerekli diğer dosyaları bu dizin altında açıp düzenleyeceğim.

Uygulamamız için minimum gerekli iki adet dosya gerekiyor. Bunun ilki manifest dosyası ki bu dosya bir metin dosyasıdır ve ikincisi uygulamamızın ikon dosyası olan PNG resim dosyamız.

1-)

manifest.json dosyamın içeriği;

{
"name": "Test Uygulaması.",
"description": "Tarif Amacli Chrome Uygulaması",
"version": "1.1",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://---webAdresim---.com/"
],
"launch": {
"web_url": "http://---uygulamamınWebAdresi---"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

2-)

ve 128x128 pixel boyutunda PNG formatında 128.png adında ikon resmim mevcut.

3-)

Chrome web atrayıcımızı açıyoruz ve sağ üst köşede yer alan anahtara tıklayarak menüye erişiyoruz. Burada araçlar (tools) seçeneğinin üzerine geldiğimizde uzantılar (extensions) menüsünü göreceksiniz.


Açılan uzantılar sayfasının en üstünde, geliştirici modu (developer mode) kutucuğu yer almaktadır. Bu kutucuğu işaretlediğinizde;
  1. Paketlenmemiş uzantıyı yükle
    (Load unpacked extension...)
  2. Uzantıyı paketle
    (Pack extension)
  3. Uzantıları şimdi güncelle
    (Update extensions now)
seçenekleri belirecektir. Uygulamanızı sadece kendi Chrome tarayıcınıza yüklemek istiyorsanız ilk seçeneği seçerek sonuca ulaşabilirsiniz. Bu seçeneği tıkladığınızda dosya seçme penceresi (file browser window) belirecektir. Bu pencerede sizden istenen chromeExt dizini altındaki uygulamanızın dizini olan testApp dizinini seçmenizdir. Seçimi yaptığınızda uygulamanız uzantılar listenize eklenecektir. Aynı zamanda Chrome tarayıcınızda yeni bir TAB açtığınızda uygulamanızın ikonunu ve adını da göreceksiniz.

Peki uygulamanız için bir yükleme paketi oluşturmak istiyorsanız. Bu kez, ikinci seçeneği seçip, yine uygulamanızın dizini olan testApp dizinini seçmeniz yeterlidir. chromeExt dizini altına uygulamanız için bir .crx uzaktılı kurulum paketiniz bir de .pem uzantılı anaktar (key) dosyanız oluşturulacaktır. .crx dosyasını bir başka chro tarayıcısının üzerine fare ile sürükleyip bıraktığında yükleme (installation) işleminin başlayacaktır.

.pem dosyasına daha sonra uygulamanız için güncelleme (update) çıkartmak için ihtiyaç duyacaksınız. Bu sebeple saklamanız elzemdir.

Bir hatırlatma,

Uygulamanızı başka insanların kullanımına sunmak için en efektif yöntem CRX dosyanızı bir şekilde dağıtmak ve "Bu dosyayı Chrome tarayıcınıza sürükleyip bırakınız" demek değildir. Bunun için iki yönteminiz daha var.

1-) Chrome uzantılar sayfasından yayınlamak,

Bunun için Google Chrome developer, yani chrome geliştiricisi olarak kayıt olmanız gerekmektedir. Bu işlem için bir defaya mahsus 5 $ bir ücret ödemeniz gerekiyor. Bu ödeme işlemini yaptıktan sonra google chrome developer olarak kaydınızı tamamlayabilirsiniz.

Daha sonra uygulamanız için çeşitli ebatlarda daha ikonlar ve ekran görüntüsü resim dosyalarını hazırlamanı gerekiyor. Ancak bukadarı da yeterli değil. Manifest dosyasında belirtmiş olduğunuz web adresinin de size ait olduğunu ispat gerekiyor. Bunun için google webmaster tools'a sitenizi kayıt etmeniz yeterli. Bu kayıt işleminde google tarafından size bir dosya oluşturulur ve bu dosyayı sitenize yüklemeniz istenir. Yükleme işleminden sonra doğrulama linkine tıklar ve sitenin size ait olduğunu ispatlarsınız. Bu işlemden sonra artık uygulamanız Google Chrome uzantılar sayfasında yerini almaya hazır demektir.

Bütün bunların iki temel faydası var; 1- uyglamanız diğer chrome kullanıcıları tarafından chro uzantılar sayfası üzerinden keşfe hazırdır. uzantılar sayfasının arama özelliği sayesinde diğer kullanıcılar uygulamanızı keşfedebilir ve geniş bir kullanıcı kitlesi yakalayabilirsiniz. 2- Kendi web sayfanızdan yayınlamak için gerekli teknik gereksinimleri yapmak zorunda kalmamış olursunuz.

2-) Uygulamanızı kendi web sayfanızdan yayınlamak için;

Uygulamanızı kendi web sayfanızdan yayınlayabilmeniz için gerekli ilk şart ya sayfanızın yayınlandığı web sunucusunun yönetimi sizde olmalı ve aşağıdaki tarifleri uygulamalısınız, ya da sunucu yöneticisine uygulatabiliyor olmalısınız. Aslında kısaca kendi sunucuzu kullanıyor olmalısınız demek istiyorum.

Bir ziyaretçi sizin web sayfanıza girdiğinde, web sunucusu web içeriğinizi gönderirken bir MIME TYPE kullanır ve bu büyük ihtimal text/html dir. Böyle bir durumda uygulamanız için verilen link'e tıklayan bir ziyaretçi aşağıdaki gibi bir hata alacaktır.


Yukarıdaki hata mesajında da ifade edildiği gibi, sayfanızın content type 'ı (içerik tipi) "application/x-chrome-extension" olmalıdır. (Detaylı bilgi için bknz: http://code.google.com/chrome/extensions/hosting.html)

Bunun için kullandığınız web sunucusunda mime type listenize "application/x-chrome-extension" 'ı da eklemelisiniz. Ve ayrıca uyglamanızı yayınladığınız sayfanın HTML kodlarında kodları arasına "<meta http-equiv="content-type" content="application/x-chrome-extension" />" etiketini eklemelisiniz. Kısacası yayın sayfanızın HTML kodu, aşağıdaki gibi olabilir;

<html>
<head>
<title>Google Chrome Uylaması yayınlama sayfam
</title>
<meta http-equiv="content-type" content="application/x-chrome-extension" />
</head>
<body>
<a href="/chromeExt/testApp.crx">Uygulamamı yüklemek için tıklayınız</a>
</body>
</html>


3 yorum:

  1. eline saglık cok faydalı oldu..teşekkürler

    YanıtlaSil
  2. Hocam Selamlar Bie sorunum var Yardımcı Olabılırmısın bılmem, sorunum chrome manifest ile ilgili, sorun şu.
    Bu menifest ile chrome oyun koyuyorum ancak başkalarının koyduğu oyunlarda dil desteği var benımkınde yok çok aradım am dil desteğini nasıl ekliyeceğimi bulamadım sizin bilginiz varmı acaba manifeste nasıl dil desteği eklerim?
    {
    “name”: “Battle for Slugterra”,
    “description”: “”,
    “version”: “2.10.2″,
    “manifest_version”: 2,
    “app”: {
    “launch”: {
    “web_url”: “http://www.”
    }
    },
    “icons”: {
    “128″: “128×128.png”
    },
    “permissions”: [
    "unlimitedStorage",
    "notifications"
    ]
    }

    YanıtlaSil