İlk Eklentin

Bu makalede Firefox için bir eklenti baştan sona nasıl oluşturulur onu inceleyeceğiz. Eklenti "mozilla.org" vey alt alan adlarından yüklenen tüm sayfalara kırmızı kenarlık ekleyecek.

İlk olarak Firefox 45 veya sonraki bir versiyona ihtiyacımız olacak.

Eklentiyi yazmak

Yeni bir dizin oluşturup içine girelim. Örneğin terminalden şu şekilde yapabiliriz:

mkdir borderify
cd borderify

manifest.json

Şimdi "manifest.json" isimli yeni bir dosya oluşturarak dosyanın içeriğine aşağıdakileri ekleyelim.

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "mozilla.org ile eslesen tum sayfalara kırmızı kenarlık ekler.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}
  • İlk 3 özellik olan: manifest_version, name, ve version, zorunlu alanlar ve bu eklenti için gerekli üstveriyi içeriyor.
  • description isteğe bağlı bir alan. Ancak Eklenti Yöneticisi'nde göründüğü için eklenmesi tavsiye ediliyor.
  • icons isteğe bağlı bir alan. Eklenti Yöneticisi'nde gösterilecek ikonu belirtmek için kullanıldığından eklenmesi tavsiye ediliyor.

Buradaki en ilginç özellik content_scripts. Bu kısımda hangi örüntüye uyan web sayfaları için Firefox'un eklenti script'lerini yüklemesi gerektiğini söylüyor. Bu örnekte Firefox'a "borderify.js" i "mozilla.org" veya onun alt adresinden sunulan tüm HTTP veya HTTPS sayfalar için yüklemesini istiyoruz.

Bazı durumlarda eklentin için bir kimlik(id) belirtmen gerekebilir. Gerektiğinde manifest.json da  applications içerisine gecko.id özelliğini ekle:

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

icons/border-48.png

Eklentimizin bir ikonu olmalı. İkonumuz Eklenti Yöneticisi'nde eklentimiz listelenirken yanında gözükecek.manifest.json dosyamız ikonumuzun şu dizinde olacağını söylüyor: "icons/border-48.png".

"borderify" dizini içerisinde "icons" klasörünü oluştur. "border-48.png" isimli bir ikon koy.  Google Material Desing ikon paketinden alınmış ve Creative Commons Attribution-ShareAlike lisansına sahip örneğimizdeki ikonu kullanabilirsin.

Eğer kendi ikonunu kendin ayarlamak istiyorsan ikon 48x48 piksel olmalı. Yüksek çözünürlüklü cihazlar için 96x96 piksel ikon da ayarlayabilirsin. Ancak o durumda icons altında 96 olarak 96x96'lık ikonu belirtmen gerekir:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

Alternatif olarak SVG dosyası kullanabilirsin ve doğru biçimde ölçeklenir. (Doğrusu: SVG kullanıyorsan ve ikon yazı içeriyorsa, SVG düzenleyicinin "convert to path" özelliğini kullanıp yazıyı düzleştirmek isteyebilirsin. Bu sayede pozisyonu ve boyutu doğru olarak ölçeklenir.)

borderify.js

Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:

document.body.style.border = "5px solid red";

This script will be loaded into the pages that match the pattern given in the content_scripts manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.

Trying it out

First, double check that you have the right files in the right places:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

Installing

Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:

The extension will now be installed, and will stay until you restart Firefox.

Alternatively, you can run the extension from the command line using the web-ext tool.

Testing

Now try visiting a page under "mozilla.org", and you should see the red border round the page:

Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.

Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extensions's files by clicking the "Reload" button in about:debugging. You can see the changes right away:

Packaging and publishing

For other people to use your extension, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your extension".

What's next?

Now you've got an idea of the process of developing a WebExtension for Firefox, try: