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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
|
---
title: Tworzymy rozszerzenie
slug: conflicting/Mozilla/Add-ons
tags:
- Dodatki
- Rozszerzenia
translation_of: Mozilla/Add-ons
translation_of_original: Building_an_Extension
original_slug: Tworzymy_rozszerzenie
---
<h2 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h2>
<p>Ten przewodnik przeprowadzi Cię przez kilka kroków potrzebnych do stworzenia bardzo prostego <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzenia</a>, które doda do Firefoksa panel na pasku statusu z tekstem "Witaj Świecie!"</p>
<div class="note"><strong>Uwaga!</strong> Ten artykuł dotyczy tworzenia rozszerzenia dla Firefoksa 1.5 i późniejszych. Istnieją także przewodniki na temat budowy rozszerzeń dla starszych wersji Firefoksa.</div>
<h2 id="Przygotowanie_.C5.9Brodowiska_programowania" name="Przygotowanie_.C5.9Brodowiska_programowania">Przygotowanie środowiska programowania</h2>
<p>Rozszerzenia są spakowane i rozpowszechniane w plikach ZIP lub <a href="/pl/Paczki" title="pl/Paczki">paczkach</a> z rozszerzeniem pliku <code>xpi</code> (<em>wymawiane jak “zippy”</em>). Układ zawartości wewnątrz pliku XPI może wyglądać następująco:</p>
<pre class="eval">extension.xpi:
/<a href="/pl/Manifesty_Instalacji" title="pl/Manifesty_Instalacji">install.rdf</a>
/<a href="#Komponenty_XPCOM">components/*</a>
/<a href="#Linia_polece.C5.84_aplikacji">components/cmdline.js</a>
/<a href="#Pliki_domy.C5.9Blne">defaults/</a>
/<a href="#Pliki_domy.C5.9Blne">defaults/preferences/*.js</a>
/plugins/*
/<a href="/pl/Rejestracja_Chrome" title="pl/Rejestracja_Chrome">chrome.manifest</a>
/<a href="/pl/Ikony_okna" title="pl/Ikony_okna">chrome/icons/default/*</a>
/chrome/
/chrome/content/
</pre>
<p>Z tego powodu najłatwiej będzie układać pliki źródłowe w podobny sposób, chyba że chcesz napisać coś w stylu pliku Makefile lub skryptu powłoki, aby spakować wszystkie swoje pliki. Nawet, jeśli jesteś gotów to zrobić, testowanie rozszerzenia będzie znacznie łatwiejsze, jeśli ułożysz swoje pliki w powyższy sposób, ze względu na sposób pracy systemu Dodatków Firefoksa 1.5.</p>
<p>Zaczynajmy. Utwórz gdzieś na swoim dysku folder dla Twojego rozszerzenia, np. <code>C:\extensions\my_extension\</code> lub <code>~/extensions/my_extension/</code>. (Uwaga: Używaj tylko małych liter) Wewnątrz tego folderu tworzymy kolejny o nazwie <code>chrome</code>, następnie wewnątrz <code>chrome</code> tworzymy folder <code>content</code>. (W systemach Uniksowych można zazwyczaj stworzyć wszystkie trzy foldery za pomocą polecenia <code>mkdir -p chrome/content</code> wydanego w głównym katalogu rozszerzenia.)</p>
<p>Wewnątrz <strong>głównego</strong> folderu rozszerzenia, obok folderu <code>chrome</code>, tworzymy dwa puste pliki tekstowe: <code>chrome.manifest</code> oraz <code>install.rdf</code>.</p>
<p>Przykładowo:</p>
<pre>#!/bin/sh
h=$HOME/moExt
mkdir -p $h/my_extension/chrome/content
touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf
</pre>
<p>Więcej wskazówek na temat tego jak przygotowywać środowisko programistyczne można znaleźć w artykule <a href="/pl/Przygotowanie_%C5%9Brodowiska_programowania_rozszerzenia" title="pl/Przygotowanie_środowiska_programowania_rozszerzenia">Przygotowanie środowiska programowania rozszerzenia</a>.</p>
<h2 id="Tworzenie_manifestu_instalacji" name="Tworzenie_manifestu_instalacji">Tworzenie manifestu instalacji</h2>
<p>Otwieramy plik <code><a href="/pl/Manifesty_Instalacji" title="pl/Manifesty_Instalacji">install.rdf</a></code>, który utworzyliśmy w głównym katalogu rozszerzenia i wpisujemy tam:</p>
<pre class="eval"><?xml version="1.0"?>
<RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>">
<Description about="urn:mozilla:install-manifest">
<em:id><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong></em:id>
<em:version><strong>1.0</strong></em:version>
<em:type>2</em:type>
<!-- Target Application this extension can install into,
with minimum and maximum supported versions. -->
<em:targetApplication>
<Description>
<em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id>
<em:minVersion><strong>1.0+</strong></em:minVersion>
<em:maxVersion><strong>1.5.0.*</strong></em:maxVersion>
</Description>
</em:targetApplication>
<!-- Front End MetaData -->
<em:name><strong>Sample!</strong></em:name>
<em:description><strong>A test extension</strong></em:description>
<em:creator><strong>Your Name Here</strong></em:creator>
<em:homepageURL><strong><span class="nowiki">http://www.foo.com/</span></strong></em:homepageURL>
</Description>
</RDF>
</pre>
<ul>
<li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - Identyfikator rozszerzenia. Jest to wartość, która pozwala zidentyfikować rozszerzenia, w formacie adresu email (zauważ, ze nie powinien to być <strong>Twój</strong> adres e-mail). Powinna być to wartość unikatowa. Możesz użyć także GUID. UWAGA: parametr ten MUSI posiadać format adresu e-mail, ale NIE musi to być poprawny adres <a class="link-mailto" href="mailto:(cośtam@coś.coś)" rel="freelink">(cośtam@coś.coś)</a>.</li>
<li>Określ <code><em:type>2</em:type></code> -- cyfra 2 wskazuje, że plik opisuje rozszerzenie (zobacz inne <a href="/pl/Manifesty_Instalacji#type" title="pl/Manifesty_Instalacji#type">typy kodów</a>).</li>
<li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Identyfikator aplikacji Firefox.</li>
<li><strong>1.0+</strong> - Minimalna wersja Firefoksa, na której rozszerzenie będzie działać. Ustaw tu minimalną wersję Firefoksa, dla której będziemy testować rozszerzenie i przygotowywać poprawki błędów.</li>
<li><strong>1.5.0.*</strong> - Maksymalna wersja Firefoksa, na której rozszerzenie będzie działać. Ustaw tak, aby wersja ta nie była nowsza niż najnowsza dostępna obecnie wersja Firefoksa!</li>
</ul>
<p>Zobacz <a href="/pl/Manifesty_Instalacji" title="pl/Manifesty_Instalacji">Manifesty Instalacji</a>, gdzie znajdziesz kompletną listę wymaganych i opcjonalnych właściwości.</p>
<p>Zapisz plik.</p>
<h2 id="Rozszerzanie_przegl.C4.85darki_przy_u.C5.BCyciu_j.C4.99zyka_XUL" name="Rozszerzanie_przegl.C4.85darki_przy_u.C5.BCyciu_j.C4.99zyka_XUL">Rozszerzanie przeglądarki przy użyciu języka XUL</h2>
<p>Interfejs użytkownika w Firefoksie napisany jest w XUL i JavaScript. <a href="/pl/XUL" title="pl/XUL">XUL</a> jest językiem zgodnym z językiem XML, pozwala on na tworzenie elementów interfejsu użytkownika takich jak: przyciski, menu, paski narzędzi itp. Akcje użytkownika są powiązane z funkcjami przy użyciu języka JavaScript.</p>
<p>Aby rozszerzyć możliwości przeglądarki, zmieniamy interfejs użytkownika poprzez dodanie lub modyfikację kontrolek. Możemy dodać elementy interfejsu poprzez wstawienie nowych elementów DOM XUL do okna przeglądarki i zmodyfikowanie ich poprzez dodanie skryptów i uchwytów zdarzeń.</p>
<p>Przeglądarka jest zaimplementowana w pliku XUL o nazwie <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> zawiera <code>content/browser/browser.xul</code>). W browser.xul znajdziemy pasek stanu, który wygląda mniej więcej tak:</p>
<pre class="eval"><statusbar id="status-bar">
... <statusbarpanel>s ...
</statusbar>
</pre>
<p><code><statusbar id="status-bar"></code> jest punktem wiązania dla nakładki XUL.</p>
<h5 id="Nak.C5.82adki_XUL" name="Nak.C5.82adki_XUL">Nakładki XUL</h5>
<p><a href="/pl/Nak%C5%82adki_XUL" title="pl/Nakładki_XUL">Nakładki XUL</a> są metodą na dołączanie w locie elementów interfejsu XUL do gotowych dokumentów XUL. Nakładka XUL to plik o rozszerzeniu .xul określający fragmenty w języku XUL, które mają zostać dołączone do określonego punktu wiązania w dokumencie głównym. Fragmenty te mogą określać elementy interfejsu, które mają zostać dodane, usunięte lub zmodyfikowane.</p>
<p><strong>Przykładowy dokument nakładki XUL</strong> {{ Ref(1) }}</p>
<pre class="eval"><?xml version="1.0"?>
<overlay id="sample"
xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>">
<statusbar id="<strong>status-bar</strong>">
<statusbarpanel id="my-panel" label="Witaj świecie!"/>
</statusbar>
</overlay>
</pre>
<p>Element <code><statusbar></code> nazwany <code><strong>status-bar</strong></code> określa "punkt wiązania" w oknie przeglądarki, do którego chcemy się podpiąć.</p>
<p>Element podrzędny ("dziecko") <code><statusbarpanel></code> jest nowym elementem interfejsu, który chcemy wstawić wewnątrz elementu będącego punktem wiązania.</p>
<p>Skopiuj przykładowy kod podany powyżej i zapisz go w pliku o nazwie <code><strong>sample.xul</strong></code> wewnątrz katalogu <code>chrome/content</code>, który wcześniej utworzyłeś.</p>
<p>Aby dowiedzieć się więcej na temat wiązania elementów interfejsu i modyfikowania interfejsu użytkownika przy zastosowaniu Nakładek, czytaj dalej.</p>
<h2 id="Chrome_URI" name="Chrome_URI">Chrome URI</h2>
<p>Pliki XUL są częścią "<a href="/pl/Rejestracja_Chrome" title="pl/Rejestracja_Chrome">Pakietów Chrome</a>" - paczek komponentów interfejsu użytkownika, które są ładowane przy użyciu URI <code><a class="external" rel="freelink">chrome://</a></code>. Zamiast ładować przeglądarkę z dysku używając URI <code><a class="external" rel="freelink">file://</a></code> (ponieważ położenie Firefoksa w systemie może się zmieniać w zależności od platformy i systemu), twórcy Firefoksa wymyślili w jaki sposób tworzyć URI dla zawartości plików XUL, o których wie zainstalowana aplikacja.</p>
<p>URI dla okna przeglądarki to: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> Spróbuj wpisać to URI do paska adresu w Firefoksie!</p>
<p>Chrome URI składa się z kilku części:</p>
<ul>
<li>Po pierwsze, <strong>rodzaju zasobu/usługi URI</strong> (<code>chrome</code>), który mówi bibliotece sieciowej Firefoksa, że jest to Chrome URI i że ładowana przez niego zawartość będzie wymagała obsłużenia w specjalny sposób.</li>
<li>Po drugie, nazwy pakietu (w przykładzie powyżej, <code><strong>browser</strong></code>), która identyfikuje paczkę komponentów interfejsu użytkownika. Ta nazwa powinna być tak unikalna dla twojej aplikacji jak to możliwe, aby uniknąć kolizji między rozszerzeniami.</li>
<li>Po trzecie, typ żądanych danych. Są trzy typy: <code>content</code> (XUL, JavaScript, wiązania XBL i inne, które tworzą strukturę i funkcjonalność interfejsu użytkownika aplikacji), <code>locale</code> (DTD, pliki .properties (właściwości) i inne, które zawierają łańcuchy znaków dla <a href="/pl/Lokalizacja" title="pl/Lokalizacja">lokalizacji</a>) interfejsu oraz <code>skin</code> (CSS i obrazki, które tworzą <a href="/pl/Motywy" title="pl/Motywy">motyw</a> (wygląd) interfejsu)</li>
<li>Na koniec, ścieżka do pliku, który ma zostać załadowany przez URI.</li>
</ul>
<p>Tak więc, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> ładuje plik <code>bar.png</code> z sekcji <code>skin</code> rozszerzenia <code>foo</code>.</p>
<p>Kiedy ładujesz zawartość używając Chrome URI, Firefox używa rejestru Chrome do przetłumaczenia tych identyfikatorów URI na właściwe pliki źródłowe na dysku (lub w archiwach JAR).</p>
<h2 id="Tworzenie_Manifestu_Chrome" name="Tworzenie_Manifestu_Chrome">Tworzenie Manifestu Chrome</h2>
<p>Więcej informacji o manifeście Chrome i obsługiwanych przez niego właściwościach znajdziesz w dokumentacji <a href="/pl/Rejestracja_Chrome" title="pl/Rejestracja_Chrome">Manifestu Chrome</a>.</p>
<p>Otwórz plik o nazwie <strong>chrome.manifest</strong>, który stworzyłeś obok katalogu <code>chrome</code> w głównym katalogu rozszerzenia.</p>
<p>Dodaj poniższy kod:</p>
<pre class="eval">content sample chrome/content/
</pre>
<p>(<strong>Nie zapomnij o ukośnikach "<code>/</code>"!</strong> Bez nich pakiet nie zostanie zarejestrowany.)</p>
<p>Dane w pliku określają:</p>
<ol>
<li>typ zawartości przechowywanej w pakiecie chrome,</li>
<li>nazwę pakietu chrome (używaj wyłącznie małych liter w nazwie rozszerzenia ("sample"), ponieważ Firefoks/Thunderbird nie obsługuje mieszanych wielkości liter w wersji 2 oraz wcześniejszych - {{ Bug(132183) }}),</li>
<li>położenie plików pakietu chrome.</li>
</ol>
<p>Zatem powyższa linia informuje, że dla pakietu <strong>sample</strong> możemy znaleźć pliki zawierające dane typu <strong>content</strong> (zawartość) w lokalizacji <code>chrome/content</code>, podanej względem położenia pliku <code>chrome.manifest</code>.</p>
<p>Zauważ, że pliki zawartości, lokalizacji i motywu muszą być zawarte wewnątrz folderów content, locale oraz skin wewnątrz twojego podkatalogu <code>chrome</code>.</p>
<p>Zapisz plik. Kiedy załadujesz Firefoksa z twoim rozszerzeniem (dalej w tym przewodniku), ten plik umożliwi zarejestrowanie Twojego pakietu chrome.</p>
<h4 id="Rejestrowanie_nak.C5.82adki" name="Rejestrowanie_nak.C5.82adki">Rejestrowanie nakładki</h4>
<p>Chcemy, aby Firefox łączył Twoją nakładkę z oknem przeglądarki, zawsze gdy jest ono wyświetlane. Dodaj tą linię do twojego pliku <code>chrome.manifest</code> :</p>
<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
</pre>
<p>Mówi ona Firefoksowi, żeby połączył <code>sample.xul</code> i <code>browser.xul</code>, gdy <code>browser.xul</code> jest ładowany.</p>
<h2 id="Test" name="Test">Test</h2>
<p>Po pierwsze, musimy powiedzieć przeglądarce Firefox o Twoim rozszerzeniu. W starych, złych czasach Firefoksa 1.0 oznaczało to spakowanie rozszerzenia jako XPI i zainstalowanie go przez interfejs użytkownika, co było naprawdę nieprzyjemne. Teraz jest to znacznie prostsze.</p>
<ol>
<li>Otwórz swój <a class="external" href="http://kb.mozillazine.org/Profile_folder">folder profilu</a>,</li>
<li>Otwórz folder <strong>extensions</strong> (stwórz go, jeśli nie istnieje),</li>
<li>Stwórz nowy plik tekstowy i umieść w nim ścieżkę do folderu twojego rozszerzenia, np. <code>C:\extensions\myExtension\</code> lub <code>~/extensions/myExtension</code>. Zapisz plik z identyfikatorem twojego rozszerzenia jako jego nazwą, np. <code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code>.</li>
</ol>
<p>(<strong>Nie zapomnij o ukośniku "<code>/</code>"!</strong> Bez niego rozszerzenie nie zostanie zarejestrowane.)</p>
<p>Teraz jesteś gotowy do testowania swojego rozszerzenia!</p>
<p>Uruchom Firefoksa. Firefox wykryje plik z odnośnikiem do katalogu Twojego rozszerzenia i zainstaluje rozszerzenie. Kiedy pojawi się okno przeglądarki, powinieneś zobaczyć tekst "Witaj świecie!" z prawej strony paska statusu.</p>
<p>Możesz teraz wrócić i zmienić plik .xul, uruchomić ponownie Firefoksa - zmiany powinny się pojawić.</p>
<center>
<p><img alt="grafika:Helloworld_status_bar.PNG" class="internal" src="/@api/deki/files/2319/=Helloworld_status_bar.PNG"></p>
<p><img alt="grafika:Helloworld_extensions_wnd.PNG" class="internal" src="/@api/deki/files/2317/=Helloworld_extensions_wnd.PNG"></p>
</center>
<h2 id="Pakowanie" name="Pakowanie">Pakowanie</h2>
<p>Teraz, gdy twoje rozszerzenie działa, możesz je spakować w celu umożliwienia dystrybucji i instalacji.</p>
<p>Spakuj jako archiwum zip <strong>zawartość</strong> katalogu rozszerzenia (nie sam folder rozszerzenia) i zmień rozszerzenie pliku zip na rozszerzenie .xpi. W Windows XP możesz to łatwo zrobić przez zaznaczenie wszystkich plików i podfolderów w katalogu rozszerzenia, kliknięcie prawym przyciskiem myszy i wybranie "Wyślij do -> Folder skompresowany (zip)". Plik .zip zostanie utworzony. Teraz tylko zmień nazwę i gotowe!</p>
<p>Teraz wgraj plik .xpi na serwer i upewnij się, że jest obsługiwany jako <code>application/x-xpinstall</code>. Możesz podlinkować plik i umożliwić ludziom ściąganie i instalowanie Twojego rozszerzenia w Firefoksie.</p>
<h3 id="Zastosowanie_addons.mozilla.org" name="Zastosowanie_addons.mozilla.org">Zastosowanie addons.mozilla.org</h3>
<p>Mozilla Update jest witryną służącą do rozpowszechniania rozszerzeń, gdzie możesz umieścić swoje rozszerzenie za darmo. Rozszerzenie będzie przechowywane w sieci mirrorów Mozilli gwarantując możliwość ściągnięcia go, nawet jeżeli będzie ono bardzo popularne. Witryna Mozilli umożliwia także użytkownikom łatwiejszą instalację i automatyczne uaktualnienia do nowych wersji po ich udostępnieniu przez Ciebie. W dodatku Mozilla Update pozwala użytkownikom komentować i dostarczać opinie na temat twojego rozszerzenia. Rozpowszechnianie swoich rozszerzeń za pomocą Mozilla Update jest bardzo zalecane!</p>
<p>Odwiedź <a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a>, załóż konto i zacznij rozpowszechnianie swoich rozszerzeń!</p>
<p><em>Uwaga:</em> Twoje rozszerzenie może być szybciej udostępnione i częściej ściągane, jeśli masz jego dobry opis i ekranowe zrzuty rozszerzenia w akcji.</p>
<h3 id="Rejestrowanie_rozszerze.C5.84_w_rejestrze_Windows" name="Rejestrowanie_rozszerze.C5.84_w_rejestrze_Windows">Rejestrowanie rozszerzeń w rejestrze Windows</h3>
<p>W systemie Windows informacja o rozszerzeniach może być dodana do rejestru, wtedy rozszerzenia będą automatycznie instalowane następnym razem, gdy aplikacja (Firefox/Thunderbird) uruchamia się. To umożliwia instalatorom innych aplikacji łatwe integrowanie się z Firefoksem i innymi aplikacjami Mozilli poprzez rozszerzenia. Zobacz <a href="/pl/Dodawanie_rozszerze%C5%84_poprzez_rejestr_systemu_Windows" title="pl/Dodawanie_rozszerzeń_poprzez_rejestr_systemu_Windows">Dodawanie rozszerzeń poprzez rejestr systemu Windows</a> w celu uzyskania dalszych informacji.</p>
<h2 id="Wi.C4.99cej_o_nak.C5.82adkach_XUL" name="Wi.C4.99cej_o_nak.C5.82adkach_XUL">Więcej o nakładkach XUL</h2>
<p>Poza dołączaniem kontrolek interfejsu użytkownika do punktów łączenia możesz użyć fragmentów XUL w Nakładkach do:</p>
<ul>
<li>Modyfikowania atrybutów punktu łączenia, np. <code><statusbar id="status-bar" hidden="true"/></code> (ukrywa pasek statusu)</li>
<li>Usunięcia punktu łączenia z głównego dokumentu, np. <code><statusbar id="status-bar" removeelement="true"/></code></li>
<li>Kontrolowania pozycji wstawianych kontrolek:</li>
</ul>
<pre class="eval"><statusbarpanel position="1" .../>
<statusbarpanel insertbefore="other-id" .../>
<statusbarpanel insertafter="other-id" .../>
</pre>
<h2 id="Tworzenie_nowego_komponentu_interfejsu_u.C5.BCytkownika" name="Tworzenie_nowego_komponentu_interfejsu_u.C5.BCytkownika">Tworzenie nowego komponentu interfejsu użytkownika</h2>
<p>Możesz tworzyć swoje własne okna i okienka dialogowe jako oddzielne pliki .xul, dostarczać nową funkcjonalność poprzez implementację akcji w plikach .js, używać metod <a href="/pl/O_modelu_obiektowym_dokumentu" title="pl/O_modelu_obiektowym_dokumentu">DOM</a> do manipulowania kontrolkami interfejsu użytkownika. Możesz używać stylów w plikach .css do dołączania obrazków, ustawiania kolorów itp.</p>
<p>Zobacz dokumentację <a href="/pl/XUL" title="pl/XUL">XUL</a>, znajdziesz w niej więcej zasobów dla programistów XUL.</p>
<h2 id="Pliki_domy.C5.9Blne" name="Pliki_domy.C5.9Blne">Pliki domyślne</h2>
<p>Domyślne pliki, których używasz do stworzenia profilu użytkownika powinny być umieszczone w katalogu <code>defaults/</code> w głównym folderze hierarchii katalogów Twojego rozszerzenia. Pliki domyślnych preferencji .js powinny być przechowywane w <code>defaults/preferences/</code> - kiedy umieścisz je tutaj, będą one automatycznie ładowane przez system preferencji Firefoksa podczas startu tak, że będziesz miał do nich dostęp używając <a href="/pl/API_Preferencji" title="pl/API_Preferencji">Preferencji API</a>.</p>
<p>Przykładowy plik domyślny preferencji:</p>
<pre class="eval">pref("extensions.sample.username", "Joe"); //tekst
pref("extensions.sample.sort", 2); //liczba
pref("extensions.sample.showAdvanced", true); //wartość logiczna
</pre>
<h2 id="Komponenty_XPCOM" name="Komponenty_XPCOM">Komponenty XPCOM</h2>
<p>Firefox obsługuje komponenty <a href="/pl/XPCOM" title="pl/XPCOM">XPCOM</a> w rozszerzeniach. Możesz łatwo stworzyć swoje własne komponenty w JavaScript lub C++ (używając <a href="/pl/SDK_Gecko" title="pl/SDK_Gecko">SDK Gecko</a>).</p>
<p>Wszystkie pliki .js lub .dll umieszczamy w katalogu <code>components/</code> - zostaną one automatycznie zarejestrowane przy pierwszym uruchomieniu Firefoksa po instalacji rozszerzenia.</p>
<p>Aby uzyskać więcej informacji, zobacz <a href="/pl/Jak_stworzy%C4%87_komponent_XPCOM_w_Javascripcie" title="pl/Jak_stworzyć_komponent_XPCOM_w_Javascripcie">Jak stworzyć komponent XPCOM w Javascripcie</a>, <a href="/pl/Jak_stworzy%C4%87_binarny_komponent_XPCOM_u%C5%BCywaj%C4%85c_Visual_Studio" title="pl/Jak_stworzyć_binarny_komponent_XPCOM_używając_Visual_Studio">Jak stworzyć binarny komponent XPCOM używając Visual Studio</a> oraz <a href="/pl/Tworzenie_komponent%C3%B3w_XPCOM" title="pl/Tworzenie_komponentów_XPCOM">Tworzenie komponentów XPCOM</a>.</p>
<h3 id="Linia_polece.C5.84_aplikacji" name="Linia_polece.C5.84_aplikacji">Linia poleceń aplikacji</h3>
<p>Jednym z możliwych zastosowań komponentów XPCOM wykonanych specjalnie do tego celu jest dodanie agenta linii poleceń do Firefoksa lub Thunderbirda. Możesz użyć tej techniki do uruchamiania swojego rozszerzenia jako aplikacji:</p>
<pre class="eval"> firefox.exe -myapp
</pre>
<p>Zobacz <a href="/pl/Chrome/Linia_polece%C5%84" title="pl/Chrome/Linia_poleceń">Chrome:Linia poleceń</a> i <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">dyskusję na forum</a>, aby poznać szczegóły.</p>
<h2 id="Lokalizacja" name="Lokalizacja">Lokalizacja</h2>
<p>Dla obsługi więcej niż jednego języka, powinieneś rozdzielić teksty napisów od reszty zawartości Twojego rozszerzenia używając do tego <a href="/pl/Kurs_XUL/Lokalizacja#Encje" title="pl/Kurs_XUL/Lokalizacja#Encje">encji</a> i <a href="/pl/Kurs_XUL/Plik_w%C5%82asno%C5%9Bci" title="pl/Kurs_XUL/Plik_własności">plików własności</a>. Dużo łatwiej zrobić to podczas tworzenia rozszerzenia niż wracać do tego później.</p>
<p>Informacje o lokalizacji dla Twojego rozszerzenia są przechowywane w katalogu locale. Na przykład, dla dodania lokalizacji do naszego przykładowego rozszerzenia, stwórz katalog "locale" w chrome (gdzie ulokowany jest katalog "content") i dodaj następującą linię do pliku chrome.manifest:</p>
<pre class="eval">locale sample sampleLocale chrome/locale/
</pre>
<p>Dla stworzenia lokalizowalnej wartości atrybutu w XUL wstaw te wartości do pliku <code>.dtd</code>, który powinien być umieszczony w katalogu locale i wyglądać tak:</p>
<pre class="eval"><!ENTITY button.label "Click Me!">
<!ENTITY button.accesskey "C">
</pre>
<p>I następnie dołącz go na początku Twojego dokumentu XUL (ale pod "<?xml version"1.0"?>"), tak jak poniżej:</p>
<pre class="eval"><!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://sample/locale/filename.dtd</a>">
</pre>
<p>gdzie: <code>window</code> jest wartością atrybutu <code><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></code>, głównego elementu dokumentu XUL, a wartość własności <code>SYSTEM</code> jest identyfikatorem chrome URI pliku encji. Dla naszego prostego rozszerzenia, głównym elementem jest <code>overlay</code>.</p>
<p>Aby użyć encji, zmodyfikuj swój kod XUL, tak żeby wyglądał jak ten (poniższa linia musi być zawarta wewnątrz elementu <code><statusbar id="status-bar"></code> z poprzedniego przykładu):</p>
<pre class="eval"><button label="&button.label;" accesskey="&button.accesskey;"/>
</pre>
<p>Rejestr Chrome załaduje plik encji z pakietu lokalizacyjnego odpowiadającego wybranej lokalizacji.</p>
<p>Dla łańcuchów znaków, których używasz w skrypcie, utwórz plik tekstowy <code>.properties</code>, który w każdej linii ma łańcuchy znaków w formacie:</p>
<pre class="eval">key=value
</pre>
<p>i następnie użyj: <code><a href="/pl/NsIStringBundleService" title="pl/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/pl/NsIStringBundle" title="pl/NsIStringBundle">nsIStringBundle</a></code> lub znacznika <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html"><stringbundle></a></code> w celu załadowania wartości do skryptu.</p>
<h2 id="Zrozumienie_przegl.C4.85darki" name="Zrozumienie_przegl.C4.85darki">Zrozumienie przeglądarki</h2>
<p>Użyj <a href="/pl/Inspektor_DOM" title="pl/Inspektor_DOM">Inspektora DOM</a> (nie jest on częścią <strong>Standardowej</strong> instalacji Firefoksa; musisz go zainstalować z użyciem instalacji Użytkownika i wybrać <strong>Narzędzia programistyczne</strong> jeśli nie ma składnika "Inspektor DOM" w menu Narzędzia w twojej przeglądarce) do zbadania okna przeglądarki lub każdego innego okna XUL, które chcesz zmodyfikować.</p>
<p>Użyj przycisku "Wybierz węzeł do zbadania poprzez kliknięcie na nim" z paska narzędzi położonego u góry na lewo Inspektora DOM do kliknięcia na element (węzeł) w oknie przeglądarki. Kiedy to zrobisz widok drzewa hierarchii DOM w oknie Inspektora DOM przeniesie się na węzeł, na który kliknąłeś.</p>
<p>Użyj prawego panelu Inspektora DOM w celu znalezienia punktów łączenia z identyfikatorami, których możesz użyć przy wstawianiu swoich elementów z nakładek. Jeśli nie możesz znaleźć elementu z identyfikatorem, do któregoś mógłbyś się podłączyć, być może będziesz musiał dołączyć skrypt do swojej nakładki i wstawiać swoje elementy, kiedy zdarzenie <code>load</code> zostanie odpalone w głównym oknie XUL.</p>
<h2 id="Debugowanie_rozszerze.C5.84" name="Debugowanie_rozszerze.C5.84">Debugowanie rozszerzeń</h2>
<p><strong>Analityczne narzędzia do debugowania</strong></p>
<ul>
<li><a href="/pl/Inspektor_DOM" title="pl/Inspektor_DOM">Inspektor DOM</a> - bada atrybuty, strukturę DOM, style CSS, których używasz (np. odkrywa, dlaczego Twój styl wydaje się nie działać dla elementu - nieocenione narzędzie!)</li>
<li><a href="/pl/Venkman" title="pl/Venkman">Venkman</a> - ustawia pułapki (breakpointy) w skryptach JavaScript i bada stos wywołań</li>
<li><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Funkcje/arguments/callee" title="pl/Dokumentacja_języka_JavaScript_1.5/Funkcje/arguments/callee">arguments.callee</a>.<a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Function/caller" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function/caller">caller</a></code> w JavaScript - dostęp do stosu wywołań funkcji.</li>
</ul>
<p><strong>Debugowanie printf</strong></p>
<ul>
<li>Uruchom Firefoksa z opcją <code>-console</code> z linii poleceń i używaj <code><a href="/pl/DOM/window.dump" title="pl/DOM/window.dump">dump</a>("string")</code> (zobacz odnośnik, aby dowiedzieć się szczegółów),</li>
<li>Używaj <code><a href="/pl/nsIConsoleService" title="pl/nsIConsoleService">nsIConsoleService</a></code> do wyświetlania logów w konsoli JavaScript.</li>
</ul>
<p><strong>Zaawansowane debugowanie</strong></p>
<ul>
<li>Uruchom wersję Firefoksa skompilowaną ze wsparciem dla debugowania i ustaw pułapki w samym Firefoksie lub Twoim komponencie C++. Dla doświadczonych twórców rozszerzeń, jest to często najszybszy sposób zdiagnozowania problemu. Przejrzyj <a href="/pl/Dokumentacja_kompilacji" title="pl/Dokumentacja_kompilacji">Dokumentacja kompilacji</a> i <a href="/pl/Programowanie_Mozilli" title="pl/Programowanie_Mozilli">Programowanie_Mozilli</a> w celu uzyskania dalszych informacji.</li>
<li>Zobacz <a href="/pl/Debugowanie_aplikacji_XULRunner" title="pl/Debugowanie_aplikacji_XULRunner">Debugowanie aplikacji XULRunner</a>, aby uzyskać więcej pomocnych wskazówek.</li>
</ul>
<h2 id="Szybki_start" name="Szybki_start">Szybki start</h2>
<p>Możesz zastosować narzędzie <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Kreator rozszerzeń</a> do generowania prostych rozszerzeń, które potem możesz modyfikować.</p>
<p>Rozszerzenie <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World</a> podobne do tych, które można wygenerować Kreatorem Rozszerzeń jest opisane linijka po linijce w <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">innym przewodniku MozillaZine Knowledge Base</a>.</p>
<h2 id="Dalsze_informacje" name="Dalsze_informacje">Dalsze informacje</h2>
<pre class="eval">* <a href="/pl/Rozszerzenia_-_FAQ" title="pl/Rozszerzenia_-_FAQ">Rozszerzenia - FAQ</a>
* <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">Rozszerzenia</a>
</pre>
<hr>
<p>{{ Note(1) }}Dwie uwagi do tego punktu:</p>
<ul>
<li>Jeżeli chcesz użyć polskich liter, powinieneś zapisać plik w formacie UTF-8 (w Windows XP wystarczy do tego Notatnik)</li>
<li>Zgodnie z sugestią w <a class="external" href="http://developer.mozilla.org/en/docs/Talk:Building_an_Extension#No_Hello_World.21_in_the_status_bar.3F">tym komentarzu</a> - jeżeli napis na pasku statusu nie pokaże się podczas testowania rozszerzenia, to być może inne zainstalowane rozszerzenie również wykorzystuje panel na pasku statusu o id "my-panel". Warto wtedy spróbować zmienić w powyższym kodzie id="my-panel" np. na id="my-panel123" i ponownie uruchomić przeglądarkę.</li>
</ul>
|