Google Chrome eklenti geliştirme
Google Chrome’un birçoğumuz için favori internet tarayıcısı olduğu söylenebilir. Özellikle birçok platformda var olmasıyla, sağladığı senkronize özellikleriyle gönlümüzü fethetmiş durumda. Ayrıca web sayfalarını çok hızlı şekilde yorumlaması, ve bir sürü işlevsel eklenti mağazasıyla da isteklerimize hitap eden bir tarayıcı olmuş durumda.
Şuan bahsedeceklerim ise, Chrome’un geliştiriciler için sağladığı muazzam bir imkan, “Paketlenmemiş Uzantı” yükleme özelliği. Bu özellikle, olmaz ama, mağazada bulamadığınız bir eklentiyi bizzat kendiniz geliştirip, Chrome’a entegre edebilir, gönül rahatlığıyla da kullanabilirsiniz.
Neden kendi eklentimi geliştirmeliyim?
Ben şahsen insanların daha iyi araçlar kullanıp, iş performanslarını arttırmalarını istemişimdir. Kullandığımız programlar bize yardım etmeli, yani basit programlarla savaşmak zorunda kalmamalıyız. Üstelik en sevdiğiniz tarayıcınız için eklenti geliştirmek sadece size değil, bu yolda kendi istediği şekilde tarayıcıya şekil vermek isteyen diğer yazılımcı arkadaşlara da yardımcı olacaktır. Daha önce geliştirdiğiniz, ve başarıyla Chrome’da çalıştırdığınız eklentilerinizi, arkadaşlarınızla paylaşabilir, Chrome’un bu devasa özelliğini yaymada yardımcı olabilirsiniz.
Eklenti geliştirmek ve test etmek
Chrome’da eklenti geliştirip, onu test etmek için, Chrome’un eklenti mağazasına, webstore’a yüklemek zorunda değiliz. Tek yapmamız gereken, aşağıdaki adresi Chrome adres çubuğuna girmek (veya Ayarlar > Uzantılar menüsü kullanılabilir), ve “Geliştirici modunu” etkinleştirmek.
chrome://extensions
Evet… Artık gördüğünüz gibi çok basit şekilde Chrome’u geliştirici moduna soktuk. Böylece eklentilerimizi Chrome’a yükleyebileceğiz!
Görsel / Mimari
Yukarıda çok basit bir mimari yapıyı görebilirsiniz. Ama kişisel olarak, sadece bu resimden, neyin ne işe yaradığını anlamanın çok zor olduğunu düşünüyorum. O zaman her bir başlığa tek tek bakalım.
1 Manifest.json
Eklentimizin beyni bu dosya olacak. Bu dosya, sadece standart bir JSON nesnesi içerecek. Örnek vermek gerekirse:
{
"name": "BenimEklentim",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_title": "Başlığım",
"default_popup": "icerik.html"
}
}Yukarıdaki JSON nesnesinin içindeki name, version, manifest_version gibi bazı anahtar değerleri mecburidir.
“name” değerine, eklentinizin başlığını; “version” değerine eklentinizin sürümünü girmelisiniz. “manifest_version” değeri ise Chrome’un bu JSON nesnesini algılayabilmesi için kullanacağı çözümleyiciyi (parser) belirler. Şuan için bu yazıda kullandığımız “manifest_version”, 2’dir. Bu yüzden bu değerin 2 olarak kalması gerekmekte.
Bu JSON nesnesi, istediğiniz (fazladan) anahtar değerlerini atamanıza imkan tanır. Örneğin “eklenti_id” gibi anahtar değeri atayıp, bunu dilerseniz eklentinizin içerisinde kullanabilirsiniz.
2 Arkaplan yazılımları
Tahmin edilebileceği gibi her eklenti, kullanıcıya direk olarak göstermediği bazı işlemlerini gerçekleştirdiği arkaplan yazılımlarına sahiptir. Chrome içinse, temelde iki tür arkaplan yazılımı türü var: sabit ve işlevsel. Sabit arkaplan yazılımları her daim etkindir. İşlevsel yazılımlar ise sadece gerektiğinde etkindir. Google ise resmi olarak işlevsel yazılımların kullanılmasını öneriyor çünkü bu tip yazılımlar, eklentinin Chrome’un performasını düşürmesine izin vermiyor. İşlevsel yazılımlar, sadece gerektiğinde etkin olduğundan, daha az bellek tüketiyor. Ayrıca eklentinizin yapacağı tüm işlemlerin başlatıcısını da bu tip yazılımların içerisine koyabileceğinizi hatırlatmak isterim.
Arkaplan yazılımlarımızı manifest.json dosyamızdaki JSON nesnesine şu şekilde tanımlayacağız:
"background": {
"scripts": ["arkaplan.js"],
"persistent": false/true
}Tahmin edilebileceği gibi “persistent” değeri “false” atandığında, arkaplan.js işlevsel yazılıma dönecek ve sadece ihtiyaç olduğunda etkinleşecektir; ama “true” atandığındaysa, sabit yazılım türüne dönecek ve 7/24 etkin kalacaktır.
3 İçeriksel yazılımlar
If you need access to the current page's DOM, then you have to use a content script. The code is run within the context of the current web page, which means that it will be executed with every refresh. To add such a script, use the following syntax.
Daha önce bu şekilde dinamik sayfa eklentileriyle uğraşanınız olmuşsa iyi bilir: DOM. DOM, sayfanın tam o anki HTML etiketlerinin barındığı bir yapıdır. Eklenti oluştururken de, elbette aktif olarak görüntülenen sayfanın HTML olarak içeriğinde değişiklik yapmak isteyeceğiz. Örneğin Google ana sayfasındaki “Ara” ve “Şanslı hissediyorum” düğmelerinden birisini kaldırmak istersek, DOM aracılığıyla bu düğmeleri belirtip sayfadan kaldıracağız.
Ayrıca içeriksel yazılımlar, anlık sayfa içeriği üzerinde değişiklik yaptığı için, bu sayfalar, sadece bu eklentiye sahip kişilerde değişecektir; ve sayfa her yenilendiğindeyse, eklenti tekrar tekrar bu sayfanın içeriğini değiştirmeye çalışacaktır.
Bu tür bir yazılım eklemek için kullanacağımız kodlar ise şu şekilde, yine manifest.json’a:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["icerik.js"]
}
]Bu koddaki “matches” değeri “*” joker karakteriyle sadece sizin istediğiniz sayfalarda bu yazılımların çalıştırılmasına izin verir. Örneğin yukarıda “http” ve “https” protokolü üzerindeki tüm web sayfalarında “içerik.js” yazılımı çalışacaktır.
Örneğin Facebook’taki sohbet kutusunun rengini değiştirecek “facebook_sohbet_renk.js” dosyasını sadece facebookta çalıştırmak istersek “http://*.facebook.com/*” ve “https://*.facebook.com/*” değerlerini atamamız gerekecek.
“matches” değeriyle daha fazla bilgi almak için: https://developer.chrome.com/extensions/match_patterns.html (ingilizce)
4 Kullanıcı Arayüzü
Aslında eklentiniz için bir arayüz oluşturmanın, bir sürü yolu var. İşte kullanacağımız 5'i:
4.1 Tarayıcı İşlemleri “browser_action”
Adres: https://developer.chrome.com/extensions/browserAction
Birçok geliştirici eklentilerini oluşturmak için JSON nesnesinin “browser_action” anahtarını kullanıyor. Bir kez bu anahtara değer atandığında, eklentinizi temsil eden bir ikon Chrome’un sağ üst tarafında adres çubuğunun sağında yerini alır. Kullanıcılarsa bu ikona tıklayarak, sizin belirlediğiniz bir HTML içeriğe erişir. Aşağıdaki resimde bir zamanlar Chrome’un vazgeçilmezimiz olan “ZenMate VPN” eklentisinin ikonunu görebilirsiniz:
Böyle bir ikonu belirlemek için manifest.json dosyamızda, daha önce de söylediğim gibi, “browser_action” anahtarına değer atayacağız:
"browser_action": {
"default_icon": {
"16": "icons/16x16.png",
"32": "icons/32x32.png"
},
"default_title": "Deneme ikon başlığı",
"default_popup": "ekran.html"
}“default_icon” kısmında öncelikle ikonun boyutunu belirten içeriği giriyoruz, daha sonraysa bu boyutlara uygun ikonun adresini. İkona tıklandığındaysa “ekran.html” adresli ufak bir pencere (popup) açılacak, tarayıcı sekmesi şeklinde değil.
Eğer söylememişsem, şimdi söylüyorum dosyalarınız manifest.json dosyasıyla aynı klasörde yer almalı. Örneğin, yukarıdaki “icons/16x16.png” dosyası “icons” klasöründe yer alıyor. “icons” klasörüyse, manifest.json dosyasıyla aynı klasörde, örneğin:
4.2 Sayfa İşlemleri “page_action”
Adres: https://developer.chrome.com/extensions/pageAction
“page_action” anahtar değeri de tıpkı “browser_action” gibi bir işleve sahiptir, ayrıldıkları tek noktaysa ikonunuzun adres çubuğu içerisinde, sadece eşleşen sayfalarda görülmesini sağlaması. Aşağıda gördüğünüz ise RSS takibini sağlayan ikonumuz, bildiğiniz gibi sadece RSS-feed sağlayan sayfalarda görünür. Çoğu blog sayfasında bulunur mesela:
"page_action ": {
"default_icon": {
"16": "icons/16x16.png",
"32": "icons/32x32.png"
},
"default_title": "Deneme iç-ikon başlığı",
"default_popup": "ekran2.html"
}Tamamen aynı kodlarla aynı işlemi yaptırabiliyoruz. İkona tıklandığında “ekran2.html” adresli ufak bir pencere (popup) açılacak, tarayıcı sekmesi şeklinde değil.
Ayrıca “browser_action” ikonlarının aksine, “page_action” ikonlarında etiket değeri (badge veya rozet dediğimiz) yoktur.
4.3 Geliştirici Araçları
Adres: https://developer.chrome.com/extensions/devtools
Bildiğiniz gibi Chrome’u zamanında üç-beş adım öne geçiren özelliği, muazzam şekilde sunduğu geliştirici araçları özelliğidir (hani zamanında e-Okul notlarınızı değiştirmek için “Öğeyi Denetle” yapıyordunuz da çıkıyordu ya altta bir pencere, hah, o işte). Tam olarak, eklentiler için bu özelliği kullanmasam da, hatta tam olarak anlamamışsam da, bu konuyu bir başlık olarak vermek istedim. Sanırım adblock ikonunun üzerine sağ tıkladığımızda “Pop-up’ı incele” seçeneği için kullanılıyor… Mecburi bir şey mi? Hayır, ancak şu adreste çok daha detaylı bir incelemesini, bizzat Google’dan öğrenebilirsiniz: https://developer.chrome.com/extensions/devtools
Şuan içinse, boş bir HTML sayfası oluşturucaz (devtools.html) ve içerisine devtools.js dosyasını aktarıcaz, içi şöyle olacak:
<script></script>4.4 “Omnibox”
Adres: https://developer.chrome.com/extensions/omnibox
İşte... Diğer bir güzellik daha. Chrome’un nimetlerin ne kadar bahsetsek azdır. Chrome’un çoğu nimetinden haberi olanlar bilir zaten, hani youtube yazıp Tab tuşuna basarız da, artık adres çubuğunda yazdığımız şeyler Google’da (varsayılan arama motorunuzda) aranmaz da youtube’da aranır ya, işte “omnibox” anahtar değeri de eklentimiz için bu özelliği sağlıyor. Bir anahtar kelime belirleyip, isteğe bağlı olarak ufak bir ikon atıyoruz ve adres çubuğumuza anahtar değer girilip Tab’a basıldığında eklentimiz içinde arama yapılmasına imkan tanıyoruz.
Hemen manifest.json’a eklememiz gereken kodları görelim:
"omnibox": { "keyword": "eklentim” },
"icons": {
"16": "icons/16x16.png"
}Yukarıda “omnibox/keyword” anahtarına bir anahtar kelime atadık. Bu kelime girilip Tab’a basıldığında, istediğimiz ortamda arama yaptıracağız! İşte, ben denedim, görseller:
Boş halde:
Anahtar kelimemi yazıp Tab tuşuma bastım
Ve ta da…
Daha da bitmedi!!! Şimdiyse bu aramamızda öneriler verelim, ve “Enter’a” basıldığında ne olacak onu belirleyelim:
// Burada “oneri” fonksiyonuna önerilerimizi gönderiyoruz, unutmayın,
// istediğiniz şekilde düzenleyebilirsiniz
chrome.omnibox.onInputChanged.addListener(function(yazilanlar, oneri) {
oneri([
{content: yazilanlar + " bir", description: "öneri bir"},
{content: yazilanlar + " iki", description: "öneri iki"}
]);
});
// Buradaysa Enter’a basıldığında yapılacakları belirliyoruz
// Ben basit bir “alert” kutusunda ne yazıldığını göstertiyorum!
chrome.omnibox.onInputEntered.addListener(function(yazilanlar) {
alert('Yazdığınız: "' + yazilanlar + '"');
});Şimdi önerilerimizle hiç alakası olmayan rastgele bir şey yazalım, bakalım önerilerimiz gelecek mi:
Şimdi Enter’a basıp ne olacağını görelim, alert kutusu gelmesi lazım:
Tebrikler, Başarılı!!!
4.5 Chrome sayfalarını değiştirmek
İşte muazzam bir başka özellik! Chrome’un varsayılan sayfalarını (geçmiş, yer işaretleri, yeni sekme sayfası vs..) kendi sayfalarınızla değiştirebilirsiniz!!
Yine aşağıdaki kodu, JSON nesnemize ekliyoruz
"chrome_url_overrides" : {
"newtab": "yenisekme.html",
"bookmarks": "yerisaretleri.html",
"history": "gecmis.html",
}
Dikkat!
Esinlenildi: http://code.tutsplus.com/tutorials/developing-google-chrome-extensions--net-33076
------------------------------
Örnek Eklenti
Örnek eklenti dosyalarını şuradan indirebilirsiniz:
Dropbox:
https://www.dropbox.com/s/nfwyhrdqrvvyvn5/eklentim.zip?dl=0
------------------------------
1 WMAracı Facebook sayfasında paylaşılabilir mi acaba :P
2 Konuşma diliyle yazdığım bölümler var. Kasıtlı olarak düzeltmiyorum. Rahatsız olan arkadaşlar varsa da özürlerimi iletiyorum. İyi günler
------------------------------
Tekrar okuduğumda, anlaşılmasında zorluk yaşanabilecek, veya yetersiz olduğunu düşündüğüm kısımların dökümanları:
1 İşlevsel arkaplan yazılımları: https://developer.chrome.com/extensions/event_pages
2 Eklentinizi yüklerken, dosyalarınızın bulunduğu klasörü seçip yükleyeceksiniz. Örneğin "eklentim" klasörünün içine manifest.json ve diğer dosyalarımızı attıysak, "Paketlenmemiş Uzantı yükle" tuşuna basıldığında, bu klasörü seçmeliyiz.
------------------------------
Yardım istemekten çekinmeyin, ben de yeniyim bu konuda, beraber öğreniriz :)
