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

Użytkownicy mogą dostosowywać działanie rozszerzenia na stronie opcji. Użytkownik może wyświetlić opcje rozszerzenia, klikając prawym przyciskiem myszy ikonę rozszerzenia na pasku narzędzi i wybierając opcje. Możesz też otworzyć stronę zarządzania rozszerzeniami (chrome://extensions), zlokalizować odpowiednie rozszerzenie, kliknąć Szczegóły, a następnie wybrać link do opcji.

Napisz stronę opcji

Poniżej znajduje się przykładowa strona opcji.

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

Za pomocą interfejsu API storage.sync możesz zapisywać preferowane opcje użytkownika na różnych urządzeniach.

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

Deklarowanie działania strony opcji

Dostępne są 2 rodzaje stron z opcjami rozszerzeń: pełna strona i umieszczona. Rodzaj opcji zależy od sposobu zadeklarowania ich w pliku manifestu.

Opcje pełnej strony

W nowej karcie wyświetli się strona z opcjami rozszerzenia. Plik HTML opcji jest zarejestrowany w polu options_page.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

Opcje pełnej strony

Wbudowane opcje

Opcje wbudowane pozwalają użytkownikom dostosowywać opcje rozszerzeń bez opuszczania strony zarządzania rozszerzeniami w umieszczonym polu. Aby zadeklarować umieszczone opcje, zarejestruj plik HTML w polu options_ui w pliku manifestu rozszerzenia, ustawiając klucz open_in_tab na wartość fałsz.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

Wbudowane opcje

  • page (ciąg znaków)

    Ścieżka do strony opcji podana względem katalogu głównego rozszerzenia.

  • open_in_tab (boolean)

    Aby zadeklarować umieszczoną stronę z opcjami, podaj wartość false. Jeśli zasada true jest włączona, strona opcji rozszerzenia otworzy się w nowej karcie, a nie na stronie chrome://extensions.

Weź pod uwagę różnice

Strony opcji umieszczone w obrębie chrome://extensions nieco się różnią, ponieważ strony opcji nie są hostowane w oddzielnych kartach.

Link do strony opcji

Rozszerzenie może prowadzić bezpośrednio do strony opcji, wywołując metodę chrome.runtime.openOptionsPage() .

<button id="go-to-options">Go to options</button>

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

Interfejs Tabs API

Kod strony z opcjami umieszczonymi w rozszerzeniu nie jest hostowany na karcie, co wpływa na sposób korzystania z interfejsu Tabs API:

Użycie runtime.connect i runtime.sendMessage pozwala obejść te ograniczenia, jeśli strona opcji musi modyfikować kartę zawierającą.

Interfejsy API do przesyłania wiadomości

Jeśli strona opcji rozszerzenia wysyła wiadomość przy użyciu metody runtime.connect lub runtime.sendMessage, karta nadawcy nie zostanie ustawiona, a adres URL nadawcy będzie adresem URL strony opcji.

Rozmiary

Umieszczone opcje powinny automatycznie określać swój rozmiar na podstawie zawartości strony. Osadzone pole może jednak nie mieć odpowiedniego rozmiaru dla niektórych typów treści. Problem ten występuje najczęściej na stronach opcji, które dostosowują kształt treści do rozmiaru okna.

W tym przypadku podaj stałe minimalne wymiary strony opcji, aby mieć pewność, że umieszczona strona będzie miała odpowiedni rozmiar.