Чтобы пользователь мог настроить ваше расширение нужна страница где он будет задавать все настройки. Если вы ее создадите, то она будет доступна по ссылке на странице управления расширениями chrome://extensions.
Первым делом нужно указать ее в манифесте
{
"name": "My extension",
...
"options_page": "options.html",
...
}
И, естественно, нужно создать саму страницу. Вот примерное содержимое файла options.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>
<br>
<div id="status"></div>
<button id="save">Save</button>
</body>
<script src="options.js"></script>
</html>
Могут быть использованы любые html теги для оформления и любые элементы форм для ввода данных. Логика вынесена в файл options.js:
// Saves options to localStorage.Для хранения опций используется локальное хранилище. При открытии страницы мы восстанавливаем содержимое всех полей в соответствии с сохраненными данными. При нажатии кнопки Save – сохраняем изменения.
function save_options() {
var select = document.getElementById("color");
var color = select.children[select.selectedIndex].value;
localStorage["favorite_color"] = color;
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Options Saved.";
setTimeout(function() {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var favorite = localStorage["favorite_color"];
if (!favorite) {
return;
}
var select = document.getElementById("color");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == favorite) {
child.selected = "true";
break;
}
}
}
document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);
Комментариев нет:
Отправить комментарий