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
154
155
156
157
|
---
title: İlk Eklentin
slug: Mozilla/Eklentiler/WebExtensions/İlk_Eklentin
tags:
- Rehber
- WebEklentileri
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<div>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.</div>
<div></div>
<div>Bu örnek için kaynak kodlar GitHub'ta: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</div>
<div></div>
<p>İlk olarak Firefox 45 veya sonraki bir versiyona ihtiyacımız olacak.</p>
<h2 id="Eklentiyi_yazmak">Eklentiyi yazmak</h2>
<p>Yeni bir dizin oluşturup içine girelim. Örneğin terminalden şu şekilde yapabiliriz:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>Şimdi "manifest.json" isimli yeni bir dosya oluşturarak dosyanın içeriğine aşağıdakileri ekleyelim.</p>
<pre class="brush: json">{
"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"]
}
]
}</pre>
<ul>
<li>İlk 3 özellik olan: <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>, ve <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, zorunlu alanlar ve bu eklenti için gerekli üstveriyi içeriyor.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> isteğe bağlı bir alan. Ancak Eklenti Yöneticisi'nde göründüğü için eklenmesi tavsiye ediliyor.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> isteğe bağlı bir alan. Eklenti Yöneticisi'nde gösterilecek ikonu belirtmek için kullanıldığından eklenmesi tavsiye ediliyor.</li>
</ul>
<p>Buradaki en ilginç özellik <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. 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.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts hakkında daha fazlasını öğren.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Eşleşme örüntüleri hakkında daha fazlasını öğren</a>.</li>
</ul>
<div class="warning">
<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">Bazı durumlarda eklentin için bir kimlik(id) belirtmen gerekebilir. </a>Gerektiğinde <code>manifest.json</code> da <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> içerisine <code>gecko.id</code> özelliğini ekle:</p>
<pre class="brush: json">"applications": {
"gecko": {
"id": "borderify@example.com"
}
}</pre>
</div>
<h3 id="iconsborder-48.png">icons/border-48.png</h3>
<p>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".</p>
<p>"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 <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> lisansına sahip <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">örneğimizdeki ikonu</a> kullanabilirsin.</p>
<p>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 <code>icons</code> altında <code>96</code> olarak 96x96'lık ikonu belirtmen gerekir:</p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p>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.)</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">İkonları ayarlamak hakkında daha fazlasını öğren.</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p>
<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</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>First, double check that you have the right files in the right places:</p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="Installing">Installing</h3>
<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>The extension will now be installed, and will stay until you restart Firefox.</p>
<p>Alternatively, you can run the extension from the command line using the <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>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.</p>
</div>
<p>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:</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading extensions</a></li>
</ul>
<h2 id="Packaging_and_publishing">Packaging and publishing</h2>
<p>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 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your extension"</a>.</p>
<h2 id="What's_next">What's next?</h2>
<p>Now you've got an idea of the process of developing a WebExtension for Firefox, try:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of an extension</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex extension</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available for extensions.</a></li>
</ul>
|
