可讓使用者透過提供選項頁面來自訂擴充功能的行為。使用者可以查看擴充功能選項，方法是在工具列中的擴充功能圖示上按一下滑鼠右鍵，然後選取選項，或前往 chrome://extensions 的擴充功能管理頁面找出需要的擴充功能，按一下「Details」(詳細資料)，然後選取選項連結。
撰寫選項頁面
以下是選項頁面範例。
<!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'));
}
});
分頁 API
擴充功能嵌入選項網頁程式碼不代管於分頁中，因此會影響 Tabs API 的使用方式：
- tabs.query 一律無法在擴充功能的選項網頁網址中找到分頁。
- 開啟選項頁面時，系統不會觸發 tabs.onCreated。
- 當選項頁面載入狀態變更時，系統不會觸發 tabs.onUpdated。
- tabs.connect 或 tabs.sendMessage 無法用來與選項頁面通訊。
如果選項頁面必須操控包含的分頁，您可以使用 runtime.connect 和 runtime.sendMessage。
訊息 API
如果擴充功能的選項頁面使用 runtime.connect 或 runtime.sendMessage 傳送訊息，系統就不會設定寄件者分頁，寄件者的網址將成為選項頁面網址。
尺寸
嵌入選項應根據網頁內容自動決定本身的大小。但針對某些類型的內容，嵌入方塊可能無法找到合適的大小。依據視窗大小調整內容形狀的選項頁面最常發生這個問題。
如果這種情況，請為選項頁面提供固定的最小尺寸，確保內嵌頁面能找到合適的大小。