要使用設定頁面，需要在 manifest.json 裡面設定 options_page
"options_page" : "options.html",
建立options.html 頁面
<!DOCTYPE html>
<html>
<head>
<title>Budget Manager Options</title>
</head>
<body>
<h1>Budget Manager Options</h1>
<h2>Limit :
<input type="text" id="limit" />
</h2>
<input type="button" id="saveLimit" value="Save Limit" />
<input type="button" id="resetTotal" value="Reset Total" />
<script src="jquery-3.3.1.js"></script>
<script src="options.js"></script>
</body>
</html>
顯示如下 :
options.js 部分 :
$(function(){
//取值
chrome.storage.sync.get('limit',function(budget){
$('limit').val(budget.limit);
});
//儲存上限額度
$('#saveLimit').click(function(){
var limit = $('#limit').val();
if(limit){
chrome.storage.sync.set({'limit': limit},function(){
close();
});
}
});
//重置款項
$('#resetTotal').click(function(){
chrome.storage.sync.set({'total' : 0});
})
})
最後，回頭修改 popup.js 讓他可以讀取 limit 的值。 Chrome Storage 實際上可以同時存取多個值
chrome.storage.sync.get(['total','limit'],function(budget){
$('#total').text(budget.total);
$('#limit').text(budget.limit);
});
執行結果
- 只要在 Option Page 設定 Limit 的值 可以在開啟 Browser Action 時看到 Limit 已被設定
- 點擊 Reset Total 則會將 Total Spend 清空
