Tarayıcılar için Eklenti Yapımı | Browser Extention

Bu makalemizde Google Chrome, Mozilla Firefox ve Opera gibi Tarayıcılar için Eklenti Yapımı nı en baştan yayınlamaya kadar ele alacağız. Eklentiler tüm tarayıcılarda çalışacak şekilde genele uygun yapılacaktır.

Yazımızda iki eklenti türünün yapımından bahsedeceğim. Örnek olarak da bu eklentilerin yapılışını ve içeriklerini ele alacağım. Yazıyı okumadan önce paylaştığım iki eklenti türünü de incelemeniz yazının anlaşılırlığını kolaylaştıracaktır.

İlk tür, eklentinin tarayıcıda açık olan sayfaya müdehale etmediği, sadece kendine tıklandığında işlemini yaptığı türdür. Buna örnek olarak sitemizin yapmış olduğu Linux Sözlüğü eklentisi‘ne bakabilirsiniz. Eklenti sanki bağımsız bir web sayfası gibidir. Tarayıcıda o anda açık olan site ile bir alakası yoktur.

İkinci tür eklentiler ise tarayıcıda açık olan web sayfasına etki edebilen eklentilerdir. Yani eklenti tarayıcıda açılan bütün web sayfalarına ve ya sadece belirlenen sitelere ulaşıp değişiklikler yapabileceğiniz türdür. Buna örnek olarak da gene bize ait olan Web Whatsapp Dark Mode eklentisi‘ni inceleyebilirsiniz.

Tarayıcı Eklentisi Nedir?

Eklenti Yapımı nı ele almadan önce yeni başlayanlar için tarayıcı eklentisi nedir sorusunu açıklayalım. Tarayıcılar için yapılan yardımcı uygulamalardır. Tarayıcıların sağ üst köşesinde arama çubuğunun yanında bulunur. Uzantı olarak da bilinir ama ben eklenti demeyi tercih ediyorum.

Eklentiler aslında birer web sayfasıdır. HTML, CSS ve JS ile yazılır. İsteğe bağlı olarak tarayıcıda açık olan bir sayfaya erişim sağlayabilir, değişiklik yapabilir. Uygulama tarzında, HTML5 oyunları gibi eklentilerde geliştirmek mümkündür. Aynı zamanda eklenti sayesinde tarayıcıyı kullanarak bilgisayar özelliklerine de erişilebilir. Kamera, ekran görüntüsü hatta portlara bile ulaşılabilir. Yani bir tarayıcı eklentisi ile arduino gibi gömülü sistem programlamayı tarayıcı üzerinden haberleştirebilirsiniz. Kısaca eklentiler ile küçümsenmeyecek kadar çok şey yapılabilir.

Her tarayıcının kendine özel mağazası vardır. Ücretli ve ücretsiz bir çok eklenti mevcut. Hatta yazılımcılar, tasarımcılar, eğitmenler vb. meslekler için özelleşmiş işlerini kolaylaştıracak bir çok eklenti var, araştırmanızı tavsiye ederim. Mağazaları kullanarak indirme işlemi yapabileceğiniz gibi geliştirici modunda da kendi yazdığınız eklentileri mağazaya yüklemeden kullanabilirsiniz.

Eklenti Yapımı

Bir klasör açalım ve eklentimizin tüm parçalarını o klasörde toplayalım. En sona geldiğimizde o klasörü yayınlamaya göndereceğiz. Eklenti için olmazsa olmaz en önemli parça “manifest.json” dosyasıdır. Sonra iconlar ve eklentinin amacına göre kullanılacak diğer html, css, js gibi dosyalar olur. Linux Sözlüğü ve Whatsapp Dark eklentilerinin klasör görünümleri aşağıda gösterilmiştir.

 

 

manifest.json

Eklenti yapımı nın en önemli parçasıdır. Gerekli ayarlar ve açıklamalar bu json dosyasında json formatında yazılır. manifest.json içeriği ile ilgili bir çok yazı ve tarayıcıların orijinal makaleleri mevcut. Biz sadece yukarıda belirtilen iki eklenti için gerekecek manifest.json dosyalarının içeriğini inceleyeceğiz. Bu bize tüm mantığı öğretecektir.

• Linux Sözlüğü eklentisi için manifest.json :

• Web Whatsapp Dark için manifest.json :

İçeriklerini açıklayacak olursak, bu dosya adından ve içeriğinden de anlaşıldığı gibi bi json dosyası. İçerik olarak da belli başlı değerler alıyor. name, description ve author değerlerini eklentiye göre dolduruyoruz. Eğer eklentiyi ilk defa yayınlıyorsak yani bir güncelleme atmıyorsak version değerine 1.0 manifest_version değerine de 2 veriniz. Güncelleme yayınlarsak bu değerleri güncellemeye göre artıracağız. icons kısmında ise klasör içerisine attığımız 16 48 128 pixellik png iconların isimleri veriyoruz.

Gelelim browser_action ve content_scripts kısmına.

browser_action genelleyecek olursak eklentinin sahip olduğu dosyalardır diyebiliriz. Eklentiler aslında birer web sayfasıdır demiştik. Yani eklenti sayfasının özelliklerini yazıyoruz. Whatsapp Dark eklentisi için herhangi bir sayfaya ihtiyaç yok, o yüzden eklentinin sadece iconu olması yeterli. Linux Sözlüğü eklentisi için bir sayfa var. Yani eklenti iconuna tıklandığında bir pencere açılıyor ve orada işlem yapıyorsunuz. İşte açılan o pencere aslında browser_action kısmında belirtilen default_popup index.html. index.html içinde de css ve js klasörlerinde ki css ve javascript dosyalarını kullanıp bir sayfa hazırladık. Yani hazırladığımız sayfayı eklenti iconuna basılınca açılacak şekile getirmek için browser_action kullanılıyor.

content_scripts kullanım amacı ise eklentimiz o an açık olan web sayfasına erişebilsin istediğimizde kullandığımız kısımdır. matches alanında belirttiğim gibi web.whatsapp.com adresinde kullanılacak bir eklenti diyorum. css kısmında ise klasörde bulunan styles.css içeriğini matches de söylediğim sitelere entegre et diyorum. İstersek oraya js deyip javascript dosyalarını da sayfaya entegre ettirebiliriz. Bu alanı kullandığımızda eklenti kurulum aşamasında kullanıcılara “bu eklenti web.whatsapp sitesindeki yazıları görüntüleyebilir ve değiştirebilir” diye yetki sorusu sorar. Onaylamak kullanıcıların taktiridir.

• Linux Sözlüğü eklentisinin manifes.json dosyasında content_scripts alanı yok. Bunun sebebi bu eklenti kullanıcıların gezdiği sayfalarla ilgilenmiyor ve erişim sağlamıyor.
• Web Whatsapp Dark eklentisinin manifest.json dosyasında da default_popup alanı yok. Bunun sebebi ise bu eklentiye tıklanıldığında herhangi bir işlem gerçekleşmiyor. Yüklediğiniz andan itibaren tek yaptığı işlem, web.whatsapp sayfasına girildiğinde styles.css dosyasını o sayfaya entegre etmesi.

İçerikler

Web Whatsapp Dark için styles.css içeriğini kendi hayalinize göre dizayn edebilirsiniz. Kodlara important koymayı unutmayınız çünkü hali hazırda olan siteye yeni css ekliyoruz ve adamların yazdığı css’i ezmeniz gerekiyor. Eğer tema yapacaksanız kendinize 3 renk belirleyip elementleri tek tek değiştirmenizi öneririm. styles.css içeriğini web.whatsapp sitesindeki elementleri ve classları referans alınarak düzenledik:

 

Linux Sözlüğü eklentisi gibi bir popup çıkmasını istiyorsanız da index.html içeriğine istediğiniz sayfayı hazıylayıp head aralığına popup boyutunu belirten kodları yazmanız yeterlidir. Artık yazdığınız tüm html sayfalarını eklenti olarak kullanabilirsiniz. Aşağıda yazılan kodları index.html içine yapıştırırsanız sitemizin eklentisini yapmış olursunuz.

Geliştirici Modu

Eklenti Yapımı nda en önemli şey eklentileri tarayıcıların geliştirici modunu aktifleştirerek test etmektir. Yok ben sadece kendim için yaptım deyip yayınlamadan da sadece siz kullanabilirsiniz.

Google Chrome için geliştirici modu

• Arama çubuğuna “chrome://extensions/” yazıp eklentilerin yüklü olduğu sayfayı açın.
• Sağ üst köşede “Geliştirici Modu” seçeneğini aktifleştirin.
• “Paketlenmemiş Öğe Yükle” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.

Mozilla Firefox için geliştirici modu

• Arama çubuğuna “about:debugging” yazıp eklenti debug sayfasını açın.
• “Enable add-on debugging” seçeneğini aktifleştirin
• “Load Temporary Add-on” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.

Opera için geliştirici modu

• Opera tarayıcı açıkken “ctrl+shift+e” tuşuna basın yada Menü > Eklentiler > Eklentiler seçeneğini seçin.
• “Geliştirici Modu” butonuna  tıklayın.
• “Paketlenmemiş Eklenti Yükle” butonuna tıklayıp, uzantı klasörünüzü seçin ve yükleyin.

Eklenti Yayınlama

Eklentilerimizi yayınlamak için eklenti klasörümüzü zip uzantısı ile sıkıştırıyoruz.  zip halin de mağazalara gönderip içeriklerini girdikten sonra uygulamamız incelenecek, uygun görülürse yayınlanacaktır.

*Chrome için klasörün dışına çıkıp klasörü zipleyiniz. Firefox ve Opera için klasörün içine girip içindeki dosyaları zipleyiniz.

Google Chrome İçin Eklenti Yayınlama

• https://chrome.google.com/webstore/developer/dashboard adresine google hesabı ile bağlanıp giriniz.
• “Geliştirici Hesabınız” bölümündeki alanları doldurunuz.
• “Yeni Öge Ekle” butonuna basıp zip dosyanızı seçiniz ve yükleyiniz.
• Eklentinizin mağazada nasıl görüneceğine dair ayarları, dil ayarları, detaylı açıklama, ekran görüntüleri, tanıtım kutucuğu resimleri, simge vb. alanları doldurunuz.
• En alttaki “Değişiklikleri Önizle” butonu ile kontrolünü yaptıktan sonra “Değişiklikleri Yayınla” butonuna basarak onaylanmasını bekleyiniz.
• Onay süreci 2-3 gün sürmektedir.

Mozilla Firefox İçin Eklenti Yayınlama

• https://addons.mozilla.org/en-US/firefox/ adresine girip hesabınız varsa login yoksa register ile kayıt olunuz.
• Hesabınız ile giriş yaptıktan sonra sağ üstte isminizin üzerine gelin.
• Açılan pencerede “Submit a New Add-on” butonuna tıklayınız.
• “On this site” seçeneği seçili iken “Continue” .
• Zip dosyanızı seçiniz ve yükleyiniz.
• Bilgileri doldurduktan sonra “Submit Version” yapıp “My Add-ons” bölümüne geri dönün.
• Yüklediğiniz eklentiyi seçip, ekran görüntüleri, iconlar, açıklamalar, kategori ve dil ayarlarını düzenleyiniz.
• Onay süreci 2-3 saat sürmektedir.

Opera İçin Eklenti Yayınlanma

• https://addons.opera.com/tr/ adresine giriniz.
• “Oturum Aç” butonundan hesabınız yoksa üye olun, varsa giriş yapın.
• Giriş yaptıktan sonra “Geliştir” butonuna basın.
• “Upload new add-on” butonuna basıp zip olarak eklentinizi yükleyiniz.
• Yüklediğiniz eklentiye My Add-ons kısmından seçiniz ve içine giriniz.
• “Versions” sekmesine geçerek en alttaki yüklenme tarihi yazan versiona tıklayınız.
• “General”, “Media” ve “Translation” kısımlarını düzenleyiniz.
• Düzenleme işlemleri bittikten sonra “Stats” sekmesinden eklenti durumunu izleyebilirsiniz. Yayınlanma süreci değişkendir.

NOT: Her eklentinin yayınlanmasını kendi tarayıcısı üzerinden yapmayı unutmayın.

Tarayıcılar için Eklenti Yapımı adlı yazımızın sonuna geldik. HTML, CSS ve JSON bildiğiniz varsayılarak anlatıldı. Umarım faydalı olmuştur.

Kodla Kalın!