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保存数据》 原文 http://code.google.com/chrome/extensions/options.html 由ChromeChina翻译，转载注明出处http://dev.chromechina.com/ |
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
