バックグラウンド ページから拡張機能 Service Worker に移行する機能を置き換えるには、Chrome 109 以降で chrome.offscreen API とマニフェスト権限を使用できます。この権限をリクエストすることで、新しいウィンドウやタブを目立たせてユーザー エクスペリエンスを妨げずに、DOM API を使用するオフスクリーン ドキュメントを作成できます。Chrome 拡張機能で chrome.offscreen API を利用できるようになりました。
Chromium では、Manifest V3 拡張機能は Service Worker ベースですが、完全なドキュメント ベースのページ（バックグラウンド ページとイベント ページを含む）と同じ API やメカニズムはサポートしていません。また、コンテンツ スクリプトを使用してウェブページ上の DOM API にアクセスすると、ページ間でさまざまなコンテンツ セキュリティ ポリシーが適用されることになります。この問題を解決するため、DOM 関連の機能と API をサポートするオフスクリーン ドキュメントを導入します。これにより、Manifest V3 拡張機能が専用の API を介して、最小限のスコープで比較的権限のないオフスクリーン ドキュメントを実行時に開けるようになります。
機能情報
画面外ドキュメントは、Service Worker でサポートされていないユースケース（音声の再生など）を処理するように特別に設計されているため、このページの存続期間と付与される権限は、拡張機能 Service Worker のものとは異なります。このページには、Manifest V2 のイベントページと同様に、アクションの実行を停止すると破棄される存続期間の仕組みがあります。さらに、ユーザー エージェントは、指定された目的に固有の存続期間に対してさらに制限を課すことがあります。画面外ドキュメントは、DOM API のみにアクセス可能な API とのギャップを埋めるように設計されています。そのため、このコンテキストで拡張機能 API を直接公開する必要はありません。拡張機能がこれらを「バックグラウンド ページの置き換え」として使用する可能性を減らすため、画面外ドキュメントには chrome.runtime Messaging API のみが公開されます。（デベロッパーは、Service Worker を介して画面外のドキュメントをクライアントとして要求することで、ウェブ メッセージングを使用することもできます）。一部のユースケース（特にサイトのスクレイピング）では、クロスオリジン フレームへのアクセスが必要となるため、現在の拡張ページと同じルールに従って、これらのドキュメントにクロスオリジン フレームを埋め込むことができます。画面外のドキュメントでは、拡張機能で指定されたコンテンツ スクリプトをこれらのフレームで実行し、通常のウェブページの場合と同様に、必要なコンテンツをスクレイピングできます。
理由と目的が必要
画面外ドキュメントを作成するには、理由と正当な理由を明示する必要があります。これらの理由は API リファレンス ドキュメントにリストされており、ドキュメントの有効期間をさまざまな方法で処理します。たとえば、音声再生用に開いたドキュメントには現在、クリップボード管理用に開いたドキュメントとは異なるルールが有効期間で適用されます。また、オフスクリーン ドキュメントの目的の詳細を理由に追加することもできます。これは、ドキュメントに作用するパラメータではなく、デベロッパーが作成した文字列です。 今後、デベロッパーがフィードバックやユースケースを共有すると、API にさらに理由が追加される可能性があります。
今後の展開
実装を容易にするため、この API の最初のバージョンでは、拡張機能とプロファイルごとに一度に 1 ページしかサポートしていません。今後のバージョンでは、複数ページをサポートするよう制限を緩和する予定です。現在、拡張機能がアクティブなシークレット プロファイルで分割モードで実行されている場合、通常のプロファイルとシークレット プロファイルの両方に 1 つの画面外ドキュメントを含めることができます。 今後、拡張機能の Worker DOM 機能を提供する予定です。後日スワップできるように、Offscreen API を使用する関数を Service Worker の同等のコメント付き関数と組み合わせることで、拡張機能を「将来に備える」ことができます。
// Solution 1 - Service workers cannot directly interact with
// the system clipboard. To work around this, we'll create an offscreen
// document and pass the data we want to write to the clipboard.
async function addToClipboard(value) {
await chrome.offscreen.createDocument({
url: 'offscreen.html',
reasons: [chrome.offscreen.Reason.CLIPBOARD],
justification: 'Write text to the clipboard.',
});
}
// Solution 2 – Once extension service workers can use the Clipboard API,
// replace the offscreen document based implementation with something like this
async function addToClipboardV2(value) {
navigator.clipboard.writeText(value);
}
さらに、DOM 機能と API が Service Worker に追加されると、ドキュメントを作成する理由のリストが、Service Worker の現在の状態や画面外ドキュメントを使用する理由に応じて、追加または削除されます。
おわりに
画面外ドキュメントを使用すると、現時点では Service Worker では実現できない DOM やウィンドウ操作のアクセスを必要とする拡張機能を使用できます。また、新しいユースケースを追加したり、今後解決されるユースケースを削除したりできる柔軟なアプローチを提供します。 拡張機能では、特定のユースケースに対して提案された画面外ドキュメント API を使用する必要があります。拡張機能の主なバックグラウンド コンテキストは、マニフェストで指定した Service Worker のままにする必要があります。画面外ドキュメントは API アクセスが制限されているため、メインの拡張機能ロジックを保存する場所にはしないでください。 画面外ドキュメントの存続期間は、そのドキュメントを作成した Service Worker から独立しています。Service Worker のライフタイムに関する考慮事項と、拡張機能の Service Worker のライフタイムに関連するユースケースについては、別のブログ投稿で説明します。画面外ドキュメントを使用する理由は、機能と API が Service Worker 自体に追加されるにつれて変動します。今後、デベロッパーの皆様からのフィードバックをお待ちしております。