chrome.storage.*.getを同期的に扱う

TL;DR

// async キーワードで同期処理のできる関数を定義
window.onload = async (e) => {
    // chrome.storage.sync.get() に await をつけて同期処理に
    // (await chrome.storage.sync.get()) は Promise の処理結果を返すので、戻り値は ['要素名'] で取得できる
    const domainList = (await chrome.storage.sync.get('domainList'))['domainList'];
    console.log(domainList);
}

この書き方がnew Promise()が不要なので簡単だと思います。

ポイント

その1

chrome.storage.sync.get()関数はそのままだと非同期処理になりPromise¹を返すので、asycをかけた関数でラップして同期処理を可能にしたうえで(await chrome.storage.sync.get('domainList'))を使ってstorage内の値が帰ってくるまで待つようにしています。

今回はHTMLの描画後にjavascriptが動いてほしかったので、window.onloadイベント用の無名関数にasyncをかけました。

その2

(await chrome.storage.sync.get('domainList'))['domainList']はget('domainList')と同じキー'domainList'を使ってsyncに保存されているオブジェクトから取得する値を指定しています²。

また、(await 〜.get())をカッコで括ることにより、get()のPromise処理後の戻り値が取得でき、.then()を呼ぶ必要もなくなります。

例

window.onload = async (e) => {
    // domainList1 と domainList2  と domainList3 は同じ値になる
    const domainList1 = (await chrome.storage.sync.get('domainList'))['domainList'];
    const domainList2 = await chrome.storage.sync.get('domainList').then(item => item['domainList']);
    const domainList3 = await chrome.storage.sync.get('domainList')
                            .then(item => {
                                return item['domainList']
                            });
}

参考文献

1. Promise - JavaScript | MDN ↩

2. 本記事コメントより ↩