clerk-chrome-extension-patterns は何をしますか？
@clerk/chrome-extension を使用したChrome拡張機能の認証 — ポップアップ/サイドパネルのセットアップ、ウェブアプリを介したOAuth/SAMLのためのsyncHost、サービスワーカーやヘッドレス拡張機能のためのcreateClerkClient、安定したCRX ID。トリガー: Chrome拡張機能の認証、PlasmoとClerkの連携、ポップアップサインイン、syncHost、バックグラウンドサービスワーカートークン、createClerkClient、ヘッドレス拡張機能。
概要
このスキルは、@clerk/chrome-extension を使用してChrome拡張機能に認証を追加するためのパターンを提供します。以下の主要なユースケースをカバーします:
- ポップアップ/サイドパネル認証: ユーザーが拡張機能のポップアップやサイドパネルからサインインできるようにします。
- syncHostによるOAuth/SAML: バックグラウンドのウェブアプリを介したOAuthやSAMLフェデレーション (
syncHost) を設定します。 - サービスワーカーとヘッドレス拡張機能:
createClerkClientを使用して、サービスワーカーやUIのない拡張機能（例: バックグラウンドスクリプトのみ）でトークンを管理します。 - 安定したCRX ID: 自動更新やOAuthリダイレクトURIの登録のための安定した拡張機能IDを設定します。
前提条件
@clerk/chrome-extensionパッケージがインストールされていること (npm install @clerk/chrome-extension)- Clerkアカウントとアプリケーション (ダッシュボードから取得)
- マニフェストV3 (推奨)
ポップアップ/サイドパネル認証
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/chrome-extension';
function App() {
return (
<ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
<SignedOut>
<SignInButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</ClerkProvider>
);
}
syncHost（OAuth/SAML ウェブアプリ連携）
OAuthやSAMLプロバイダーを介した認証を使用する場合、syncHost を設定してバックグラウンドのウェブアプリとセッションを同期します。
<ClerkProvider
publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
syncHost={import.meta.env.VITE_CLERK_SYNC_HOST} // 例: https://myapp.com
>
{/* ... */}
</ClerkProvider>
syncHost は、OAuth/SAMLプロバイダーからのリダイレクトを処理するウェブアプリのURLを指定します。
サービスワーカーとヘッドレス拡張機能
サービスワーカーやヘッドレス拡張機能（バックグラウンド専用）では、createClerkClient を使用します。
import { createClerkClient } from '@clerk/chrome-extension';
const clerkClient = createClerkClient({
publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
});
// 例: トークンの取得
const token = await clerkClient.session?.getToken();
安定したCRX ID
開発中は、chrome://extensions で「デベロッパーモード」を有効にし、「パッケージ化されていない拡張機能を読み込む」を使用して、安定したIDを維持します。本番環境では、Chrome ウェブストアにアップロードすると、自動的に安定したIDが割り当てられます。
- OAuthリダイレクトURIをClerkダッシュボードに登録する:
https://[EXTENSION_ID].chromiumapp.org/__clerk_oauth_callback
Plasmoとの統合
Plasmoフレームワークを使用する場合、@clerk/chrome-extension と同様のパターンで統合できます。詳細は、PlasmoのClerkアドオン（利用可能な場合）を参照してください。