Skip to content
2010年10月4日 / island205

[译].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的更新通知。

目录:http://www.cnblogs.com/island205/articles/1688261.html

原文链接http://code.google.com/chrome/extensions/options.html

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: