---
title: Twoje pierwsze rozszerzenie
slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
tags:
- Add-ons
- Dodatki
- Extensions
- Przewodnik
- WebExtensions
- Wtyczki
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
original_slug: Mozilla/Add-ons/WebExtensions/Twój_pierwszy_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>