就像擴充功能可讓使用者自訂 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 chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.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 chrome.storage.
const restoreOptions = () => {
chrome.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(boolean)- 指出是否要在新分頁中開啟擴充功能的選項頁面。如果設為
false，擴充功能的選項頁面會嵌入chrome://extensions，而非在新分頁中開啟。
考量差異
chrome://extensions 內嵌選項頁面與分頁中選項頁面的行為有些微差異。
選項頁面的連結
擴充功能可以呼叫 chrome.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 (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
分頁 API
由於內嵌選項程式碼未代管於分頁中，因此無法使用 Tabs API。如果選項頁面需要操控包含的分頁，請改用 runtime.connect() 和 runtime.sendMessage()。
訊息 API
如果擴充功能的選項頁面使用 runtime.connect() 或 runtime.sendMessage() 傳送訊息，系統不會設定寄件者的分頁，且傳送者的網址將成為選項頁面網址。
尺寸
嵌入選項應會根據網頁內容自動決定大小。但針對某些類型的內容，嵌入方塊可能無法找到合適的大小。依據視窗大小調整內容形狀的選項頁面最常發生這個問題。
如果這種情況，請為選項頁面提供固定的最小尺寸，確保內嵌頁面能找到合適的大小。