就像擴充功能可讓使用者自訂 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()
傳送訊息,系統不會設定寄件者的分頁,且傳送者的網址將成為選項頁面網址。
尺寸
嵌入選項應會根據網頁內容自動決定大小。但針對某些類型的內容,嵌入方塊可能無法找到合適的大小。依據視窗大小調整內容形狀的選項頁面最常發生這個問題。
如果這種情況,請為選項頁面提供固定的最小尺寸,確保內嵌頁面能找到合適的大小。