Daj użytkownikom różne możliwości

Tak jak rozszerzenia pozwalają użytkownikom dostosowywać przeglądarkę Chrome, strona opcji umożliwia dostosowywanie rozszerzenia. Używaj opcji, aby włączać funkcje i umożliwiać użytkownikom wybieranie funkcjonalności, która jest dla nich istotna.

Znajdowanie strony opcji

Użytkownicy mogą otworzyć stronę opcji, klikając bezpośredni link lub klikając prawym przyciskiem myszy ikonę rozszerzenia na pasku narzędzi, a następnie wybierając opcje. Użytkownicy mogą też przejść na stronę opcji, otwierając najpierw chrome://extensions, wyszukując odpowiednie rozszerzenie, klikając Szczegóły, a następnie wybierając link do opcji.

Link do strony opcji w interfejsie
Link do strony Opcje.
Strona Opcje menu kontekstowego
Kliknięcie prawym przyciskiem myszy ikony rozszerzenia.

Tworzenie strony opcji

Oto przykład strony opcji:

options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>
    <select id="color">
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
      <option value="yellow">yellow</option>
    </select>

    <label>
      <input type="checkbox" id="like" />
      I like colors.
    </label>

    <div id="status"></div>
    <button id="save">Save</button>

    <script src="options.js"></script>
  </body>
</html>

Poniżej znajdziesz przykładowy skrypt opcji. Zapisz go w tym samym folderze co plik options.html. Dzięki temu preferowane opcje użytkownika są zapisywane na różnych urządzeniach za pomocą interfejsu storage.sync.

options.js:

// Saves options to browser.storage
const saveOptions = () => {
  const color = document.getElementById('color').value;
  const likesColor = document.getElementById('like').checked;

  browser.storage.sync.set(
    { favoriteColor: color, likesColor: likesColor },
    () => {
      // Update status to let user know options were saved.
      const status = document.getElementById('status');
      status.textContent = 'Options saved.';
      setTimeout(() => {
        status.textContent = '';
      }, 750);
    }
  );
};

// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
  browser.storage.sync.get(
    { favoriteColor: 'red', likesColor: true },
    (items) => {
      document.getElementById('color').value = items.favoriteColor;
      document.getElementById('like').checked = items.likesColor;
    }
  );
};

document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);

Na koniec dodaj uprawnienie "storage" do pliku manifestu rozszerzenia:

manifest.json:

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ]
  ...
}

Deklarowanie zachowania strony opcji

Istnieją 2 typy stron opcji rozszerzenia: pełna strona i wbudowana. Typ strony opcji zależy od tego, jak jest zadeklarowana w pliku manifestu.

Opcje pełnej strony

W nowej karcie wyświetli się strona opcji pełnej strony. Zarejestruj plik HTML opcji w pliku manifestu w polu "options_page".

manifest.json:

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}
Opcje pełnej strony
Opcje pełnej strony w nowej karcie.

Opcje umieszczania

Strona umieszczonych opcji umożliwia użytkownikom dostosowywanie opcji rozszerzeń bez opuszczania strony zarządzania rozszerzeniami w umieszczonym polu. Aby zadeklarować opcje osadzone, zarejestruj plik HTML w polu "options_ui" w pliku manifestu rozszerzenia, ustawiając klucz "open_in_tab" na false.

manifest.json:

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}
Opcje umieszczania
Opcje umieszczania.
page (ciąg znaków)
Określa ścieżkę do strony opcji względem katalogu głównego rozszerzenia.
open_in_tab (wartość logiczna)
Określa, czy strona opcji rozszerzenia ma być otwierana w nowej karcie. Jeśli ta opcja jest ustawiona na false, strona opcji rozszerzenia jest umieszczana w chrome://extensions, a nie otwierana na nowej karcie.

Rozważ różnice

Strony opcji umieszczone w chrome://extensions różnią się nieznacznie od stron opcji na kartach.

Link do strony opcji

Rozszerzenie może bezpośrednio prowadzić do strony opcji, wywołując funkcję browser.runtime.openOptionsPage(). Możesz go na przykład dodać do wyskakującego okienka:

popup.html:

<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>

popup.js:

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (browser.runtime.openOptionsPage) {
    browser.runtime.openOptionsPage();
  } else {
    window.open(browser.runtime.getURL('options.html'));
  }
});

Interfejs Tabs API

Ponieważ kod opcji do umieszczenia nie jest hostowany na karcie, nie można użyć interfejsu Tabs API. Zamiast tego użyj runtime.connect() i runtime.sendMessage(), jeśli strona opcji musi manipulować kartą, która ją zawiera.

Interfejsy API do przesyłania wiadomości

Jeśli strona opcji rozszerzenia wysyła wiadomość za pomocą runtime.connect() lub runtime.sendMessage(), karta nadawcy nie zostanie ustawiona, a adres URL nadawcy będzie adresem URL strony opcji.

Dobieranie rozmiaru

Opcje umieszczone powinny automatycznie określać swój rozmiar na podstawie zawartości strony. Jednak w przypadku niektórych typów treści umieszczone pole może nie znaleźć odpowiedniego rozmiaru. Ten problem występuje najczęściej w przypadku stron opcji, które dostosowują kształt treści do rozmiaru okna.

Jeśli to problem, podaj stałe minimalne wymiary strony opcji, aby osadzona strona miała odpowiedni rozmiar.