Merhaba,

Google Chrome uygulama oluşturulması ile ilgili olarak bir makale yayınlamayı düşündüm. Kendim için uzun süredir yapmayı planladığım app’ı yaptıktan sonra anladım ki Google Chrome  uygulaması yapmak çok ama çok kolay 🙂

Alıntıdır;

Şimdi yukarıda fotoğrafı yer alan uygulamalar oluşturup tarayıcımızda yeni sekme açtığımızda en çok ziyaret ettiğimiz sitelere ulaşabileceğiz. İstediğimiz kadar site için bu şekilde uygulama oluşturabiliriz.

İlk olarak bir adet üzerinde değişiklik yapmanız için dosyaları şu adresten indirin.

İndirdiğiniz dosyanın içindeki;

_locales

128.png

manifest.json

Dosyalarını yeni bir klasör açıp içine çıkartın.

Ardından manifest.json dosyasını notepad ya da herhangi bir metin editörü ile açın. Açtığınızda içerisindeki kodlar şöyledir:

{
"name": "__MSG_appName__",
 "description":"__MSG_appDesc__",
 "default_locale": "en",
 "manifest_version": 2,

 "version": "0.0.1",
 "permissions": [
 "notifications"
 ],
 "icons": { "128": "128.png" },
 "app": {
 "launch": {
 "container": "tab",
 "web_url": "http://www.youtube.com/"
 },
 "urls": [
 "http://www.youtube.com/"
 ]
 }
}

Bu kodlarda değişiklik yapacağımız yer web_url kısmında yer alan Youtube adresidir. Burada  http://www.youtube.com/ yerine hangi siteye uygulama yapacaksanız o sitenin adresini verebilirsiniz. Aynı şekilde en alttaki YouTube adresini de değiştirin. Mesela twitter için yapıyorsak kodlar şöyle olacaktır:

 
{
"name": "__MSG_appName__",
 "description":"__MSG_appDesc__",
 "default_locale": "en",
 "manifest_version": 2,

 "version": "0.0.1",
 "permissions": [
 "notifications"
 ],
 "icons": { "128": "128.png" },
 "app": {
 "launch": {
 "container": "tab",
 "web_url": "http://www.twitter.com/"
 },
 "urls": [
 "http://www.twitter.com/"
 ]
 }
}

Bu değişikliği yaptıktan sonra dosyayı kaydedin.

Ardından dosyalarımızın içinden çıkan _locales klasörüne girip içindeki en klasöründeki messages.json dosyasını yine bir metin editörü ile açın.

içindeki kodlar şu şekilde olacaktır:

</pre>
<div id="highlighter_265666">
<pre>{
 "appName": {
 "message": "YouTube",
 "description": "App name."
 },
 "appDesc": {
 "message": "http://www.youtube.com'a bağlantı oluşturur.",
 "description":"App description."
 }
}

Burada message önündeki YouTube bizim uygulamamızın adıdır. Bunu Twitter uygulaması yapıyorsak Twitter yapacağız. Ardından alttaki “http://www.youtube.com’a bağlantı oluşturur.” kısmını dilediğiniz gibi uygulamanızın açıklaması olarak başka bir şey yazabilirsiniz. Mesela Twitter kısayol uygulaması.

Değişiklikten sonra kodumuzun yeni hali şöyle olacaktır:

</pre>
<div id="highlighter_834972">
<pre>{
"appName": {
"message": "Twitter",
"description": "App name."
},
"appDesc": {
"message": "Mesela Twitter kısayol uygulaması.",
"description":"App description."
}
}

Bu işlemden sonra yine dosyamızı kaydediyoruz.

Bir diğer adım dosyalarımızın arasındaki 128.png dosyasını değiştirmek. Bu bizim uygulamamızın ikonu olacaktır. Yani Twitter uygulaması yapıyorsak bir Twitter kuşu için 128×128 boyutunda png uzantılı fotoğrafa ihtiyacımız var.

Bunu Google Görsel aramalardan boyut belirleyerek de arayıp bulabilirsiniz. Ya da en basiti bir kuş resmini Paint’te 128×128 boyutuna getirip ismini 128 yapıp png formatında kaydederek de yapabilirsiniz. Yeni oluşturduğumuz 128.png dosyasını dosyalarınızın arasındaki 128.png ile değiştirin.

Şimdi sıra geldi bu uygulamayı paketlemeye.

Chrome’u başlatın ve sağ üstteki menü ikonundan araçlar/uzantılar a gidin.

En üstte sağda geliştirici modu seçeneğini işaretleyin ve bize yeni butonlar gelecek. Buradan uzantı paketle butonuna tıklayın.

Ardından yeni açılan penceredeki ilk göz at butonundan oluşturduğumuz uygulamanın klasörünü seçin.

ikinci göz at butonunu boş geçin ve Paket uzantısı butonuna tıklayın.

Bu işlemin ardından uygulama klasörümüzün bulunduğu alana yeni iki adet dosya atacaktır. Klasörümüzün ismi ile pem ve crx uzantılı iki dosya gelecektir.

Pem uzantılı dosyayı silin. O bize lazım değil. Ardından Chrome ile uzantılar bölümüne gidin. Tarayıcı penceresini küçültüp crx dosyasını uzantılar sayfasına sürükleyip bırakın.

Bıraktığınızda uygulamayı eklemeniz için sizden onay istenecektir. Ekle dediğinizde yeni uygulamanız uygulamalar bölümüne gidecektir.

not: dilerseniz yazmış olduğunuz kodların çalıp çalışmadığını http://jsonlint.com adresinden deneyebilirsiniz.