1 files changed, 159 insertions, 0 deletions
diff --git a/files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..94746493b6
--- /dev/null
+++ b/files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,159 @@
+---
+title: Twoje pierwsze rozszerzenie
+slug: Mozilla/Add-ons/WebExtensions/Twój_pierwszy_WebExtension
+tags:
+  - Add-ons
+  - Dodatki
+  - Extensions
+  - Przewodnik
+  - WebExtensions
+  - Wtyczki
+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 notranslate">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 notranslate">{
+
+  "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 notranslate">"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 notranslate">"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 notranslate">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 class="notranslate">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 anatomii 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>