1 files changed, 153 insertions, 0 deletions
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
new file mode 100644
index 0000000000..27204f8504
--- /dev/null
+++ b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,153 @@
+---
+title: WebExtensions Pertama Anda
+slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span id="result_box" lang="id"><span>Dalam</span> <span>artikel ini kita</span> <span>akan</span> mulai <span>menciptakan</span> <span>WebExtension</span> <span>untuk</span> <span>Firefox</span><span>,</span> <span>dari awal sampai akhir</span><span>.</span> <span>add</span><span>-on</span> ini <span>hanya menambahkan</span> <span>garis</span> <span>merah untuk</span> <span>setiap</span> <span>halaman</span> <span>yang dimuat dari</span> <span>"</span><span>mozilla.org</span><span>"</span> <span>atau</span> <span>subdomainnya</span><span>.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="id"><span>Kode sumber untuk</span> <span>contoh ini</span> <span>ada pada</span> <span>GitHub</span></span>: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p>Pertama, anda membutuhkan Firefox versi 45 atau lebih baru.</p>
+
+<h2 id="Menulis_sebuah_WebExtension">Menulis sebuah WebExtension</h2>
+
+<p>Buat sebuah directory baru dan arahkan kesana:</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Sekarang buat file baru dengan nama "manifest.json" di dalam folder "borderify". Berikan kode seperti berikut:</p>
+
+<pre class="brush: json">{
+
+  "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"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>Tiga key pertama: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, dan <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, <span id="result_box" lang="id"><span>adalah wajib</span> <span>dan mengandung</span> <span>metadata</span> <span>dasar</span> <span>untuk</span> <span>add</span><span>-on</span></span>.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> <span id="result_box" lang="id"><span>adalah</span> <span>opsional</span><span>,</span> <span>tetapi dianjurkan</span><span>:</span> <span>ini akan ditampilkan</span> <span>dalam</span> <span>Add-ons</span> Manager</span>.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> <span id="result_box" lang="id"><span>adalah opsional</span><span>,</span> <span>tetapi</span> <span>dianjurkan</span><span>:</span> <span>memungkinkan</span> <span>Anda untuk menentukan</span> <span>sebuah ikon</span> <span>untuk</span> <span>add-on</span><span>,</span> <span>yang akan ditampilkan</span> <span>dalam</span></span> Add-ons Manager.</li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="id"><span>Kunci </span></span><span class="short_text" lang="id"><span>yang paling menarik</span> <span> di sini adalah</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <span id="result_box" lang="id"><span>yang memberitahu</span> <span>Firefox</span> <span>untuk memuat</span></span> 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.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</a>.</li>
+</ul>
+
+<div class="note">
+<p>Jika anda menggunakan Firefox versi 48 kebawah, <span id="result_box" lang="id"><span>Anda</span> <span>juga</span> <span>akan</span> <span>memerlukan key</span> <span>tambahan yang disebut</span></span> <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code>:</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com",
+    "strict_min_version": "42.0",
+    "strict_max_version": "50.*",
+    "update_url": "https://example.com/updates.json"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>Add-on <span id="result_box" lang="id"><span>harus memiliki</span> <span>ikon</span><span>.</span> <span>Ini</span> <span>akan ditampilkan</span> <span>di sebelah</span> <span>list add-on</span> <span>di</span></span> Add-ons Manager. Manifest.json menjanjikan <span id="result_box" lang="id"><span>bahwa kita akan memiliki</span> <span>ikon di</span></span> "icons/border-48.png".</p>
+
+<p>Membuat sebuah folder "ikon" pada folder "borderify". Simpan ikon dengan nama "border-48.png".  Anda dapat menggunakan <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">salah satu dari contoh kami</a>, <span id="result_box" lang="id"><span>yang</span> <span>diambil dari</span> <span>ikon</span></span> Google Material Design iconset, <span id="result_box" lang="id"><span>dan</span> <span>digunakan di bawah</span> <span>ketentuan lisensi</span></span> <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
+
+<p><span id="result_box" lang="id"><span>Jika</span> <span>Anda memilih</span> <span>untuk menggunakan</span> <span>ikon</span> <span>Anda sendiri</span><span>,</span> <span>itu</span> <span>harus</span> <span>berukuran</span> <span>48x48 pixel</span><span>.</span> <span>Anda</span> <span>juga bisa menggunakan</span> <span>ikon</span> <span>96x96</span> <span>pixel</span><span>,</span> <span>untuk</span> <span>display resolusi tinggi</span><span>,</span> <span>dan jika</span> <span>Anda</span> <span>melakukan hal ini</span> <span>akan</span> <span>ditentukan</span> <span>property</span> <span>96</span> <span>milik</span> <span>ikon</span> <span>objek</span> <span>di</span> <span>manifest.json</span></span>:</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p><span id="result_box" lang="id"><span>Atau, Anda bisa</span> <span>menggunakan</span> <span>file</span> <span>SVG</span><span>,</span> <span>dan itu</span> <span>akan</span> <span>ditingkatkan</span> <span>dengan benar</span><span>.</span></span></p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Learn more about specifying icons.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p><span id="result_box" lang="id"><span>Akhirnya</span><span>,</span> <span>buat file dengan nama</span> <span>"</span><span>borderify.js</span><span>"</span> pada folder <span>"</span><span>borderify</span><span>"</span><span>.</span> Berikan kode seperti berikut<span>:</span></span></p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p><span id="result_box" lang="id"><span>Script ini</span> <span>akan dimuat</span> <span>ke dalam</span> <span>halaman</span> <span>yang cocok dengan</span> <span>pola yang diberikan</span> <span>dalam key</span> <span>content_scripts pada</span> <span>manifest.json</span><span>.</span> <span>Script</span> <span>memiliki akses langsung ke</span> <span>dokumen</span><span>,</span> <span>seperti</span> <span>script</span> <span>dimuat oleh</span> <span>halaman itu sendiri</span></span>.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li>
+</ul>
+
+<h2 id="Trying_it_out">Trying it out</h2>
+
+<p><span id="result_box" lang="id"><span>Pertama</span><span>,</span> <span>periksa</span> <span>bahwa Anda memiliki</span> <span>file</span> <span>yang tepat</span> <span>di tempat yang tepat</span><span>:</span></span></p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Pemasangan">Pemasangan</h3>
+
+<p>Buka "about:debugging" di Firefox, klik "Load Temporary Add-on" dan pilih file pada folder add-on anda:</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>Add-on <span id="result_box" lang="id"><span class="alt-edited">kini akan</span> <span>diinstal</span><span>,</span> <span>dan</span> <span>akan</span> <span class="alt-edited">tetap sampai</span> <span>Anda me-restart</span> <span>Firefox</span></span>.</p>
+
+<p><span id="result_box" lang="id"><span>Atau, Anda dapat</span> <span>menjalankan</span> <span>WebExtension</span> <span>dari baris perintah</span> <span>menggunakan </span></span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool.</p>
+
+<h3 id="Testing">Testing</h3>
+
+<p><span id="result_box" lang="id"><span>Sekarang</span> <span>coba kunjungi</span> <span>halaman</span> <span>dengan domain</span> <span>"</span><span>mozilla.org</span><span>"</span><span>,</span> <span>dan</span> <span>Anda akan melihat</span> <span>garis merah</span> <span>melingkar pada</span> <span>halaman:</span></span></p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p><span id="result_box" lang="id"><span>Jangan</span> <span>mencobanya pada</span> <span>addons.mozilla.org</span><span>!</span> <span>skrip</span> <span>konten</span> <span>saat ini</span> <span>diblokir pada</span> <span>domain tersebut.</span></span>.</p>
+</div>
+
+<p><span id="result_box" lang="id"><span>Coba</span> <span>bereksperimen</span> <span>sedikit</span><span>.</span> <span>Edit</span> script <span>konten</span> <span>untuk mengubah</span> <span>warna garis</span><span>,</span> <span>atau melakukan</span> <span>sesuatu yang lain untuk</span> <span>konten halaman</span><span>.</span> <span>Simpan</span> <span>script konten</span><span>,</span> <span>kemudian muat kembali</span> <span>file</span> <span>add</span><span>-on</span> <span>dengan mengklik</span> <span>button "</span><span>Reload</span><span>" pada</span> about<span>:</span><span>debugging</span><span>.</span> <span>Anda</span> <span>dapat</span> <span>melihat perubahan</span> <span>segera.</span></span></p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading add-ons</a></li>
+</ul>
+
+<h2 id="Packaging_dan_publishing">Packaging dan publishing</h2>
+
+<p><span id="result_box" lang="id"><span>Bagi orang lain yang akan untuk</span> <span>menggunakan</span> <span>add</span><span>-on</span><span>, Anda</span> <span>perlu memaketkan</span> <span>itu</span> <span>dan</span> <span>mengirimkannya ke</span> <span>Mozilla</span> <span>untuk</span> <span>penandaan</span><span>.</span> <span>Untuk mempelajari lebih lanjut</span> <span>tentang itu</span><span>, lihat</span></span> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your WebExtension"</a>.</p>
+
+<h2 id="Apa_berikutnya"><span class="short_text" id="result_box" lang="id"><span>Apa berikutnya?</span></span></h2>
+
+<p><span id="result_box" lang="id"><span>Sekarang</span> <span>Anda punya</span> <span>ide dari</span> <span>proses pengembangan</span> <span>WebExtension</span> <span>untuk</span> <span>Firefox</span><span>, coba:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of WebExtensions</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available to WebExtensions.</a></li>
+</ul>