コールバック関数の処理も込みでawaitしたい

コールバック関数の処理込みでawaitしたいときは、以下のようにreturn new Promiseで囲むようにすればOK。

// 大雑把な説明
const f = () => {  // (3) 全体を関数化
    return new Promise((resolve, reject) => {  // (2) return new Promiseで囲む
        SomeFunction(callback);  // (1) コールバック関数込みでawaitしたい関数
    });
};

以下は、setTimeout()のコールバック関数の処理込みでawaitしたい場合の例。

const f1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve("f1 ends.");  // コールバック関数の返り値
    }, 1000);
  });
};

const f2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve("f2 ends.");
    }, 2000);
  });
};

const main = async () => {
  console.log(await f2());  // コールバック関数の返り値を受け取れるようにもなる
  console.log(await f1());
};

main();

// 出力結果は以下の順番になる。
// f2 ends.
// f1 ends.

CodePenの動作確認：https://codepen.io/taketakeyyy/pen/rNGBLeL

他にも、chrome.storage.sync.get()のようなものも同様に書ける。

/* TypeScriptで記述 */
// chrome.storage.sync.get(読み込みたいkey, callback関数)
const get_chrome_storage = (): Promise<string> => {
    return new Promise((resolve, reject) => {
        chrome.storage.sync.get({
            key: "default"
        }, (result) => {
            return resolve(result.key);  // これが返り値
        });
    });
};


const main = () => {
  const key = await get_chrome_storage();  // コールバック関数の処理が終了するまで待ち、返り値を受け取る
  console.log(key);
}

main();