Я подробно расскажу, как сохранить и загрузить пример меню опций, содержащего текстовое поле и флажок.В вашем примере вы захотите использовать document.getElementById('master01dropdown').value при сохранении.
Настройка
Сначала создайте файл options.html в корневом каталоге проекта, содержащий вашу форму.
Далее, убедитесь, что эта страница параметров зарегистрирована в вашем manifest.json:
"options_ui": {
"page": "options.html",
"chrome_style": true
}
В нижней части вашего options.html, перед </body>, включите файл JavaScript:
<script src="js/options.js"></script>
Ваша форма также должна включать в себя кнопку «Сохранить» где-нибудь с идентификатором save:
<button id="save">Save</button>
Сохранение
Внутри файла /js/options.js, зарегистрируйте save() функция, запускаемая при нажатии кнопки сохранения:
document.getElementById('save').addEventListener('click', save);
Ваша функция save() должна использовать Chrome Storage для сохранения каждого элемента из вашей формы.Например, чтобы сохранить текстовое поле и флажок:
function save() {
var sitesToSave = document.getElementById('sites').value;
var displayPopup = document.getElementById('popup').checked;
chrome.storage.sync.set({
sites: sitesToSave,
popup: displayPopup
}, displaySavedMessage);
}
Загрузка
Внутри вашего файла /js/options.js снова зарегистрируйте функцию load() при загрузке формы:
document.addEventListener('DOMContentLoaded', load);
Теперь установите эти поля формы из ранее сохраненных значений (и укажите значения по умолчанию), снова используя Chrome Storage:
function load() {
chrome.storage.sync.get({
sites: 'supersecretsite.com',
popup: false
}, function(items) {
document.getElementById('sites').value = items.sites;
document.getElementById('popup').checked = items.popup;
});
}
Готово!Теперь настройки могут быть сохранены и загружены.
Весь код в этом ответе взят из очень простого примера расширения Chrome , которое я сделал, который также сопровождается подробным учебником .