Selamlar Dostlar,
Chrome Eklentinizi Geliştirin serisinin 2. yazısı ile beraberiz. Bugün eklentilerimize nasıl ikon ekleyeceğimizi ve farklı görünümlerde ikonlarımızı nasıl görünümünü belirleyeceğimizi göreceğiz.
Öncelikle bir önceki yazımızda neler yaptığımızı merak edenler varsa okumalarını öneriyorum. Yazı bağlantısını da şuraya bırakıyorum.
Bir önceki dersimizde manifest.json isimli dosyamızı oluşturmuş ve eklentimiz için gerekli olan tüm parametrelerin girişini yapmıştık. Bu yazımızda eklentimize tabiri caizse albeni kazandıran ikonları nasıl ekleyeceğimizi görelim.
İkon Tanımlamaları Nereye Yapılacak?
Elbette eklentimizin yapı taşını oluşturan manifest.json dosyası içerisine yapılacak.
Json nesnemizin içerisine önce aşağıda yer alan kodlarımızı ekleyelim ardından bu komutların ne işe yaradığından bahsedelim.
browser_action tanımlaması sağ üstte bulunan eklentiler kısmındaki yapacaklarınızı tanımlamak için kullanır. Yani aslında bizler yapacağımız eklentide bir ikon ve ikona tıklanması durumunda yapılacak olan eylemleri burada tanımlayacağız.
Kullanmış olduğum eklenti ikonlarının tanımları
default_popup parametresi ikonumuzun üzerine tıklandığında açılmasını istediğiniz ilk sayfayı tanımlayacağınız alanı oluşturmaktadır. Biz bu örneğimizde hello.html dosyasını çağırmasını istediğimizden dolayı bu şekilde yazdık.
default_icon parametresi ikonumuzun kendisini tanımlar. İkonunuz png uzantılı ve şeffaf bir tasarıma sahip olmalıdır. Dark temalarda fazlasıyla sırıtmasını kesinlikle istemeyiz değil mi? Bir diğer husus ise seçeceğimiz ikonların 32*32 boyutlarında olması gerektiğidir. Böyle ikonları nereden bulacağım diyorsanız sizleri şu bağlantıdan ücretsiz indirebileceğiniz alana yönlendiriyorum.
Bu dosyaları nereye yükleyeceğim?
İkon dosyanızı ve html uzantılı dosyanızı oluşturmuş olduğumuz ve ana dizin olan HelloWorld isimli klasörümüze indiriyor ve dosyayı oluşturuyoruz.
Dosya isimlendirmelerine mutlaka dikkat edelim.
JSON dosyamızı kaydedelim ve şimdi eklentimizi nasıl güncelleyeceğimizi görelim.
Chrome Eklentinizi Güncelleyin
Chrome Eklentinizi güncellemek için adres satırına tekrardan chrome://extensions yazarak ENTER tuşuna basınız. Ardından yüklü olan eklentimiz karşınıza gelecektir.
Sağ alt köşesinde yer alan Reload simgesini bulunuz ve tıklayarak güncelleme işlemini kolaylıkla sağlayabilirsiniz. Eklenti simgesi karşınıza gelecektir.
İkonumuzun üzerine tıkladığımızda boş bir kutucuk açıldığını göreceksiniz. Aslında bu HTML olarak henüz içerisine birşey yazmadığımız boş dosyayı açtığından dolayıdır.
HTML Dosyasını Düzenleyelim
Oluşturmuş olduğumuz hello.html dosyasının içerisine girelim ve <body> taglarının arasına dilediğiniz bir karşılama yazısını yazalım.
Dosyamızı kaydedelim ve eklentimizi tekrardan güncelleyelim. Eklenti ikonunuzun üzerine tıkladığınızda aşağıdaki gibi bir ekran karşınıza gelecektir.
Umarım sizler için faydalı olabilmişimdir. Bu yazımda sizlere Chrome eklentimize nasıl ikon yerleştireceğimizi ve ikonun üzerine tıklandığında karşımıza gelecek olan ekranın nasıl açıldığını (popup) anlatmaya çalıştım.
Bir sonraki yazımda klavye kısayolları ile Chrome içerisinde iken nasıl ikonumuzu etkinleştireceğimiz hakkında bilgi vereceğim.
Bir Cevap Yazın