1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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>
|
