MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

W tym artykule omówimy jak od początku do końca stworzyć rozszerzenie do przeglądarki Firefox. Rozszerzenie będzie dodawać czerwoną ramkę do jakiejkolwiek strony wczytanej
z domeny "mozilla.org" lub z jakiejkolwiek 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.

Po pierwsze 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"]
    }
  ]

}
  • Pierwsze trzy klucze: manifest_version, name, oraz version, są obowiązkowe i zawierają podstawowe metadane dla rozszerzenia.
  • description jest opcjonalny, ale zalecany: jest on wyświetlany w menadżerze rozszerzeń.
  • icons jest opcjonalna, ale zalecana: pozwala ona nadać ikonę rozszerzeniu, która będzie wyświetlana w menadżerze rozszerzeń.

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@example.com"
  }
}

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 obiecał, że będziemy mieć ikonę z "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ć jednej z naszego przykładu, 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, jeśli dodasz taką ikonę 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 tutaj dodać plik SVG i zostanie on poprawnie przeskalowany.

borderify.js

Teraz 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 zostanie załadowany na stronach spełniających wzór określony w kluczu content_scripts pliku manifest.json. Skrypt ma bezpośredni dostęp do dokumentu, podobnie jak skrypty wczytane przez stronę.

Wypróbujmy to

Najpierw dokładnie sprawdź czy wszystkie pliki są w odpowiednich miejsacach:

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

Instalacja

Otwórz "about:debugging" w przeglądarce Firefox, kliknij "Load Temporary Add-on" i wybierz jakikolwiek plik z katalogu z Twoim rozszerzeniem:

Rozszerzenie zostanie teraz zainstalowane i pozostanie do momentu ponownego uruchomienia Firefox'a.

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:

Nie próbuj 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 "Reload" w about:debugging. Zmiany możesz zobaczyć od razu:

Zapakowanie i upublicznienie

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

Co dalej?

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

Autorzy i etykiety dokumentu

 Autorzy tej strony: Ciepcin
 Ostatnia aktualizacja: Ciepcin,