通过提供选项页面，可让用户自定义扩展程序的行为。用户可以通过以下方式查看扩展程序的选项：右键点击工具栏中的扩展程序图标，然后选择选项；或者导航到扩展程序管理页面 (chrome://extensions)，找到所需扩展程序，点击详细信息，然后选择选项链接。
编写选项页面
下面是一个选项页面示例。
<!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 可跨设备保存用户的首选选项。
// Saves options to 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);
});
}
// Restores select box and checkbox state using the preferences
// stored in 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);
声明选项页面行为
附加信息选项网页有两种类型：整页和嵌入式。选项的类型取决于其在清单中的声明方式。
整页显示选项
相应扩展程序的选项页面随即会显示在新标签页中。选项 HTML 文件会列在 options_page 字段下注册。
{
"name": "My extension",
...
"options_page": "options.html",
...
}
嵌入式选项
通过嵌入式选项，用户无需离开嵌入式框中的扩展程序管理页面，即可调整扩展程序选项。如需声明嵌入式选项，请在扩展程序清单中的 options_ui 字段下注册 HTML 文件，并将 open_in_tab 键设置为 false。
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page（字符串）选项页面的路径（相对于扩展程序的根目录）。
open_in_tab(boolean)指定为
false以声明嵌入式选项页面。如果为true，扩展程序的选项页面将在新标签页中打开，而不是嵌入 chrome://extensions。
考虑不同之处
chrome://extensions 中嵌入的选项页面存在一些细微的行为差异，因为它们不是托管在各自的标签页中。
链接到选项页面
扩展程序可以通过调用 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 绝不会在扩展程序的选项页面网址中找到标签页。
- 打开选项页面时，tabs.onCreated 不会触发。
- 当选项网页加载状态发生变化时，tabs.onUpdated 将不会触发。
- tabs.connect 或 tabs.sendMessage 不能用于与选项页面通信。
如果选项页面确实需要操作包含的标签页，则使用 runtime.connect 和 runtime.sendMessage 可以解决这些限制。
Messaging API
如果扩展程序的选项页面使用 runtime.connect 或 runtime.sendMessage 发送消息，则系统不会设置“发送者”标签页，而发送者的网址将是选项页面网址。
大小
嵌入的选项应根据网页内容自动确定其自己的大小。但是，对于某些类型的内容，嵌入式框可能没有合适的大小。此问题最常见于根据窗口大小调整内容形状的选项页面。
如果这是一个问题，请为选项页面提供固定的最小尺寸，以确保嵌入式网页能够找到合适的尺寸。