Урок №4 — Параметры расширения Google Chrome

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

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

{
"name": "Расширение Привет, Мир!",
"version": "2.0",
"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>

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

Options.html

Чтобы не создавать кнопок типа Сохранить я предпочитаю вставлять событие 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";}
}

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

P.S. Этот урок подготовил для вас Вадим. Он согласился помочь сообществу в освоении расширений для Google Chrome. Так что все спасибо - ему =)

P.S.S. Пример того, что получилось доступен здесь.