Dzięki rozszerzeniom użytkownicy mogą dostosowywać przeglądarkę Chrome, natomiast strona opcji umożliwia na jego dostosowanie. Włącz funkcje i daj użytkownikom wybór która funkcja odpowiada ich potrzebom.
Znajdowanie strony opcji
Użytkownicy mogą otworzyć stronę opcji, klikając link bezpośredni lub prawym przyciskiem myszy ikonę rozszerzenia na pasku narzędzi, a następnie wybierając opcje. Użytkownicy mogą też przejść na stronę opcji. W tym celu mogą najpierw otworzyć chrome://extensions, znaleźć odpowiednie rozszerzenie, kliknąć Szczegóły, a następnie wybrać link opcji.
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 znajduje się przykładowy skrypt opcji. Zapisz go w tym samym folderze co options.html. Dzięki temu opcje preferowane przez użytkownika zostaną zapisane 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 manifest rozszerzenia:
manifest.json:
{ "name": "My extension", ... "permissions": [ "storage" ] ... } Deklarowanie działania strony opcji
Istnieją 2 typy stron z opcjami rozszerzeń: pełne strony i umieszczone. Typ strony opcji zależy od sposobu jej zadeklarowania w pliku manifestu.
Opcje pełnoekranowe
W nowej karcie otworzy się cała strona z opcjami. Zarejestruj plik HTML opcji w pliku manifestu w polu "options_page".
manifest.json:
{ "name": "My extension", ... "options_page": "options.html", ... } 
Umieszczone opcje
Strona Opcje umieszczone na stronie umożliwia użytkownikom dostosowanie opcji rozszerzeń bez opuszczania do zarządzania rozszerzeniami w umieszczonym polu. Aby zadeklarować opcje osadzone, zarejestruj kod HTML w polu "options_ui" w pliku manifestu rozszerzenia z kluczem "open_in_tab" ustawionym na 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(wartość logiczna)- Wskazuje, czy strona z opcjami rozszerzenia będzie otwierana w nowej karcie. Jeśli zasada ma wartość
false, strona opcji rozszerzenia jest umieszczona wchrome://extensions, a nie otwierana w nowej karcie.
Weź pod uwagę różnice
Działanie stron opcji umieszczonych w komponencie chrome://extensions nieznacznie różni się od działania stron opcji na kartach.
Link do strony z opcjami
Rozszerzenie może zawierać bezpośredni link do strony opcji za pomocą połączenia chrome.runtime.openOptionsPage() Można je 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 (chrome.runtime.openOptionsPage) { chrome.runtime.openOptionsPage(); } else { window.open(chrome.runtime.getURL('options.html')); } }); Interfejs Tabs API
Ponieważ umieszczony kod opcji nie jest hostowany na karcie, nie można używać interfejsu Tabs API. Zamiast nich używaj runtime.connect() i runtime.sendMessage(). .
Interfejsy API do przesyłania wiadomości
Jeśli strona opcji rozszerzenia wysyła wiadomość przy użyciu 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. Pamiętaj jednak: rozmiar umieszczonego pola może być nieodpowiedni w przypadku niektórych typów treści. Ten problem występuje najczęściej w przypadku stron z opcjami, które dostosowują kształt treści w zależności od rozmiaru okna.
Jeśli jest to problem, podaj stałe minimalne wymiary strony opcji, by mieć pewność, że która znajdzie się w odpowiednim rozmiarze.