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
|
---
title: Twoje pierwsze rozszerzenie
slug: Mozilla/Add-ons/WebExtensions/Twój_pierwszy_WebExtension
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<p>W tym artykule przejdziemy przez tworzenie rozszerzenia dla przeglądarki Firefox od początku do końca. Rozszerzenie to tylko dodaje czerwoną ramkę do stron załadowanych z "mozilla.org" lub dowolnej z jej poddomen.</p>
<p>Kod źródłowy dla tego przykładu znajduje się na GitHub'ie: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
<p>Najpierw, będziesz potrzebować przeglądarki Firefox w wersji 45 lub nowszej.</p>
<h2 id="Pisanie_rozszerzenia">Pisanie rozszerzenia</h2>
<p>Stwórz nowy folder i przejdź do niego:</p>
<pre class="brush: bash">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>Teraz stwórz nowy plik o nazwie "manifest.json" bezpośrednio w katalogu "borderify". Wprowadź do niego poniższy kod:</p>
<pre class="brush: json">{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Dodaje czerwoną ramkę we wszystkich stronach powiązanych z domeną mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}</pre>
<ul>
<li>Pierwsze trzy klucze: <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>, oraz <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, są obowiązkowe i zawierają podstawowe metadane dla rozszerzenia.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> jest opcjonalny, ale zalecany: jest on wyświetlany w menadżerze rozszerzeń.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> jest opcjonalna, ale zalecana: pozwala ona nadać ikonę rozszerzeniu, która będzie wyświetlana w menadżerze rozszerzeń.</li>
</ul>
<p>Najbardziej interesującym kluczem jest tutaj <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, który mówi przeglądarce, który skrypt wczytać do stron internetowych, których adres spełnia określony wzór. W tym przypadku prosimy przeglądarkę o wczytanie skryptu o nazwie "borderify.js" na wszystkich stronach HTTP i HTTPS obsługiwanych przez domenę "mozilla.org" bądź jakąkolwiek jej poddomenę.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Dowiedz się więcek na temat zawartości skryptów.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Dowiedz się więcej na temat wzorców</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">W niektórych sytuacjach musisz nadać ID swojemu rozszerzeniu</a>. Jeśli potrzebujesz nadać rozszerzeniu ID, dołącz klucz <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> do <code>manifest.json</code> i przypisz mu pole <code>id</code>:</p>
<pre class="brush: json">"applications": {
"gecko": {
"id": "borderify@przyklad.pl"
}
}</pre>
</div>
<h3 id="iconsborder-48.png">icons/border-48.png</h3>
<p>Rozszerzenie powinno mieć ikonę. Będzie ona wyświetlona na liście dodatków w menadżerze rozszerzeń. Nasz manifest.json zapowiada, że będziemy mieć ikonę w "icons/border-48.png".</p>
<p>Stwórz folder "icons" bezpośrednio w katalogu "borderify". Zapisz tam ikonę o nazwie "border-48.png". Możesz użyć <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">tej naszej przykładowej</a>, która pochodzi ze zbioru ikon Google Material Design i jest używana zgodnie z warunkami licencji <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
<p>Jeśli zdecydujesz się dodać własną ikonę, to powinna być w formacie 48x48 pikseli. Możesz także dodać ikonę o rozmiarze 96x96 pikseli dla ekranów o wysokiej rozdzielczości i jeśli dodasz ją, to powinna ona zostać przypisana jako wartość pola 96 obiektu <code>icons</code> <br>
w pliku manifest.json:</p>
<pre class="brush: json">"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}</pre>
<p>Ewentualnie możesz dodać plik SVG tutaj, więc zostanie on poprawnie przeskalowany. (Jeśli jednak używasz SVG, a twoja ikona zawiera napisy, możesz chcieć użyć narzędzia "przekonwertuj do ścieżki" w edytorze SVG, by spłaszczyć tekst, więc będzie skalowo dopasowany do położenia/rozmiaru).</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Dowiedz się więcej o określaniu ikon.</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>Ostatecznie stwórz plik o nazwie "borderify.js" bezpośrednio w katalogu "borderify". Wpisz do niego poniższy kod:</p>
<pre class="brush: js">document.body.style.border = <code class="language-js"><span class="string token">"5px solid red"</span></code>;</pre>
<p>Ten skrypt b<span class="st">ę</span>dzie załadowany na stronach spełniających wzór określony w kluczu <code>content_scripts</code> w pliku manifest.json. Skrypt ma bezpośredni dostęp do dokumentu, podobnie jak skrypty wczytane przez stronę.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Dowiedz się więcej o zawartości skryptów.</a></li>
</ul>
<h2 id="Wypróbujmy">Wypróbujmy</h2>
<p>Najpierw dokładnie sprawdź, czy odpowiedne pliki są w właściwych miejsacach:</p>
<pre>borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="Instalacja">Instalacja</h3>
<p>Otwórz "about:debugging" w przeglądarce Firefox, kliknij "Załaduj tymczasową wtyczkę" i wybierz jakikolwiek plik z katalogu z Twoim rozszerzeniem:</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>Rozszerzenie zostanie teraz zainstalowane i pozostanie tam do momentu ponownego uruchomienia Firefoksa.</p>
<p>Alternatywnie, możesz także uruchomić swoje rozszerzenie za pomocą wiersza poleceń używając narzędzie <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
<h3 id="Testowanie">Testowanie</h3>
<p>Teraz spróbuj odwiedzić jakąś stronę należącą do "mozilla.org" i powinienieś zobaczyć czerwoną ramkę wokół strony:</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>Jednakże nie próbuj tego na addons.mozilla.org! Obecnie skrypty są blokowane na tej domenie.</p>
</div>
<p>Spróbuj trochę poeksperymentować. Edytuj zawartość skryptu by zmienić kolor ramki lub zrób coś innego z zawartością strony. Zapisz skrypt i przeładuj pliki rozszerzenia kilkając przycisk "Przeładuj" w about:debugging. Możesz zobaczy<span class="st">ć</span> zmiany odrazu:</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Dowiedz się więcej o wczytywaniu rozszerzeń</a></li>
</ul>
<h2 id="Pakowanie_i_publikowanie">Pakowanie i publikowanie</h2>
<p>Aby inni użytkownicy mogli korzystać z Twojego rozszerzenia, musisz je zapakować i wysłać do Mozilli w celu podpisania go. <br>
Aby dowiedzieć się więcej, zajrzyj do artykułu <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publikowanie własnego rozszerzenia"</a>.</p>
<h2 id="Co_dalej">Co dalej?</h2>
<p>Teraz gdy ty masz <span class="short_text" id="result_box" lang="pl"><span>pomysł</span></span> na temat procesu tworzenia rozszerzeń (WebExtension) dla Firefoxa, to spróbuj:</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">przeczytać więcej na temat anatomi rozszerzeń</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">napisać bardziej rozbudowane rozszerzenie</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/API">przeczytać o JavaScript API dostępnym dla rozszerzeń.</a></li>
</ul>
|
