A fuller example that includes more controls. This is designed to be
inserted into anyone's extension and trimmed and modified as they
please. It sticks to core Javascript so the code is not as compact and
nice as it would be if you were to use libraries such as prototype.js
or jQuery.
As before, you need to type chrome-extension://<your_ext_id>/
<filename> to open the page. Programmatically you can obtain that
address using the chrome.extension.getBackgroundPage(<filename>)
function.
<html>
<head>
<script type="text/javascript">
function initControls() {
/*A string value, displayed in a text input*/
document.getElementById("username_inp").value =
localStorage.getItem
("username");
/*A boolean value displayed with a checkbox input. Note that the
boolean is saved as the
strings "false" or "true", so convert to a proper boolean by
comparing to "true".*/
document.getElementById("anonymize_inp").checked =
localStorage.getItem("anonymize") == "true";
/*A string value, displayed in textarea*/
document.getElementById("user_notes_inp").value =
localStorage.getItem("user_notes");
/*A string value, displayed via an array of 3 radio inputs.*/
var updatePeriodVal = localStorage.getItem("update_period");
var updatePeriodRadios = document.getElementsByName
("update_period");
for (var x = 0; x < updatePeriodRadios.length; x++) {
if (updatePeriodRadios[x].value == updatePeriodVal) {
updatePeriodRadios[x].checked = true;
break;
}
}
/*A numeric value mapped to options in a select input.*/
var ratingVal = localStorage.getItem("rating");
var ratingOptions =
document.getElementById("rating_sel").options;
for (var x = 0; x < ratingOptions.length; x++) {
if (ratingOptions[x].value == ratingVal) {
ratingOptions[x].selected = true;
break;
}
}
/*Events from the page's inputs are bound to functions that
update
localStorage.
(There is some extra event-handling to change the
enabled/disabled
mode for the
save button associated with the 'Notes' textarea.)*/
document.getElementById("username_inp").onkeyup =
function(event) {
localStorage.setItem("username", this.value);
};
document.getElementById("anonymize_inp").onchange =
function(event)
{
localStorage.setItem("anonymize", this.checked);
};
document.getElementById("user_notes_save_btn").onclick =
function
(event) {
localStorage.setItem("user_notes",
document.getElementById
("user_notes_inp").value);
this.disabled = true;
};
document.getElementById("user_notes_inp").onkeyup =
function(event)
{
document.getElementById("user_notes_save_btn").disabled
=
this.value ==
localStorage.getItem("user_notes");
};
for (var x = 0; x < updatePeriodRadios.length; x++) {
updatePeriodRadios[x].onclick = function(event) {
localStorage.setItem("update_period",
this.value);
}
}
document.getElementById("rating_sel").onchange =
function(event) {
localStorage.setItem("rating", this.options
[this.selectedIndex].value);
}
}
</script>
<style>
body { padding: 10px 60px; }
body > div { margin-bottom: 10px; }
input[type="radio"] { margin-left: 0px; }
span.pn { font-style: italic; font-size: 80%; }
</style>
</head>
<body onload="initControls();">
<h2>MyExtension options</h2>
<!-- Note: there is no <form> element. It is not necessary. -->
<div>
<label for="username_inp">User name:</label> <input
id="username_inp"/><br/>
<span class="pn">This field's string value is saved after every
keystroke, using the onkeyup event.</span>
</div>
<div><label>Keep your user name hidden? <input type="checkbox"
id="anonymize_inp"/></label><br/>
<span class="pn">This boolean value is saved after every click,
using the onchange event.</span></div>
<div>
<label for="user_notes_inp">Notes:</label><br/>
<textarea cols="60" rows="6"
id="user_notes_inp"></textarea><br/>
<button id="user_notes_save_btn"
disabled="disabled">Save</button>
<span style="display: none;">Saved!</span><br/>
<span class="pn">This textarea's string is saved when the save
button is clicked, using the button's onclick event. The button is
enabled/disabled by comparing the storage value to the current value
after every keystroke, using the onkeyup event.</span>
</div>
<div>Update period:
<label>Daily <input type="radio" name="update_period"
value="day"/></
label>
<label>Weekly <input type="radio" name="update_period"
value="week"/
></label>
<label>Monthly <input type="radio" name="update_period"
value="month"/></label><br/>
<span class="pn">This radio group value is saved after every
click,
using the onclick event.</span>
</div>
<div><label for="rating_sel">Rating</label> <select id="rating_sel">
<option></option>
<option value="1">1 star</option>
<option value="2">2 stars</option>
<option value="3">3 stars</option>
<option value="4">4 stars</option>
<option value="5">5 stars</option>
</select><br/>
<span class="pn">This numeric value is saved after the
selection is
changed, using the onchange event.</span></div>
<div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Chromium-extensions" group.
To post to this group, send email to chromium-extensions@googlegroups.com
To unsubscribe from this group, send email to
chromium-extensions+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/chromium-extensions?hl=en
-~----------~----~----~----~------~----~------~--~---
