chrome.storageをPromise(async/await)する

chrome拡張機能 javascript

はじめに

Chrome拡張機能を作っていると、chrome.storage.sync か chrome.storage.localを使うことが良くある。

chrome.local.sync.get( date => {
  console.log(date)
})

値取得時に簡単な処理なら良いが、複雑な処理を書くとネストが深くなりコールバック地獄になってしまうので、
Promise(async/await)を使って使いやすくする。

いつも使うので、自分用にテンプレートとして記載

書き方

準備

const getStorage = (key = null) => new Promise(resolve => {
  chrome.storage.local.get(key, (data) => {resolve(data)});
});

// 省略形
const getStorage = (key = null) => new Promise(resolve => {
  chrome.storage.local.get(key, resolve)})
});

取得時

thenの場合

getStorage().then((data) => {console.log(data)})

async/awaitの場合

(async () => {
  let a = await getStorage();
  console.log(a); // 
})();