clerk-chrome-extension-patterns

Enable Native API in Clerk Dashboard under Native applications. Required for all extension integrations. .env.development : src/popup.tsx : Use mode="modal" for SignInButton -- navigating to a separate page breaks the popup flow. Use this when you need OAuth, SAML, or want the extension to reflect sign-in from your web app. How it works : The extension reads the Clerk session cookie from your web app's domain via host_permissions . Step 1 -- Environment variables: .env.development : .env.production : Step 2 -- Add syncHost prop: Step 3 -- Configure host_permissions in package.json : Step 4 -- Add extension ID to web app's allowed origins via Clerk API: Hide unsupported auth methods in popup when using syncHost: Full guide: references/sync-host.md Import from @clerk/chrome-extension/client (not @clerk/chrome-extension ). Background service worker ( src/background/index.ts ): The background: true flag keeps sessions fresh even when popup/sidepanel is closed. Without it, tokens expire after 60 seconds. Popup with vanilla JS ( src/popup.ts ): Full guide: references/create-clerk-client.md For extensions that run entirely in the background and sync with a web app.