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

Umożliwia użytkownikom dostosowywanie działania rozszerzenia przez udostępnienie strony opcji. Użytkownik może wyświetlić opcje rozszerzenia, klikając prawym przyciskiem myszy ikonę rozszerzenia na pasku narzędzi, a następnie wybierając opcje lub przechodząc na stronę zarządzania rozszerzeniami pod adresem chrome://extensions, odnajdując odpowiednie rozszerzenie, klikając Szczegóły, a następnie wybierając link do opcji.

Tworzenie strony 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>

Zapisuj preferowane opcje użytkownika na różnych urządzeniach za pomocą interfejsu storage.sync.

// 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 zachowania strony opcji

Dostępne są 2 typy stron opcji rozszerzeń: pełna strona i osadzona. Rodzaj opcji zależy od sposobu zadeklarowania jej w pliku manifestu.

Opcje pełnej strony

Strona opcji rozszerzenia zostanie wyświetlona na nowej karcie. Plik HTML opcji jest wymieniony zarejestrowany w polu options_page.

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

Opcje pełnej strony

Opcje umieszczania

Opcje osadzone umożliwiają użytkownikom dostosowywanie opcji rozszerzeń bez opuszczania strony zarządzania rozszerzeniami w osadzonym polu. Aby zadeklarować osadzone opcje, zarejestruj plik HTML w polu options_ui w pliku manifestu rozszerzenia, ustawiając klucz open_in_tab na wartość false.

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

Opcje umieszczania

  • page (ciąg znaków)

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

  • open_in_tab (wartość logiczna)

    Użyj wartości false, aby zadeklarować osadzoną stronę opcji. Jeśli true, strona opcji rozszerzenia zostanie otwarta na nowej karcie, a nie osadzona na stronie chrome://extensions.

Rozważ różnice

Strony opcji osadzone w chrome://extensions mają pewne subtelne różnice w działaniu związane z tym, że nie są hostowane na własnych kartach.

Tworzenie linku do strony opcji

Rozszerzenie może bezpośrednio prowadzić do strony opcji, wywołując funkcję 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'));
  }
});

Tabs API

Kod strony opcji wbudowanych rozszerzenia nie jest hostowany na karcie, co wpływa na sposób używania interfejsu Tabs API:

  • tabs.query nigdy nie znajdzie karty w adresie URL strony opcji rozszerzenia.
  • Gdy strona opcji jest otwarta, zdarzenie tabs.onCreated nie jest wywoływane.
  • tabs.onUpdated nie zostanie wywołane, gdy zmieni się stan wczytywania strony opcji.
  • Nie można używać funkcji tabs.connect ani tabs.sendMessage do komunikacji ze stroną opcji.

Użycie runtime.connect i runtime.sendMessage to obejście tych ograniczeń, jeśli strona opcji musi manipulować kartą, na której się znajduje.

Interfejsy API do obsługi wiadomości

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

Dobieranie rozmiaru

Opcje do umieszczenia powinny automatycznie określać swój rozmiar na podstawie zawartości strony. Jednak w przypadku niektórych typów treści wbudowane 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.