Merhabalar. Hiç merak ettiniz mi Chrome Eklentisi gibi eklentiler nasıl yapılıyor? Kimisi bizi reklamlardan kurtarırken kimisi websitelerine çok güzel özellikler kazandırıyor. Yani sonuçta bunları birileri yapıyorsa biz neden yapamayalım?

Bu yazıda size nasıl sade ve güzel tasarımı olan bir Chrome Eklentisi yapabileceğinizi anlatacağım. Chrome eklentisi dediğime bakmayın çoğu tarayıcıda kullanabilirsiniz. Öyleyse hemen yapılışa geçelim.

Gereksinimler

-Temel HTML ve CSS bilgisi.

-Bir adet kod editörü. (Hatta not defteri ile bile yapabilirsiniz. Fakat en rahat şekilde çalışmak için profesyonel bir araç tavsiye ediyoruz. Biz bu yazıda Sublime Text kullanacağız fakat siz farklı programlar kullanabilirsiniz.)

Hadi Başlayalım

O zaman hadi yavaştan yapmaya başlayalım. Her şeyden önce ilk yapmamız gereken bir klasör oluşturmak. Klasöre yapacağınız eklentinin ismini veya rastgele bir isim verebilirsiniz. Bütün yapacaklarımız bu klasör içinde olacak. Ben “Web Odası Eklentisi” ismini vereceğim.

Şimdi ihtiyacımız olan şeyler şunlar:

• manifest.json Dosyası
• Eklentimiz için bir adet ikon (görsel)
• html ve css dosyaları

manifest.json Dosyası

Şimdi dosyamızın içerisine bir adet “manifest.json” isimli dosya oluşturuyoruz ve dosya içeriğini şu şekilde dolduruyoruz:

Burada “name” kısmının karşısına eklentinizin ismini, “description” kısmının karşısına eklentinizin açıklamasını ve “default_icon” kısmının karşısına da hazırladığınız görselin dosya adını girmelisiniz. Bu işlemlerden sonra bu dosya ile işimiz bitmiş oluyor.

popup.html Dosyası

Şimdi sırada eklentimizin içini yapmakta, bir adet “popup.html” dosyası oluşturuyoruz ve başlıyoruz:

Ben burada Font Awsome görsellerinden yararlandım. “<!–Font Awsome Kodunu Buraya Yerleştiriniz –>” yazan yere Font Awsome kodunuzu yapıştırarak devam edebilirsiniz.

Bu kısımda normal bir web sayfası tasarlıyormuş gibi HTML kodlarımızı giriyoruz ve dışarıdaki bir style.css dosyasına bağlıyoruz.

style.css Dosyası

Şimdi yaptığımız eklentiyi süsleme zamanı geldi.

Burada dikkat etmeniz gereken şey body kısmındaki yükseklik ve genişlik ayarları. Bu ayarlar eklentimizin en-boy oranını belirleyecek. Onun dışında istediğiniz gibi tasarım yapabilirsiniz.

Yükleme Ve Kullanma

Eveeet. Kendi eklentimizi başarılı bir şekilde hazırladık ve şimdi en güzel kısma geldi. Artık yaptığımız projeyi test edip kullanabiliriz.

Kurulum

Bunu yapmak için tarayıcınızda chrome://extensions adresine gitmelisiniz. Ardından şu adımları takip edin:

Sağ üstte bulunan “Geliştirici Modu“nu aktif hale getirin

Daha sonra “Paketlenmemiş Öğe Yükle” butonuna basın ve çıkan yerden ilk başta oluşturduğumuz klasörü seçin.

Eklentimizi her zaman görüntülemek için sağ üstteki yapboz işaretine basın ve yaptığınız eklentiyi bulup “Sabitle” tuşuna basın.

Son Hali

Gördüğünüz gibi eklentimizin son hali bu şekilde. Siz de kendi eklentilerinizi yapabilirsiniz. (Resimlere tıklayınca ilgili hesaplara, en üstteki logoya tıklayınca da webodasi.com‘a yönlendiriyor.)

Eklentimizi İndirin

Burada sizinle birlikte yaptığımız eklentiyi cihazınıza kurmak isterseniz diye link bırakalım dedik. Dosyalarını inceleyip denemeler yapabilirsiniz.

İndir (rar şifresi: webodası)

Yedek Link

Kaynak