正如扩展程序允许用户自定义 Chrome 浏览器一样，选项页面也支持自定义扩展程序。使用选项来启用功能，并允许用户选择适合其需求的功能。
查找“选项”页面
用户可以通过直接链接访问选项页面，也可以右键点击工具栏中的扩展程序图标，然后选择“选项”。此外，用户还可以通过以下方式前往选项页面：首先打开 chrome://extensions，找到所需扩展程序，点击详情，然后选择“选项”链接。
编写选项页面
以下是选项页面的示例：
options.html:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
<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>
以下是一个选项脚本示例。将其保存在与 options.html 相同的文件夹中。
此功能使用 storage.sync API 跨设备保存用户的首选选项。
options.js:
// Saves options to browser.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
browser.storage.sync.set(
{ favoriteColor: color, likesColor: likesColor },
() => {
// Update status to let user know options were saved.
const status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(() => {
status.textContent = '';
}, 750);
}
);
};
// Restores select box and checkbox state using the preferences
// stored in browser.storage.
const restoreOptions = () => {
browser.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
最后，将 "storage" 权限添加到扩展程序的清单文件中：
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
声明选项页面行为
扩展程序选项页面有两种类型：全页和嵌入式。选项页面的类型取决于其在清单中的声明方式。
全页选项
系统会在新标签页中显示全页选项页面。在清单的 "options_page" 字段中注册选项 HTML 文件。
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
嵌入式选项
借助嵌入式选项页面，用户无需离开嵌入式框内的扩展程序管理页面，即可调整扩展程序选项。如需声明嵌入式选项，请在扩展程序清单的 "options_ui" 字段下注册 HTML 文件，并将 "open_in_tab" 键设置为 false。
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page（字符串）- 指定选项页面的路径（相对于扩展程序的根目录）。
open_in_tab（布尔值）- 表示扩展程序的选项页面是否将在新标签页中打开。如果设置为
false，扩展程序的选项页面会嵌入到chrome://extensions中，而不是在新标签页中打开。
考虑差异
嵌入在 chrome://extensions 中的选项页面与标签页中的选项页面在行为上略有不同。
指向选项页面的链接
扩展程序可以通过调用 browser.runtime.openOptionsPage() 直接链接到选项页面。例如，可以将其添加到弹出式窗口中：
popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>
popup.js:
document.querySelector('#go-to-options').addEventListener('click', function() {
if (browser.runtime.openOptionsPage) {
browser.runtime.openOptionsPage();
} else {
window.open(browser.runtime.getURL('options.html'));
}
});
Tabs API
由于嵌入式选项代码未托管在标签页中，因此无法使用 Tabs API。
如果选项页面确实需要操纵包含它的标签页，请改用 runtime.connect() 和 runtime.sendMessage()。
Messaging API
如果扩展程序的选项页面使用 runtime.connect() 或 runtime.sendMessage() 发送消息，则不会设置发送者的标签页，并且发送者的网址将是选项页面网址。
大小
嵌入式选项应根据网页内容自动确定自身的大小。不过，嵌入式框可能无法为某些类型的内容找到合适的大小。对于根据窗口大小调整内容形状的选项页面，此问题最为常见。
如果这是一个问题，请为选项页面提供固定的最小尺寸，以确保嵌入式页面能够找到合适的尺寸。