Kategoriler
Kodlama

Firefox eklentisi nasıl yapılır?

Firefox eklentiler mağazasına bir Firefox eklentisi eklemek, nasıl Firefox eklentisi yazılır ve yüklenir.

Bir önceki yazımda Chrome eklentisi nasıl yapılır başlığı ile Chrome eklentisi yazmak ve Google Chrome Web Mağazasında yayınlamayı anlatmıştım. Şimdi de basitçe Firefox için eklenti yazmak ve Firefox eklentiler sitesine yüklemeyi anlatacağız.

Öncelikli olarak bir Firefox eklentisi yapıp Firefox’un sitesine yüklemek istiyorsanız geliştirici hesabınızı açmanız gerekir, bunun için Geliştirici Merkezi‘ne gidip kaydolmanız yeterli. Ardından yazdığınız eklentiyi zipleyip buradan yüklemeniz mümkün, genelde 1-2 günde eklentiler incelenip onaylanıyor ve sitede yayınlanıyor. Firefox eklentileri Chrome’a göre biraz daha detaylı işler yapabiliyor ancak biz burada en basit bir eklentiyi yapmayı anlatacağız geliştirmek size kalmış, geliştirici merkezinden tüm bilgileri edinebilirsiniz.

İlk olarak eklentiyi yazmak için Chrome’da olduğu gibi Firefox eklentilerinde de 3 temel dosya var, manifest.json, background.js ve iconlar, ekstra diğer dosyalar opsiyoneldir bunlar javascript, css, html olabilirler.

Örnek manifest.json içeriği:

{

 "description": "WOLKANCA sitesindeki son güncellemeleri tek tıklamada gör.",
  "manifest_version": 2,
  "name": "WOLKANCA",
  "version": "1.1",
  "homepage_url": "https://wolkanca.com/",
   "icons": {
      "16": "icon-16x16.png",
	  "32": "icon-32x32.png",
	  "48": "icon-48x48.png",
	  "128": "icon-128x128.png"
   },

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icon-32x32.png",
    "default_title": "WOLKANCA",
    "default_popup": "wolkanca.html"
  }

}

Örnek background.js içeriği:

function openMyPage() {
  console.log("injecting");
   browser.tabs.create({
     "url": "/wolkanca.html"
   });
}

browser.browserAction.onClicked.addListener(openMyPage);

Örnek wolkanca.html içeriği:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WOLKANCA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="description" content="wolkanca.com sitesindeki son güncellemeleri tek tıklamada gör.">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://wolkanca.com/favicon.ico" type="image/x-icon"> 
<link rel="icon" href="https://wolkanca.com/favicon.ico" type="image/x-icon"> 
</head>
<body>
/*Eklentinizin fonksiyonları <meta http-equiv="refresh" content="0; url=https://wolkanca.com/"/> yönlendirmek için ekleyebilirsiniz*/
</body>
</html>

Ve iconlar:

16, 32, 48, 128 genişlik ve uzunlukta png formatında 4 icon ekleyebilirsiniz, bu ikon eklentinin tarayıcıda görünen ikonu olacaktır.

Yukarıdaki dosyaları oluşturduktan sonra yani eklentinin yazımını bitirdikten sonra tüm dosyaları seçip zipleyin, ziplemek için 7zip programını kullanabilirsiniz.

Ve zip’i https://addons.mozilla.org/tr/developers/ adresine gidip hesabınıza yükleyin, yüklemede size eğer sıkıntılı bir durum, hata varsa bildirecektir, sorunsuz ise yükleme biter ve eklentiniz hakkında detayları girmeniz istenir ve tabi eklenti ekran görüntüsü de eklemeniz istenecek. Hepsi bu kadar.

extensionworkshop.com sitesi de önemli bir kaynak bu konuda kendinizi geliştirebilirsiniz.

Benim bu site için yazdığım eklentiyi şuradan yükleyebilirsiniz.

wolkanca.com’da Firefox eklentisi nasıl yapılır? veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Firefox eklentisi nasıl yapılır? için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.