clerk-chrome-extension-patterns

Implement Clerk authentication in Chrome extensions across popups, service workers, and content scripts.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-chrome-extension-patterns-rajaryan1726
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/Rajaryan1726/ai-code-review-system/tree/main/client/.agents/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-chrome-extension-patterns-rajaryan1726

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/chrome-extension, plasmo, react, react-dom, and includes references (resource) components.

What problem does it solve? Chrome extensions break standard Clerk auth flows: OAuth and SAML cannot run in popups or side panels, service workers lose session tokens after 60 seconds, content scripts cannot call Clerk directly, and rebuilding the extension rotates its ID and breaks allowed origins. This Skill provides the exact patterns to make Clerk authentication work in every extension context. ## Core Features & Use Cases - Popup and side panel auth: Configure ClerkProvider from @clerk/chrome-extension with chrome.runtime.getURL redirect URLs, modal sign-in buttons, and token caching via chrome.storage. - syncHost for OAuth/SAML: Delegate OAuth, SAML, and magic-link sign-in to a companion web app by syncing the Clerk session cookie through host_permissions and allowed origins. - Background and headless auth: Use createClerkClient with background: true in service workers to keep sessions fresh, and message passing to serve tokens to content scripts. - Stable CRX ID: Pin the extension ID with a manifest key so rebuilds no longer break Clerk allowed origins. - Use Case: You are building a Plasmo extension that must let users sign in with Google. The Skill walks you through setting PLASMO_PUBLIC_CLERK_SYNC_HOST, adding the syncHost prop, configuring host_permissions, and registering the extension ID via the Clerk API. ## Quick Start Ask the assistant to set up Clerk authentication in your Plasmo Chrome extension popup with sign-in and user buttons.

Frequently Asked Questions about clerk-chrome-extension-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Clerk authentication to a Chrome extension popup?▼

Wrap your popup in ClerkProvider from @clerk/chrome-extension with the publishableKey and redirect URLs built from chrome.runtime.getURL. Use SignInButton and SignUpButton with mode="modal" so the popup flow is not broken by page navigation.

How do I enable Google OAuth sign-in in a Chrome extension with Clerk?▼

OAuth is not supported inside popups or side panels because the identity provider redirect cannot complete in an extension. Use the syncHost feature to delegate OAuth to your web app, then sync the session cookie back to the extension via host_permissions.

Can a Chrome extension content script use Clerk directly?▼

No, content scripts cannot use Clerk directly because Clerk enforces strict allowed origins and content scripts run on arbitrary domains. Instead, send a chrome.runtime message to the background service worker, which uses createClerkClient to return the session token.

Why does my Clerk session token expire in the background service worker?▼

Tokens expire about 60 seconds after the popup or side panel closes unless the session is kept fresh. Call createClerkClient from @clerk/chrome-extension/client with background: true so Clerk continuously refreshes the session in the service worker.

Why does Clerk auth break every time I rebuild my Chrome extension?▼

Chrome derives the extension ID from the manifest key, which is randomly generated each build, so your allowed origins stop matching. Pin a stable CRX ID by setting the key field in the manifest via a CRX_PUBLIC_KEY env var, then register that ID in Clerk's allowed origins.

Does Clerk syncHost work with Chrome extension side panels?▼

syncHost works with side panels but has a known limitation: the side panel does not auto-refresh auth state after the user signs in on the web app. The user must close and reopen the side panel to see the updated sign-in status.