MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebExtensions Pertama Anda

Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

Dalam artikel ini kita akan mulai menciptakan WebExtension untuk Firefox, dari awal sampai akhir. add-on ini hanya menambahkan garis merah untuk setiap halaman yang dimuat dari "mozilla.org" atau subdomainnya.

Kode sumber untuk contoh ini ada pada GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

Pertama, anda membutuhkan Firefox versi 45 atau lebih baru.

Buat sebuah directory baru dan arahkan kesana:

mkdir borderify
cd borderify

manifest.json

Sekarang buat file baru dengan nama "manifest.json" di dalam folder "borderify". Berikan kode seperti berikut:

{

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

  "description": "Adds a red border to all webpages matching mozilla.org.",

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

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

}
  • Tiga key pertama: manifest_version, name, dan version, adalah wajib dan mengandung metadata dasar untuk add-on.
  • description adalah opsional, tetapi dianjurkan: ini akan ditampilkan dalam Add-ons Manager.
  • icons adalah opsional, tetapi dianjurkan: memungkinkan Anda untuk menentukan sebuah ikon untuk add-on, yang akan ditampilkan dalam Add-ons Manager.

Kunci yang paling menarik di sini adalah content_scripts, yang memberitahu Firefox untuk memuat script ke Halaman web dengan URL yang cocok dengan pola tertentu. Dalam hal ini, Kita akan meminta Firefox untuk memuat script yang di disebut "borderify.js" ke semua halaman HTTP atau HTTPS yang disajikan dari "mozilla.org" atau subdomainnya.

Jika anda menggunakan Firefox versi 48 kebawah, Anda juga akan memerlukan key tambahan yang disebut applications:

"applications": {
  "gecko": {
    "id": "borderify@example.com",
    "strict_min_version": "42.0",
    "strict_max_version": "50.*",
    "update_url": "https://example.com/updates.json"
  }
}

icons/border-48.png

Add-on harus memiliki ikon. Ini akan ditampilkan di sebelah list add-on di Add-ons Manager. Manifest.json menjanjikan bahwa kita akan memiliki ikon di "icons/border-48.png".

Membuat sebuah folder "ikon" pada folder "borderify". Simpan ikon dengan nama "border-48.png".  Anda dapat menggunakan salah satu dari contoh kami, yang diambil dari ikon Google Material Design iconset, dan digunakan di bawah ketentuan lisensi Creative Commons Attribution-ShareAlike.

Jika Anda memilih untuk menggunakan ikon Anda sendiri, itu harus berukuran 48x48 pixel. Anda juga bisa menggunakan ikon 96x96 pixel, untuk display resolusi tinggi, dan jika Anda melakukan hal ini akan ditentukan property 96 milik ikon objek di manifest.json:

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

Atau, Anda bisa menggunakan file SVG, dan itu akan ditingkatkan dengan benar.

borderify.js

Akhirnya, buat file dengan nama "borderify.js" pada folder "borderify". Berikan kode seperti berikut:

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

Script ini akan dimuat ke dalam halaman yang cocok dengan pola yang diberikan dalam key content_scripts pada manifest.json. Script memiliki akses langsung ke dokumen, seperti script dimuat oleh halaman itu sendiri.

Trying it out

Pertama, periksa bahwa Anda memiliki file yang tepat di tempat yang tepat:

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

Pemasangan

Buka "about:debugging" di Firefox, klik "Load Temporary Add-on" dan pilih file pada folder add-on anda:

Add-on kini akan diinstal, dan akan tetap sampai Anda me-restart Firefox.

Atau, Anda dapat menjalankan WebExtension dari baris perintah menggunakan web-ext tool.

Testing

Sekarang coba kunjungi halaman dengan domain "mozilla.org", dan Anda akan melihat garis merah melingkar pada halaman:

Jangan mencobanya pada addons.mozilla.org! skrip konten saat ini diblokir pada domain tersebut..

Coba bereksperimen sedikit. Edit script konten untuk mengubah warna garis, atau melakukan sesuatu yang lain untuk konten halaman. Simpan script konten, kemudian muat kembali file add-on dengan mengklik button "Reload" pada about:debugging. Anda dapat melihat perubahan segera.

Packaging dan publishing

Bagi orang lain yang akan untuk menggunakan add-on, Anda perlu memaketkan itu dan mengirimkannya ke Mozilla untuk penandaan. Untuk mempelajari lebih lanjut tentang itu, lihat "Publishing your WebExtension".

Apa berikutnya?

Sekarang Anda punya ide dari proses pengembangan WebExtension untuk Firefox, coba:

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: fesuydev
 Terakhir diperbarui oleh: fesuydev,