From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../your_first_webextension/index.html | 153 --------------------- 1 file changed, 153 deletions(-) delete mode 100644 files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html (limited to 'files/id/mozilla/add-ons/webextensions/your_first_webextension') diff --git a/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html deleted file mode 100644 index 27204f8504..0000000000 --- a/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: WebExtensions Pertama Anda -slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

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"]
-    }
-  ]
-
-}
- - - -

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:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

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:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

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.

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

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:

- - -- cgit v1.2.3-54-g00ecf