选项

为了让用户自定义您的扩展程序的行为，您可能会提供一个选项页面。如果这样做的话，选项页面的链接将会在扩展程序管理页面（chrome://extensions）中显示，单击“选项”链接打开一个新标签页，指向您的选项页面。

使用 storage API 保存这些首选项，这样您的扩展程序中任意脚本都能访问这些值。

第一步：在清单文件中声明您的选项页面

{
  "name": "我的扩展程序",
  ...
  "options_page": "options.html",
  ...
}

第二步：编写您的选项页面

如下是一个选项页面的例子：

<!DOCTYPE html>
<html>
<head><title>我的测试扩展程序选项</title></head>
<body>

我最喜欢的颜色：
<select id="color">
 <option value="red">红</option>
 <option value="green">绿</option>
 <option value="blue">蓝</option>
 <option value="yellow">黄</option>
</select>

<label>
  <input type="checkbox" id="like">
  I like colors.
</label>

<div id="status"></div>
<button id="save">保存</button>

<script src="options.js"></script>
</body>
</html>

// 将选项保存在 chrome.storage 中。
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // 更新状态，告诉用户选项已保存。
    var status = document.getElementById('status');
    status.textContent = '选项已保存。';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// 从保存在 chrome.storage 中的首选项恢复选择框和复选框状态。
function restore_options() {
  // 使用默认值 color = 'red' 和 likesColor = true 。
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

重要提示

我们计划提供一些缺省 CSS 样式来鼓励不同扩展程序的选项页面使用一致的外观，您可以将 crbug.com/25317（英文）加星关注更新。