Google拡張機能で常時ポップアップメニューを別タブで表示する方法

Google Chrome拡張機能を開発する際、通常のポップアップはブラウザのツールバーアイコンをクリックしたときだけ表示されます。しかし、特定の機能を常に表示したい場合や、別タブとして表示させたい場合には別の実装方法が必要です。この記事では、常時ポップアップを別タブで表示する方法を解説します。

ポップアップとブラウザアクションの違い

通常、拡張機能のポップアップはmanifest.jsonで”action”または”browser_action”で定義され、ユーザーがアイコンをクリックしたときのみ表示されます。これは短時間表示向けで、常時表示には向いていません。

常時表示させたい場合は、ポップアップではなく、常に開くHTMLページを利用するのが一般的です。

manifest.jsonでポップアップを指定せず、代わりにbackgroundスクリプトやコンテンツスクリプトから新しいタブを開く方法があります。例えば、以下のようにbackground.jsでタブを生成できます。

chrome.action.onClicked.addListener(() => {
    chrome.tabs.create({ url: 'popup.html' });
});

これにより、ユーザーがアイコンをクリックすると、ポップアップではなく別タブとしてHTMLページが開きます。

タブを開いた状態で常に情報を表示したい場合は、WebSocketやPeriodic Updates APIなどでデータをリアルタイムに更新すると便利です。また、閉じられないようにユーザーに注意を促すUIも検討できます。

さらに、オプションページやサイドバーAPIを活用することで、ブラウザ内で別ウィンドウや固定サイドバーとして表示させることも可能です。

Chrome拡張機能で常にポップアップを表示したい場合、通常のポップアップは不向きです。代わりに、新しいタブを開く方法やサイドバー表示を検討すると、ユーザー体験を向上させることができます。manifest.jsonやbackgroundスクリプトを活用して、常時表示されるUIを実装しましょう。