Give users options(给用户选择)

允许用户通过提供选项页面来自定义扩展的行为。用户可以通过右键单击工具栏中的扩展程序图标然后选择选项或导航到 chrome://extensions 上的扩展程序管理页面，找到所需的扩展程序，单击详细信息来查看扩展程序的选项，然后选择选项链接。

# Write the options page(编写选项页面)

下面是一个示例选项页面。

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

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>

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

<div id="status"></div>
<button id="save">Save</button>

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

使用 storage.sync API 跨设备保存用户的首选选项。

// 将选项保存到 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() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// 使用首选项恢复选择框和复选框状态 
// 存储在 chrome.storage 中。
function restore_options() {
  // Use default value color = 'red' and 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);

# Declare options page behavior(声明选项页面行为)

有两种可用的扩展选项页面类型，full page和嵌入(embedded)。选项的类型取决于它在清单中的声明方式。

# Full page options(整页选项)

扩展的选项页面将显示在新选项卡中。选项 HTML 文件在 options_page 字段下注册。

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

# Embedded options(嵌入式选项)

嵌入式选项允许用户在不离开嵌入式框内的扩展管理页面的情况下调整扩展选项。要声明嵌入选项，请在扩展清单的 options_ui 字段下注册 HTML 文件，并将 open_in_tab 键设置为 false。

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

page (string)
选项页面的路径，相对于扩展的根。
open_in_tab (boolean)
指定为 false 以声明嵌入的选项页面。如果为 true，扩展的选项页面将在新选项卡中打开，而不是嵌入在 chrome://extensions 中。

# Consider the differences(考虑差异)

嵌入在 chrome://extensions 中的选项页面有一些细微的行为差异，与不在它们自己的选项卡中托管有关。

# Linking to the options page(链接到选项页面)

扩展程序可以通过调用直接链接到选项页面chrome.runtime.openOptionsPage()

<button id="go-to-options">Go to options</button>

document.querySelector('#go-to-options').addEventListener('click', function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});

# Tabs API

扩展嵌入选项页面代码未托管在选项卡内，这会影响Tabs API的使用方式：

tabs.query 永远不会在扩展的选项页面 URL 中找到选项卡。
tabs.onCreated 在选项页面打开时不会触发。
tabs.onUpdated 在选项页面加载状态改变时不会触发。
tabs.connect 或 tabs.sendMessage 不能用于与选项页面通信。

如果选项页面确实需要操作包含选项卡，则使用 runtime.connect 和 runtime.sendMessage 可以解决这些限制。

# Messaging APIs

如果扩展的选项页面使用 tabs.connect 或 tabs.sendMessage 发送消息，则不会设置发件人的选项卡（Sender's tab），发件人的 URL（Sender's URL）将是选项页面的 URL。

# Sizing

嵌入的选项应根据页面内容自动确定其自己的大小。但是，对于某些类型的内容，嵌入式框可能找不到合适的大小。对于根据窗口大小调整其内容形状的选项页面，此问题最为常见。

如果这是一个问题，请为选项页面提供固定的最小尺寸，以确保嵌入的页面会找到合适的尺寸。

Give users options-给用户选择