Use chrome.storage.sync to store user’s setting.

在設計 Chrome Extension 的時候,常常會需要儲存使用者的設定

那就會需要用到 chrome.storage 這個 API

根據儲存方式總共分成兩種:Local 和 Sync

Sync 模式會將使用者的設定同步到 Google 雲端資料庫中

但使用此種 API 時開發者需要注意是否是在無痕模式

盡量避免紀錄使用者在無痕模式時的資訊

 

1. 首先需要在 manifest.json 中加入存取 storage 的權限

"permissions": ["tabs","storage"]

 

2. 接著在 background.js 裡面設定變數初始值 (Optional)

根據文件定義和下面的範例 chrome.storage.sync.set 中將會有兩個參數

前面是 Key:Value 的一組資料,後面是 callback function (Optional)

// Declare varable
disableFlag = false;
chrome.storage.sync.set({ "disableFlag" : disableFlag }, function() 
{
	if (chrome.runtime.error) 
	{
		console.log("Runtime error.");
	}
});

 

3. 再來就可以盡情使用 chrome.storage.sync.get 和 chrome.storage.sync.set 來儲存和讀取資料了

下面的 init() 會在彈出 popup.html 時根據 Storage 中的變數值來初始化 Checkbox 狀態

// Store data
function changeHandler()
{
	if(document.getElementById("disable").checked == true)
	{
		disableFlag = true;
		chrome.browserAction.setIcon({path:'enable16.png'});
	}
	else
	{
		disableFlag = false;
    	chrome.browserAction.setIcon({path:'block16.png'});
	}
	chrome.storage.sync.set({ "disableFlag" : disableFlag }, function() 
	{
		if (chrome.runtime.error) 
		{
			console.log("Runtime error.");
		}
	});
}

 

changeHandler() 則會根據 popup.html 中使用者是否勾選 Checkbox 來設定變數值

// Get data
function init()
{
	chrome.storage.sync.get("disableFlag", function(flag) 
	{
		console.log(flag.disableFlag);
		if (!chrome.runtime.error) 
		{
			if(flag.disableFlag==true)
				document.getElementById("disable").checked = true;
			else
				document.getElementById("disable").checked = false;
		}
	});
};

 

[參考資料]

Google Extension 的說明文件,Chrome.storage