Chrome 拡張機能でonMessageイベント内でアクティブなタブを取得する方法　

Google Chromeの拡張機能などを制作していると多用する［onMessage］イベントですが、ServiceWorker内のスクリプトからアクティブなタブを取得する際に、少しハマったので取得する手順について備忘録的に投稿しておきます。

なるべく直ぐに戻す

Chrome 拡張機能の場合、フロントエンドのページ内や、サイドパネルなどのコンテンツとやり取りを行う場合にServiceWorkerで指定した［background.js］で動作する次のようなコードです。

chrome.runtime.onMessage.addListener(async(msg, sender, sendResponse) => {
  if (msg.type === "INITREQUEST") {
    console.log("M3U8Downloader action:" + msg.type);
    initRequest();
  }
}

こんな感じで、名前を付けて条件分岐を行いServiceWorker側の関数やプロシージャーを動作させることが可能です。

しかし、アクティブなタブを取得するための次のコードを使った場合に正しく取得できない場合があります。

const [tab] = await chrome.tabs.query({
  active: true,
  currentWindow: true
});

色々試してみて、次のように直ぐに値を戻すことで安定して取得ができました。

chrome.runtime.onMessage.addListener(async(msg, sender, sendResponse) => {
  if (msg.type === "GETACTIVETAB") {
    return chrome.tabs.query({ active: true, currentWindow: true })
      .then((tabs) => {
        return { tabId: tabs[0]?.id };
      });
  }
}

まとめ

今回は、短い内容ですが Chrome 拡張機能で、ServiceWorker内のスクリプトからアクティブなタブを取得する際に、少しハマったので取得する手順について書きました。

Chrome拡張機能で［onMessage］内からアクティブなタブを取得したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。