うまくいかなかったこと

Chromeの拡張のchrome.webRequest.onHeadersReceivedでローカルストレージのデータ取得したいけど、なぜかawaitが待たない。。。
本格的にやるならライブラリ使ったりした方が良いが取り急ぎ対応したい。

backgroun.js


// リクエストを捕捉するAPI
chrome.webRequest.onHeadersReceived.addListener(
  function () {
    // ここでローカルストレージのデータ参照したいが、非同期処理がうまく動かない
  },
  {
    urls: ["<all_urls>"],
    types: ["main_frame", "sub_frame"],
  },
  ["blocking", "responseHeaders"]
);

popup.js

  // ブラウザアクションのスクリプトでローカルストレージを更新している

  // フィールド情報をchromeストレージにセットする
  function setStorage () {

    // ローカルストレージにセット
    chrome.storage.local.set({
      hogehoge: hogehogeString,
      pikapika: pikapikaString,
    }, function(){});

  }

非同期処理を書かずに対応する

ローカルストレージの変更を検知するリスナーが存在することがわかったので、これを使って変更後の値を変数に設定します。
chrome.storage.onChangedをイベント登録して変更後の値を変数に代入していきます。

backgroun.js

var hogehoge = '';
var pikapika = '';

// 読み込み時にローカルストレージの値を変数に設定
chrome.storage.local.get(
  [
    'hogehoge',
    'pikapika'
  ],
  function(storage){
    hogehoge = storage.hogehoge;
    pikapika = storage.pikapika;
  }
);

// ローカルストレージの変更を検知する
chrome.storage.onChanged.addListener(function(changes, area) {

  // ローカルストレージの変更か？
  if (area !== "local") {
    return;
  }

  // changesは変更したプロパティの配列
  if ("hogehoge" in changes) {
    hogehoge = changes.hogehoge.newValue; // 変更前の値はoldValueプロパティに持つ
  }
  if ("pikapika" in changes) {
    pikapika = changes.pikapika.newValue;
  }

});

// リクエストを捕捉するリスナー
chrome.webRequest.onHeadersReceived.addListener(
  function () {
    alert(pikapika + hogehoge);
  },
  {
    urls: ["<all_urls>"],
    types: ["main_frame", "sub_frame"],
  },
  ["blocking", "responseHeaders"]
);

これでbackgroundで動くスクリプトの変数とローカルストレージの値を同期できます。
無駄が多いがロジック部分にコールバックなど非同期処理のコードがなくなるし、わりとありか🧐