From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../your_first_webextension/index.html | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html (limited to 'files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html') 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 +--- +
{{AddonSidebar}}
+ +

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.

+ +

Kod źródłowy dla tego przykładu znajduje się na GitHub'ie: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Najpierw, będziesz potrzebować przeglądarki Firefox w wersji 45 lub nowszej.

+ +

Pisanie rozszerzenia

+ +

Stwórz nowy folder i przejdź do niego:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Teraz stwórz nowy plik o nazwie "manifest.json" bezpośrednio w katalogu "borderify". Wprowadź do niego poniższy kod:

+ +
{
+
+  "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"]
+    }
+  ]
+
+}
+ + + +

Najbardziej interesującym kluczem jest tutaj content_scripts, 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ę.

+ + + +
+

W niektórych sytuacjach musisz nadać ID swojemu rozszerzeniu. Jeśli potrzebujesz nadać rozszerzeniu ID, dołącz klucz applications do manifest.json i przypisz mu pole id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@przyklad.pl"
+  }
+}
+
+ +

icons/border-48.png

+ +

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".

+ +

Stwórz folder "icons" bezpośrednio w katalogu "borderify". Zapisz tam ikonę o nazwie "border-48.png". Możesz użyć tej naszej przykładowej, która pochodzi ze zbioru ikon Google Material Design i jest używana zgodnie z warunkami licencji Creative Commons Attribution-ShareAlike.

+ +

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 icons 
+ w pliku manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

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).

+ + + +

borderify.js

+ +

Ostatecznie stwórz plik o nazwie "borderify.js" bezpośrednio w katalogu "borderify". Wpisz do niego poniższy kod:

+ +
document.body.style.border = "5px solid red";
+ +

Ten skrypt będzie załadowany na stronach spełniających wzór określony w kluczu content_scripts w pliku manifest.json. Skrypt ma bezpośredni dostęp do dokumentu, podobnie jak skrypty wczytane przez stronę.

+ + + +

Wypróbujmy

+ +

Najpierw dokładnie sprawdź, czy odpowiedne pliki są w właściwych miejsacach:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalacja

+ +

Otwórz "about:debugging" w przeglądarce Firefox, kliknij "Załaduj tymczasową wtyczkę" i wybierz jakikolwiek plik z katalogu z Twoim rozszerzeniem:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

Rozszerzenie zostanie teraz zainstalowane i pozostanie tam do momentu ponownego uruchomienia Firefoksa.

+ +

Alternatywnie, możesz także uruchomić swoje rozszerzenie za pomocą wiersza poleceń używając narzędzie web-ext.

+ +

Testowanie

+ +

Teraz spróbuj odwiedzić jakąś stronę należącą do "mozilla.org" i powinienieś zobaczyć czerwoną ramkę wokół strony:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Jednakże nie próbuj tego na addons.mozilla.org! Obecnie skrypty są blokowane na tej domenie.

+
+ +

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ć zmiany odrazu:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Pakowanie i publikowanie

+ +

Aby inni użytkownicy mogli korzystać z Twojego rozszerzenia, musisz je zapakować i wysłać do Mozilli w celu podpisania go. 
+ Aby dowiedzieć się więcej, zajrzyj do artykułu "Publikowanie własnego rozszerzenia".

+ +

Co dalej?

+ +

Teraz gdy ty masz pomysł na temat procesu tworzenia rozszerzeń (WebExtension) dla Firefoxa, to spróbuj:

+ + -- cgit v1.2.3-54-g00ecf