[译].Google Chrome extensions（实验室）.界面.选项
选项
为了让用户可以根据喜好来定制扩展，你希望有个选项页面吧。如果你想的话，在扩展程序管理面板中提供了一个选项链接，点击它就可以打开一个新标签指向你的选项页面。
第一步：在manifest中声明你的扩展选项页
1: {
2: "name": "My extension",
3: ...
4: "options_page": "options.html",
5: ...
6: }
第二步：编码选项页
这是一个选项页面示例：
1: <html>
2: <head><title>My Test Extension Options</title></head>
3: <script type="text/javascript">
4:
5: // Saves options to localStorage.
6: function save_options() {
7: var select = document.getElementById("color");
8: var color = select.children[select.selectedIndex].value;
9: localStorage["favorite_color"] = color;
10:
11: // Update status to let user know options were saved.
12: var status = document.getElementById("status");
13: status.innerHTML = "Options Saved.";
14: setTimeout(function() {
15: status.innerHTML = "";
16: }, 750);
17: }
18:
19: // Restores select box state to saved value from localStorage.
20: function restore_options() {
21: var favorite = localStorage["favorite_color"];
22: if (!favorite) {
23: return;
24: }
25: var select = document.getElementById("color");
26: for (var i = 0; i < select.children.length; i++) {
27: var child = select.children[i];
28: if (child.value == favorite) {
29: child.selected = "true";
30: break;
31: }
32: }
33: }
34:
35: </script>
36:
37: <body onload="restore_options()">
38:
39: Favorite Color:
40: <select id="color">
41: <option value="red">red</option>
42: <option value="green">green</option>
43: <option value="blue">blue</option>
44: <option value="yellow">yellow</option>
45: </select>
46:
47: <br>
48: <button onclick="save_options()">Save</button>
49: </body>
50: </html>
重要说明
- 官方4.0.222以后的版本支持这个特性。
- 我们打算提供一些默认的CSS样式表来鼓励大部分的选项页面有个协调的风格，你可以关注crbug.com/25317的更新通知。
