キオスク PWA から拡張機能を接続する

Windows、Linux、MacOS 版の Chrome 102 以降では、Chrome アプリのサポートが終了します。ChromeOS では、Chrome アプリは少なくとも 2025 年 1 月までサポートされますが、Chrome アプリはサポート終了が予定されているため、ウェブアプリへの移行を強くおすすめします。これまで、Chrome アプリはキオスクモードで、ウェブアプリ単体では現在サポートされていない追加機能を利用できました。キオスク ウェブ アプリケーションにコンパニオン拡張機能をデプロイすることで、この機能の一部を引き続き使用できます。

拡張機能はどのようにデプロイされますか？

拡張機能は、Chrome 管理コンソールのキオスク構成画面（Devices > Chrome > Apps & Extensions > Kiosks に移動して表示）からデプロイします。拡張機能は、一般公開されているリンクで自社ホストするか、Chrome ウェブストアでホストできます。企業や教育機関での拡張機能の管理について詳しくは、こちらのドキュメントをご覧ください。

ウェブアプリから拡張機能 API を呼び出すにはどうすればよいですか？

キオスク ウェブアプリでコンパニオン拡張機能をデプロイできるため、拡張機能 API を呼び出して、デバイスやハードウェア プラットフォームに関する有用な情報を取得したり、Chrome のユーザー補助機能を管理したりするなど、拡張機能の機能を活用できます。

キオスク専用 API を使用する場合は、マニフェストで有効にする必要があります。次に、キオスク ウェブアプリとコンパニオン拡張機能の間でメッセージ パッシングを実装し、相互に通信できるようにします。

キオスク専用の拡張機能 API を有効にする

キオスクモードでのみ使用できる拡張機能 API もあります。拡張機能でキオスク専用 API を呼び出すには、マニフェストに "kiosk_enabled" フィールドを追加して true に設定する必要があります。

{
    "manifest_version": 3,
    "version": "1.0",
    ...
    "kiosk_enabled": true
 }

メッセージ パッシングを実装する

拡張機能の設定

ウェブアプリからメッセージを受信して応答するには、クライアント（ウェブアプリ）からメッセージが届くのをリッスンし、対応する API 呼び出しにリクエストをプロキシするバックグラウンド スクリプトを公開する必要があります。次の例では、ウェブアプリが callRestart の methodName を含むカスタム メッセージ オブジェクトを送信したときに、ChromeOS デバイスを再起動するリクエストがプロキシされます。

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

拡張機能のマニフェストは、externally_connectable キーを使用して、拡張機能への外部関数呼び出しを許可するように構成できます。このキーは、拡張機能のメソッドを呼び出すことが許可されているサイトと拡張機能を指定します。Chrome 拡張機能とマニフェスト v3 について詳しくは、公式ドキュメントをご覧ください。

{
    "background": {
       "service_worker": "background.js"
    },
    "description": "This restarts your ChromeOS device. Lucky you!",
    "manifest_version": 3,
    "name": "Restart your kiosk app",
    "version": "1.0",
    "kiosk_enabled": true,
    "externally_connectable": {
         "accepts_tls_channel_id": false,
         "matches": [ "://developer.android.com/" ]
      }
 }

ウェブアプリのセットアップ

ウェブアプリから拡張機能を呼び出すには、静的拡張機能 ID を知っておく必要があります。この ID は、Chrome 拡張機能をインストールしたときに表示される chrome://extensions ページで確認できます。また、拡張機能のアップロード後に Chrome ウェブストアで確認することもできます。これにより、ウェブアプリは通信したい拡張機能を正確に指定できます。その後、chrome.runtime.sendMessage を呼び出し、拡張機能に送信するメッセージとともに拡張機能 ID を渡します。

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz'; // found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

メッセージ パス用のウェブページを拡張機能に接続する方法について詳しくは、こちらのドキュメントをご覧ください。

注: 拡張機能とウェブアプリは、任意に相互通信することはできません。拡張機能は、マニフェストの externally_connectable セクションにリストされているドメインからのメッセージのみをリッスンしようとします。同様に、ウェブアプリは通信したい拡張機能の静的 ID を知っている必要があります。