為了將 Chrome Extension 客製化，會需要提供一些選項讓使用者自行設定，而選項頁面就是為此而存在。
加入選項頁面的方法
Step 1. 在設定檔中定義選項頁面
{
...
"options_page": "options.html",
...
}
Step 2. 建立選項頁面
<html>
<head>
<meta charset="utf-8">
<title>Options page</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<h2>Options page</h2>
<p>你可以在這裡製作客製化選項。</p>
<select name="style" id="style">
<option value="1">Mac OS X</option>
<option value="2">Windows</option>
<option value="3">Linux</option>
</select>
</body>
</html>
Step 3. 加入後，會在擴充功能管理頁的 Extension 旁多出一個『選項』的按鈕
溫馨小提醒：選項頁面設定的值可以用 chrome.storage 的 API 來儲存，不但可以在 Extension 的任何腳本中存取，也支援同步功能。
重要注意事項
Chrome Extension 開發團隊正在計劃提供選項頁面的預設畫面，讓不同的 Extension 有風格一致的外觀。您可以在crbug.com/25317 關注目前最新的狀況。
結語：
看來加入選項頁面也很簡單，不過似乎快出新版了，建議先別把心思放在選項頁面的外觀設計上。如果您有問題，歡迎在下方留言。謝謝！
沒有留言:
張貼留言