开发文档

| 注册

基础文档

改变浏览器外观

与浏览器交互

应用（扩展的内部实现）

完成并发布应用

规范和协议

选项页

为了让用户设定你的扩展功能，你可能需要提供一个选项页。如果你提供了选项页，在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页。

在manifest中定义你的选项页

{
  "name": "My extension",
  ...
  "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>

注意事项

本功能在Chromium4.0.222.x以上版本生效。
为了鼓励不同扩展之间的选项页的一致性，我们计划提供一些默认的css样式。你可以关注 crbug.com/25317 的更新。

此页面的开发文档由360工程师翻译自Chromium官方的扩展开发文档，您可以随意传播、转阅。