Analogicznie, jak rozszerzenia pozwalają użytkownikom dostosowywać przeglądarkę Chrome, strona opcji umożliwia dostosowanie rozszerzenia. Używaj opcji, aby włączać funkcje i umożliwiać użytkownikom wybór funkcji, które odpowiadają ich potrzebom.
Znajdowanie strony opcji
Użytkownicy mogą otworzyć stronę opcji za pomocą bezpośredniego linku lub kliknąć prawym przyciskiem myszy ikonę rozszerzenia na pasku narzędzi i wybrać opcje. Użytkownicy mogą też przejść na stronę opcji, otwierając usługę chrome://extensions, odnajdując odpowiednie rozszerzenie, klikając Szczegóły, a następnie wybierając link opcji.
Napisz stronę 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 znajduje się przykładowy skrypt opcji. Zapisz go w tym samym folderze co options.html.
W ten sposób zostaną zapisane preferowane opcje użytkownika na różnych urządzeniach za pomocą interfejsu API storage.sync.
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.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 chrome.storage.
const restoreOptions = () => {
chrome.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 działania strony opcji
Istnieją 2 typy stron opcji rozszerzeń: pełne strony i osadzone. Typ strony opcji zależy od sposobu jej zadeklarowania w pliku manifestu.
Opcje pełnej strony
W nowej karcie wyświetli się strona opcji na całej stronie. Zarejestruj plik HTML opcji w pliku manifestu w polu "options_page".
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Wbudowane opcje
Strona opcji osadzonych pozwala użytkownikom dostosowywać opcje rozszerzeń bez opuszczania strony zarządzania rozszerzeniami w umieszczonym 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.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(ciąg znaków)- Określa ścieżkę do strony opcji względem katalogu głównego rozszerzenia.
open_in_tab(boolean)- Wskazuje, czy strona opcji rozszerzenia będzie otwierana w nowej karcie. Jeśli zasada ma wartość
false, strona z opcjami rozszerzenia jest umieszczona w przeglądarcechrome://extensions, a nie otwierana w nowej karcie.
Weź pod uwagę różnice
Strony opcji umieszczone w tagu chrome://extensions nieznacznie różnią się od stron opcji na kartach.
Link do strony opcji
Rozszerzenie może prowadzić bezpośrednio do strony opcji, wywołując metodę chrome.runtime.openOptionsPage(). Można go dodać na przykład 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 (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
Interfejs Tabs API
Ponieważ kod opcji umieszczonych na stronie nie jest hostowany na karcie, nie można używać interfejsu Tabs API.
Jeśli strona opcji musi obsługiwać kartę, która zawiera, użyj runtime.connect() i runtime.sendMessage().
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.
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.