Selamlar,
Bugün Firefox tarayıcıları için nasıl eklenti geliştirilir ve yayınlanır anlatmaya çalışacağım.
Anlatımımda örnek olarak, daha önceden yapmış olduğum ve şuanda yayında olan Converter Tool eklentisini kullanacağım.
Gördüğünüz üzre bu tool basit anlamda, textleri alıp büyük küçük harf uyarlayıp ekrana basıyor.
Başlayalım;
Ben bu işlemler için Visual Studio Code kullanacağım. Tabii siz herhangi bir txt editöründe yapabilirsiniz. Notepad, notepad++ vs.
Şimdi aşağıda ki gibi dosyaları ve klasörleri oluşturalım.
AddOnConvertTool isimli ana klasörüm altında tüm dosyalarım.
Resimlerimi ayrı bir klasörde görmek istediğim için img isimli alt klasör oluşturdum. Bunun içine iconlarımı koydum.
Dosyalarımızın genel anlamı ve içeriklerine geçelim;
manifest.json;
Bu dosya en kritik dosyamız, o yüzden ilk olarak buradan başlıyoruz.
Şöyle ki, burada eklentimizde neyi nerde nasıl kullanacağımızı belirtiyoruz. Index.html, maniHelper.js isimli dosyalarımızı bu manifest.json içinde tanımlamamız gerekiyor.
Burada ki gibi ayarlayalım: https://github.com/semihcelikol/addOnConverterTool/blob/master/manifest.json
(Burada ek bir bilgi vermek istiyorum, eğer sizde benim gibi Microsoft Dynamics Ax/365 yazılımcısı iseniz, yeni Retail Cloud Pos SDK‘sı tarafında, bu manifest.json ile çok fazla uğraşacağınızı söylemeliyim. Bundan dolayı bu yapıyı anlamak başka yerlerdede işinize yarayacaktır.)
Şimdi burada ki bir kaç özelliğe değinelim;
“background”: kısmına yazdığımız script, arka planda çalışacak olan .js dosyamızı gösterdiğimiz yerdir.
“browser_action”:
default_icon kısmında, eklentiyi kurduğumuzda, sağ üstte çıkacak olan butonun iconunu belirtiyoruz.
default_popup kısmında, eklentiyi kurduğumuzda, sağ üstte çıkacak olan butona tıkladığımızda, açılacak olan html sayfasının ne olduğunu belirtiyoruz.
bunlardan ziyade daha bir çok özelliğin kullanımı için buradaki dokümana bakabilirsiniz.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
Şimdi index.html sayfamızı yapalım;
index.html;
Dosya içeriğimizi burada ki gibi ayarlayalım:
https://github.com/semihcelikol/addOnConverterTool/blob/master/index.html
html kısmında, tasarımı düzgün yapıp yapmadığımızı tarayıcıda açıp kontrol edelim, eksik gedik varsa giderelim. Şöyle bir görüntü elde etmelisiniz;
Şimdi sıra geldi, mainHelper.js dosyamızı hazırlamaya.
mainHelper.js;
https://github.com/semihcelikol/addOnConverterTool/blob/master/mainHelper.js
javascript dosyamızıda ayarladığımıza göre artık eklentiyi kurup deneyebiliriz.
Firefox açıp > Eklentiler kısmına gelip > Eklentilerde hata ayıkla diyelim
Açılan ekranda, bu kez geçici eklenti yükle butonuna tıklayalım
Proje dizinimize gidip > manifest.json dosyamızı seçip aç diyelim.
Gördüğünüz gibi manifest.json dosyamızı okuyarak eklentimizi kurduk. Sağ üst köşede ise simgemizi(butonumuzu) görmeliyiz.
Butona tıkladığımızda ise, html dosyamız açılmalı ve js işlemlerimizde çalışır halde yani butonlara tıkladığımızda convert etmeli 🙂 
Evet işlemler bu kadardır. artık tüm dosyalarımızı zipleyip firefox marketinde listemeleye hazırız. Şu adrese gidip firefox hesabımızla oturum açıyoruz. https://addons.mozilla.org/tr/developers/
Oturum açtıktan sonra, yeni eklenti gönder butonuna basıyoruz.
Açılan ekranda, 2 seçenek göreceksiniz, ben On this site bırakmanızı öneririm.
Bu seçenekte firefox eklenti sistemlerinde yeni değişiklikler güncellemeler yaptığında, sizin eklentinizi otomatik ayarlamaya çalışır, uyumsuzluk vs olduğunda size durumu bildirir. Diğerinde ise kendiniz kontrol edip ayarlamanız gerekir.
Devam et diyoruz ve zipli dosyamızı yüklüyoruz.
Zipi yüklediğimizde eğer hatalarımız varsa burada listeleyip bize söylüyor, yok ise devam et butonu aktif oluyor ve uyarıları gözden geçirip yayına göndermek için market açıklamaları iconlarını yükleyip yayına gönderiyoruz. Firefox ekibi gözden geçirip yayına alıyorlar 🙂
Sorularınız varsa, yorumlara ya da iletişimden yazarsanız destek olmaya çalışacağım.
İyi çalışmalar