Google Chrome’a Eklenti Geliştirme

Günümüzün en popülar tarayıcılarından Google Chrome için gündelik hayatımızda pek çok eklenti kullanıyoruz. Peki ihtiyacımız olduğunda kendi kurguladığımız eklentileri nasıl geliştireceğiz? Size bu aşamalar hakkında bilgi vermeye çalışacağım ve sonunda örnek bir uygulamaya geliştireceğiz.

Öncelikle size faydası dokunacak en temel kaynak Google’ın Chrome için resmi dökümantasyonlarını paylaştığı http://developer.chrome.com/extensions/getstarted.html linkidir. İleri aşamalar için kendinizi buradan yönlendirebilirsiniz.

Bir Chrome eklentisi geliştirmek için gereken ilk şey gerekli yetkileri, isimlendirmeleri ve tanımlamaları yaptığınız manifest.json dosyasıdır. Şimdi küçük bir örneğine göz atalım ve uygulamamızın temellerini de atmış olalım.

Chrome Eklenti Geliştirme - manifest.json

Geliştirmeye çalışacağımız eklenti tarayıcı üzerinde çalışacak yeni bir kopyala/yapıştır sistemi olacak. Temel düzeyden başlayacağımız için yapacağı işlem normalde yaptığınız kopyala yapıştırla aynı olacaktır fakat dilerseniz bunu esnetip AJAX ile kopyaladığınız şeyleri servisler yardımıyla sunucularda depolayabilirsiniz. Sizin hayal gücünüze kalmış.

Yukardaki manifest.json dosyasında “name”, “description” ve “version” tahmin ettiğiniz gibi eklentilerimizin temel bilgileri olacaktır. “permission”lar ise geliştireceğimiz eklenti Temel JavaScript işlemleri dışında Chrome üzerinde yapacağımız işlemlerin yetkileri olacak. İleride ihtiyacınız olabilecek yetkiler için http://developer.chrome.com/extensions/permissions.html içeriğini inceleyebilirsiniz. Biz geliştireceğimiz uygulamada “Context Menu”ler kullanacağımız için bu yetkiyi manifest’imize dahil ediyoruz. Context Menu’ler tarayıcı üzerinde sağ tıkladığımızda gelen menüye kendi seçeneklerimizi eklememize yardımcı oluyor. “Tabs” yetkisi kullanıcının Tab’larına erişmemizi ve buralardan gerekli dataları elde etmemizi sağlıyor. “http://*/*” gibi url patternlarımız ise ileride tanımlayacağımız “background” scriptlerimizin aktif olacağı url scope’unu beliyor.

background” kısmında ise eklentimizde kullanacağımız ana kütüphaneleri ve geliştirdiğimiz JavaScript dosyalarını belirtiyoruz.

icons” kısmını ben örnek uygulamamıza dahil etmedim fakat bu tag’in altında “16” , “48” , “128” piksel boyutlarında iconlar tanımlayıp uygulamanıza set edebiliyorsunuz. Detaylı bilgiyi https://developer.chrome.com/extensions/manifest/icons.html buradan edinebilirsiniz.

background

Yukarıdaki bizim “background.js” dosyamız. Ve içinde bize gerekli olan # Kopyala ve # YapıştırContext Menu”leri mevcut. Context Menu’lerin title özelliğinde sağ tıkladığınızda görünecek ismi tanımlıyorsunuz. “contexts” alanında ise scope’unu yani hangi durumda kullanıcıya gözükmesi gerektiğini belirtiyorsunuz. Ben eklentimizde Kopyala işlemi için “selectioncontext’ini kullandım. Bu bir metni seçip sağ tıkladığımızda Kopyalama seçeneğinin gözükmesini sağlayacaktır. Aynı durumlar Yapıştır için de geçerli fakat burada context’imimizi “editable” tanımladım çünkü yapıştırma işlemini yapacağımız yerler “input”, “textarea” gibi alanlar.

Context Menu’lerimizin “onclickevent’ında ise tıkladığımızda nasıl tanımlayacaklarını tanımladık. Kopyalama işlemi oldukça basit bir şekilde aldığı data parametresinden “selectionText”i alarak Local Storage’imize atıp orada depoluyor. Fakat aynı durum Yapıştır için geçerli değil. Google eklentilere sayfalardan veri okumaya izin veriyor fakat DOM ağacında değişiklikler yapmamızı “background” scriptlerden engelliyor.

Peki ne yapmalıyız? Bu durumda manifest.js imizde gördüğünüz “content_script”ler devreye giriyor. Belirli url scope’unuzdaki tüm ziyaret ettiğiniz sayfaya dahil ediliyor. Ve DOM ağacının bir parçası olup DOM ağacında değişiklikler yapabiliyorlar. Sorun şu ki background.js deki Yapıştır işlemini çalıştırdığımızda veriyi yapıştıracağımız alan(yani focus olduğumuz element)ı Content Script’imiz nasıl bilecek?

İşte burada Chrome’un Message Listener’ları devreye giriyor. manifest.json‘umuzda [“http://*/*”, “https://*/*”] url scope’larında tanımlanmış main.js imizi şu şekilde oluşturuyoruz.

message

Content Script olan main.jsdocument”e erişip üzerinde değişiklik yapması sorun olmayacaktır. Message Listener’ımız ise background.js den “message” parametresiyle datayı yakalayıp activeElement alanına set ederek focus olduğumuz elemente istediğimiz datayı set edecektir. Bu da bizim yapıştırma işlemimiz olacak.

background.js’deki yapıştırma işlemimizde bulunan “chrome.tabs.sendMessage(tab.id, localStorage.data);” kod satırı ise Content Script’imize Local Storage’imizdeki datamızı göndermeye yarıyor.

Böylece sadece “manifest.json”, “background.js” ve “main.js”den oluşan Kopyala/Yapıştır eklentimizi tamamlamış oluyoruz.

Bu projenin detaylandırılmış halinin kaynak kodlarına ulaşmak için https://github.com/erayarslan/shared-clipboard adresini kullanabilirsiniz.

Son olarak oluşturduğunuz eklentiyi test ya da debug etmek için şu işlemleri yapın. Chrome tarayıcınızın sağ üstteki menüsüne gelerek Araçlar > Uzantılar ‘ı seçin. Açılacak sayfadan sağ üstteki “Geliştirici Mod”unu seçerek aktif edin. Sol tarafta açılacak “Paketlenmemiş uzantıyı yükle…” butonundan eklentinizin klasörünü seçerek tarayıcınıza yükleyebilir ve burada test, debug işlemlerinizi gerçekleştirebilirsiniz.

Eklentimizin son haline göz atalım.

eklenti

copy

paste” />

Teşekkürler.

10 Comments
  • Posted at 11:46, 27/01/2015

    Güzel yazı, teşekkürler.

  • co3moz
    Posted at 00:44, 22/12/2015

    Teşekkürler Eray bey.

  • sumeyye
    Posted at 13:50, 12/04/2016

    teşekürler yazı için…biz şu an daha yeniyiz javascript html gibi dilerde ve bir projemiz var projemiz için bütün bu kodları denedik ancak çalıştıramıyoruz hiç bir kodu, ne buradakini ne de başka siteden denediklerimizi, acaba bi yerde chrome a yüklememiz gereken birşeyler mi var yoksa version farkı falan olabilir mi ,şu an tıkandık normalde çalışan hiç bir kod bizde çalışmıyor eklenti olarak yüklediğimizde de sorun yok kodlarda ama sağ tıkldığımızda buradaki gibi kopyala ya da yapıştır yazısı gelmiyor, yardım ederseniz seviniriz:)

  • Posted at 04:42, 04/09/2016

    Selamlar Hocam Githubdaki Manifest.json da sanirsam sorun var chromeye yuklemeye calistigim zaman hata aliyorum.

  • Posted at 00:00, 24/09/2016

    ilk uygulamamı yapmam için iyi referans olacak gibi 🙂

  • fahri
    Posted at 16:25, 29/09/2016

    yazdığımız eklentiyi update etmek istediğimizde. Chrome store’da otomatik olarak hemen güncelliyor mu?

  • Posted at 19:27, 28/08/2017

    Teşekkürler hocam ben de bilgilenip denemeler yapacağım.

  • Posted at 13:52, 03/11/2017

    Başlangıç için çok faydalı. Ve somut örnek içeriyor, teşekkürler..

  • emre
    Posted at 20:37, 31/01/2018

    dosyanı upload eder misinz bizde kuralım

Post a Comment

Comment
Name
Email
Website