Chrome扩展开发教程(四)Options Pages（选项页面）
可以提供一个选项页面(Options Pages)让用户自定义你的扩展。
如果设置了选项页面，那么扩展管理页chrome://extensions将会有一个链接指向选项页面。
定义选项页面包括两步：
| 1、在manifest中定义选项页 |
{
"name": "My extension",
...
"options_page": "options.html",
...
}
上例中，options_page代表选项页面，options.html是具体的文件地址。
| 2、编写选项页面 |
选项页面是一个典型的网页，下面是一个选项页面的例子：
<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">
// 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;
}
}
}
</script>
<body onload="restore_options()">
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>
<button onclick="save_options()">Save</button>
</body>
</html>
| 注意事项 |
早期版本的chrome可能不支持这个功能。
我们正计划提供一个默认的css来使得不同扩展的选项页面保持风格一致，你可以从这里(http://code.google.com/p/chromium/issues/detail?id=25317)查看最新的进展。
| 知识补充 |
上面的例子中使用LOCALSTORAGE保存数据，具体介绍可以查看《使用LOCALSTORAGE保存数据》
原文 http://code.google.com/chrome/extensions/options.html
来源：http://dev.chromechina.com/thread-2377-1-2.html
加支付宝好友偷能量挖...
