Teemo という Chrome 拡張を開発したのですが、その際 1 つのウインドウを使い回す構成にしたいなと考えていました。

例えば何も考えずに chrome.windows.create を Chrome 拡張を開くたびに呼び出すと、呼び出すたびにウインドウが新規作成されてしまいます。そうすると、都度画面に不要なウインドウが出てきて邪魔になるだけでなく、手動で不要なウインドウを消す作業をユーザーに強いることとなってしまいます。。🙃

上記のような挙動が望まれるケースもあると思いますが、Teemo ではウインドウ間を頻繁に行き来するため、ショートカットを利用して拡張機能を呼び出すことを見込んでいました。そのため、ショートカットを利用して拡張機能を呼び出すたびにウインドウが新規作成され続ける挙動は望んでいませんでした。

1 つのウインドウを使い回すためには、chrome.windows.create 時に作成される window の id を保持しておきます。その後、Chrome 拡張が呼び出されるたびに window が既に存在するかどうかを保持していた id を元にチェックします。既に window が存在していた場合はそれを使いまわします。存在していなかった場合は、chrome.windows.create で window を新規作成します。

// window の id を保持しておくための変数
let vid = -1;

chrome.browserAction.onClicked.addListener(function () {
  // vid の値を元に Chrome 拡張で開いた window の取得を試みる
  chrome.windows.get(vid, function (chromeWindow) {
    // エラーが無く、既に window が存在している場合は、
    // そのステータスを { focused: true } にすることで最前面に呼び出す
    if (!chrome.runtime.lastError && chromeWindow) {
      chrome.windows.update(vid, { focused: true });
      return;
    }

    // 上記以外のパターンでは window を新規作成する
    chrome.windows.create(
      {
        url: "index.html",
        type: "popup",
      },
      function (window) {
        // 新規作成した window を使い回せるようにするため、
        // vid 変数に window の id を保持しておく
        vid = window.id;
      }
    );
  });
});

上記コードで 1 つのウインドウを使い回すことが出来るようになるはずです。✅