Параметры расширения

После того как мы собрали свое первое расширение для Google Chrome, попробуем внести изменения и улучшения. И первое что приходит в голову: нужны настройки!

Для начала хотелось бы периодически менять уже успевшую наскучить надпись “Привет, Мир!”. Также будет полезно включать и выключать информацию о версии приложения. Сказано - сделано. Чтобы позволить пользователям Вашего расширения настраивать параметры, API Chrome предусматривает использование специальной страницы “Параметры”.

Для начала ее нужно декларировать в файле манифеста (manifest.json):

{
"name": "Расширение Привет, Мир!",
"version": "2.0",
"manifest_version": 2,
"description": "Моё первое расширение.",
"options_page": "options.html",
...........
}

Затем создать собственно файл options.html (не забываем сохранять файл в кодировке UTF-8). Сначала создадим элементы формы для задания параметров. Это будет ниспадающий список <select> для выбора фразы и checkbox для включения/выключения отображения на экране версии расширения. Вы можете создать список с любым количеством фраз различного содержания.

Текст:

<select onChange="saveOptions()" name="p_text" id="p_text">
<option value="Привет, Мир!">Привет, Мир!</option>
<option value="Я сделал это!">Я сделал это!</option>
<option value="Я люблю Chrome">Я люблю Chrome</option>
</select> <br>
<input id="p_version" type="checkbox" checked="checked" name="p_version"
onclick="saveOptions()">Показать версию расширения<br>

Вот как это будет выглядеть:

Чтобы не создавать кнопок “Сохранить” лучше вставлять событие onclick в тело элемента, но это уже, как говорится, дело вкуса. Щелчок по любому элементу формы приведет к вызову функции saveOptions(), которой мы сейчас и займемся. API хранилища DOM предусматривает для хранения параметров специальную область памяти localStorage, представляющую собой атрибут метода window. Для доступа к данным в хранилище допускается использовать две нотации: window.localStorage.p_text и localStorage["p_text"], где p_text - имя вашей переменной для хранения данных.

Следует помнить, что все значения хранятся в localStorage в виде текста. Напишем скрипт для работы со значениями параметров расширения:

<script>
function saveOptions() {
	window.localStorage.p_text = document.getElementById('p_text').value;
	window.localStorage.p_version = document.getElementById('p_version').checked;
}
function onLoad() {
// Значения по умолчанию
	if (window.localStorage.p_text == null) {
	   window.localStorage.p_text = "Привет, Мир!";}
	if (window.localStorage.p_version == null){
	   window.localStorage.p_version = "true";}
// Восстановить сохраненные значения.
	document.getElementById('p_text').value = window.localStorage.p_text;
	document.getElementById('p_version').checked =
		(window.localStorage.p_version == "true");
}
</script>

Скрипт содержит две функции. Первая saveOptions() позволяет сохранять значения Ваших параметров в хранилище. А вторая onLoad() - загружать значения сохраненных параметров при открытии страницы options.html.

<body onload="onLoad()">

Не забывайте установить значения по умолчанию, необходимые при первом открытии страницы.

На третьем этапе перейдем к собственно использованию сохраненных значений во всплывающем окне.

В файле popup.html вместо строки

<b>Привет, Мир!</b>

поместим скрипт

<script>
document.write('<div id="d_text">'+window.localStorage.p_text+'</div>');
if (window.localStorage.p_version == "true"){
	document.write('<div id="d_version">Версия: ');
	displayVersionNumber();
	document.write('</div>');
}
</script>

Конструкция

document.write('<div id="d_text">'+window.localStorage.p_text+'</div>');

выводит на экран одну из предустановленных Вами строк текста (например, Привет, Мир!). А функция displayVersionNumber() - текущую версию расширения, которую она получает из файла manifest.json. Мы не будем сейчас рассматривать работу этой функции, так как это не является предметом данного урока. Здесь также не забудьте про значения по умолчанию.

function onLoad() {
// Значения по умолчанию
	if (window.localStorage.p_text == null) {
	   window.localStorage.p_text = "Привет, Мир!";}
	if (window.localStorage.p_version == null) {
	   window.localStorage.p_version = "true";}
}

Ведь не возможно угадать, что пользователь выберет сразу после установки расширения: кнопку расширения или вызов страницы настройки параметров. Вы бы что сделали?

Результат нашей работы можно увидеть ниже.

Первое приложение

Локализация расширения

IT1409: Программирование расширений web-браузеров и web-программирование

Параметры расширения