Chrome扩展开发指南(4)——Options Pages（选项页面）
|
你可以提供一个选项页面(Options Pages)让用户自定义你的扩展。如果设置了选项页面，那么扩展管理页chrome://extensions将会有一个链接指向选项页面。
定义选项页面包括两步：
-
{
-
"name": "My extension",
-
...
-
"options_page": "options.html",
-
...
-
}
复制代码
上例中，options_page代表选项页面，options.html是具体的文件地址。
选项页面是一个典型的网页，下面是一个选项页面的例子：
-
<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://crbug.com/25317)查看最新的进展。
上面的例子中使用LOCALSTORAGE保存数据，具体介绍可以查看《使用LOCALSTORAGE保存数据》
|