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.