вторник, 18 февраля 2014 г.

Страницы настроек

Чтобы пользователь мог настроить ваше расширение нужна страница где он будет задавать все настройки. Если вы ее создадите, то она будет доступна по ссылке на странице управления расширениями 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.
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);
Для хранения опций используется локальное хранилище. При открытии страницы мы восстанавливаем содержимое всех полей в соответствии с сохраненными данными. При нажатии кнопки Save – сохраняем изменения.

Комментариев нет:

Отправить комментарий