Chrome İçin Uzantı (Eklenti) Yapımı: İlk Adım

26 Ara 2010 Paz 7 yorum

Google'un gözde tarayıcısı Chrome için uzantı yapımına başlıyoruz.

Aldığım istekler üzerine Opera 11 için geliştirdiğim Facebook Runner eklentisini Chrome'a uyarladım. Bu esnada Chrome uzantıları hakkında da bilgi sahibi oldum. Tıpkı Opera İçin Eklenti Yapımı yazılarımda olduğu gibi şimdi de Chrome İçin Uzantı Yapımı yazılarım başlıyor. Tabi bu Opera için daha fazla yazı yazmayacağım ya da kullanmayı bıraktığım anlamına gelmiyor. Şayet eklentiler ile ilgili iseniz sitemi menüdeki bağlantılar aracılığı ile takip etmenizi öneririm.


Tarayıcılar eklentiler ile daha da güçleniyor.

Uzantı Nedir? Eklenti Nedir?

Önceleri eklenti ismiyle anılan tarayıcı içi uygulamalar Google Chrome ile birlikte uzantı ismini aldı. İkisi de aynı anlamı taşıyor.

 

Çalışma Klasörünü Oluşturun:

İlk olarak uzantıyı geliştireceğiniz klasörü oluşturun. Örneğin, "merhabadunya" isimli bir klasör ilk uzantımız için uygun olabilir.

 

Uzantının Kalbi: manifest.json

Opera eklentilerindekii config.xml ile benzerlik gösteren bu dosya uzantımız ile ilgili çeşitli ayarlar ve bilgiler içeriyor. Bunlardan birkaçı:

  • Uzantı adı (zorunlu)
  • Sürümü (zorunlu)
  • Tanımı
  • Simgeleri
  • Dili
  • Seçenekler sayfası adresi
  • Arkaplan kod adresi
  • Destek ve güncelleme adresleri

Çalışma klasörünüze gidin ve boş bir Not Defteri dosyası oluşturun. İsmini manifest.json olarak değiştirin. Bu dosyanın içeriğini aşağıdaki gibi değiştirin:

{
"name": "Uzantı adı",
"version": "1.0",
"description": "Kısa tanım",
"icons": { "16": "icon_16.png",
                "48": "icon_48.png",
                "128": "icon_128.png" },
"homepage_url": "http://www.desteksayfasi.com/",
"default_locale": "tr",
"browser_action": {
               "default_icon": "icon_16.png",
               "name": "Uzantı adı",
                "popup": "popup.html"
},
"background_page": "index.html",
"options_page": "options.html"
}

Şimdi bu dosyadaki bazı önemli satırlara ve kullanımlarına değinelim.

 

"icons": { ... }

Uzantının simgelerinin adresleri burada belirtiliyor.  Üç simgenin de ayrı ayrı kullanıldığı yerler var:

  • 16x16 piksellik simge uzantı ayarlarında sekmede gözüküyor.
  • 48x48 piksellik simge uzantı yönetimi ekranında gözüküyor
  • 128x128 piksellik simge  Chrome Web Store'da ve yükleme esnasında gözüküyor.

 

"default_locale": "tr"

Uzantı çoklu dil desteğine sahipse varsayılan olarak hangi dilin seçileceğini belirtiyor. Tek dile sahip uzantılarda kullanmaya gerek yok.

 

"browser_action": {...}

Uzantı bir açılır pencereye sahip olacaksa pencere adresini burada belirtiyoruz. Opera 11 eklentimizde Merhaba Dünya yazısını yazdırdığımız pencere ile aynı. Aynı zamanda pencereyi açmak için düğme simgesini ve düğme üzerine gelindiğinde gözükecek metin de burada belirleniyor.

 

"background_page": "index.html"

Opera 11 için eklenti geliştirken bahsetmiştim. Penceredeki kodlar sadece pencere açıkken çalışır. Eğer arkaplanda da kod çalıştırmak istiyorsak ayrı bir dosya kullanıyoruz. Bu bölümün kullanım amacı Opera eklentilerinde index.html dosyasının kullanımı ile aynı.

 

"options_page": "options.html"

Uzantı kullanıcıların özelleştirecebileceği çeşitli seçeneklere sahip olacaksa bu bölümde ayarların değiştirilmesi için hazırladığımız dosyanın adresini veriyoruz.

 

Daha Fazla Parametre:

Bir uzantıda yer alabilecek temel parametrelerden bahsettim. Şimdi biraz daha detaylara inelim.

 

"permissions": [ ]

Uzantının erişim izinlerinin ayarlandığı bu parametrenin kullanımı şu şekilde:

"permissions": [
"tabs",
"bookmarks",
"http://*.google.com/",
"unlimitedStorage"
]

  • "tabs" : Uzantının Chrome sekmeleriyle iletişime geçebileceğini, sekme açıp kapatabileceği izinlerini verir.
  • "bookmarks" : Uzantının sık kullanılanlara erişimini açar.
  • "http://*.google.com/" : Örnekte uzantının Google sitesi üzerinde değişiklik yapabilmesine, veri okuyabilmesine izin veriliyor. * joker karakteri sayesinde Google'ın alt alana adlarına da izin verişmiş oluyor.
  • "unlimitedStorage" : Uzantının sınırsız bilgi depolamasına izin verir. Kullanılmadığı takdirde bu sınır 5 MB'tır. 

Daha fazla izin seçeneğini görmek için tıklayın.

 

"update_url"

Eğer uzantıyı Google Web Store yerine farklı bir sunucuda yayınlamak istiyorsanız kullanıcıların güncellemelerden haberlerinin olması için bu parametreyi kullanmalısınız. Kullanım şekli:

"update_url": "http://guncellemebilgisi.xml"

Güncelleme XML dosyaının içerği aşağıdaki gibi olmalıdır.

<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
 <app appid='Uzantı Kimliği (ID)'>
 <updatecheck codebase='http://sunucu/uzanti.crx' version='2.0' />
</app>
</gupdate>


Uzantı yönetim ekranı.

Uzantınızın kimliğini (ID) Chrome'da Araçlar->Uzantılar ekranından öğrenebilirsiniz.

 

Manifest dosyamızı hazırlayarak Chrome için uzantı yapımına ilk adımımızı attık. Bir sonraki yazımda "Merhaba Dünya: Ben bir Chrome uzantısıyım." uygulamasını gerçekleştireceğiz..

64322 kez okundu.

7 Yorum Var

  1. Bayram demiş ki

    Hocam kullandığım manifest bu buna çoklu dil desteğini nasıl eklıcem
    yardımcı olabılırmısınız 10 cıvarı dil eklemek istiyorum manifeste

    {
    "name": "COUNTER-STRIKE-ONLINE 2",
    "description": "http://www.gameover99.com/action/counter-strike-online-2",

    "version": "1",
    "manifest_version": 2,

    "app": {
    "launch": {
    "web_url": "http://www.gameover99.com/action/counter-strike-online-2"
    }
    },
    "icons": {
    "128": "128x128.png"
    },
    "permissions": [
    "unlimitedStorage",
    "notifications"
    ]
    }

    • Ahmet Soyarslan demiş ki

      Uzun süredir eklentiler ile ilgili çalışma yapamadım. Bu sırada da manifest dosyasında birçok içerik yazımı değiştirilmiş/yenilenmiş. Bu yüzden yardımcı olamayacağım.

  2. Onur demiş ki

    Çok güzel paylaşım eline sağlık. Bende uzun süredir chrome uygulamaları yapıyorum fakat diğer dillere çeviri işini bir türlü öğrenemedim yardımcı olur musun?

  3. bulutuzer demiş ki

    Anlatım için teşekkür ederim.Yalnız bir şey öğrenmek istiyorum.Daha bir araştırma yapmadım ama anlatımda arka plan kodlarından bahsediyordun.Acaba arkaplan kodlarında php kullanma imkanı var mı?Yada kısaca php ile chrome eklentisi yapma şansım var mı?

    • Ahmet Soyarslan demiş ki

      PHP sunucu tabanlı bir programlama dili olduğu için kullanamazsınız, aynı şekilde ASP ve ASPX'te. Ama eğer PHP desteğine sahip bir sunucunuz var ise, eklenti içeriğini bu sitede geliştirebilir ve bu içeriği bir IFRAMA kodu ile çağıran basit bir eklenti hazırlayabilirsiniz.

  4. Ersin demiş ki

    2 Aşama nerede?

    • Ahmet Soyarslan demiş ki

      Bir sonraki yazıyı kastediyorsanız:
      http://bilgi.biltek.info/yazilim/chrome/chrome-icin-uzanti-yapimi-merhaba-dunya_y185.html

  5. Berk demiş ki

    videolu anlatın bea :(

  6. Mert demiş ki

    Bide videolu anlatım yapsanız :/

  7. Abdullah demiş ki

    Nerde 2. aşama



Yorum Yazın