ログ日記

作業ログと日記とメモ

Chrome拡張のトップレベルでawaitしたいけど出来ないっぽい

例えばbackground.js のトップレベルで chrome.storage.sync.get を待つために await すると定形通りのエラーになる。

Uncaught SyntaxError: await is only valid in async function

まあそうだよね。


オプション画面で設定した値を使ってイベント登録したいんだよね…。
仕方がないので基本的に localStorage を使うようにして、違うPCとの同期のために chrome.storage.sync と localStorage を同期するようなコードを書いた。

window.addEventListener("storage", () => {
  // 新しい設定値で再初期化
  const opts = getOptsFromLocalStorage();
  init(opts);

  // 他のブラウザと同期
  chrome.storage.sync.set({key: opts});
});

chrome.storage.onChanged.addListener((e, ns) => {
  // ブラウザ間の同期で(も)呼び出される
  setOptsToLocalStorage(e.key.newValue);
});

chrome.storage.sync.get({'key': []}, function(val){
  // localStorageより sotrage.sync が新しい場合に備えて

  const opts = getOptsFromLocalStorage();
  if (opts == val.key)
    return;
  setOptsToLocalStorage(val.key);
  // 必要???
});

最後の処理は必要か分からなかった。起動してないときに storage.sync の内容が変わった場合は onChanged は発火するんだろうか。
調べればいいんだけど、毎回拡張の公開 => しばらく待つという手順が大変。どうやってブラウザ間の同期のテストをすればいいんだろう。