iT邦幫忙

DAY 7
0

Chrome Extension 學習筆記系列 第 7

Chrome Extension 開發入門篇 07 - Chrome Extension 選項頁面

[好讀版]

為了將 Chrome Extension 客製化,會需要提供一些選項讓使用者自行設定,而選項頁面就是為此而存在。

加入選項頁面的方法

Step 1. 在設定檔中定義選項頁面

manifest.json

{
...
"options_page": "options.html",
...
}

Step 2. 建立選項頁面

options.html



<meta charset="utf-8">
<title>Options page</title>
<link rel="stylesheet" href="options.css">


<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>

Step 3. 加入後,會在擴充功能管理頁的 Extension 旁多出一個『選項』的按鈕

溫馨小提醒:選項頁面設定的值可以用 chrome.storage 的 API 來儲存,不但可以在 Extension 的任何腳本中存取,也支援同步功能。

重要注意事項

Chrome Extension 開發團隊正在計劃提供選項頁面的預設畫面,讓不同的 Extension 有風格一致的外觀。您可以在crbug.com/25317 關注目前最新的狀況。


上一篇
Chrome Extension 開發入門篇 06 - Chrome Extension 彈出頁面
下一篇
Chrome Extension 開發入門篇 08 - Chrome Extension 後台頁面
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言