clerk-chrome-extension-patterns

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

Updated Sep 19, 2026
One-click install
npx skills add https://github.com/paramcodes/autobro --skill clerk-chrome-extension-patterns-paramcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/paramcodes/autobro/tree/main/.agents/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/paramcodes/autobro --skill clerk-chrome-extension-patterns-paramcodes

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 impose strict constraints on authentication: OAuth and SAML cannot run inside popups or side panels, content scripts cannot call Clerk directly due to origin restrictions, and rebuilding an extension rotates its ID and breaks allowed origins. This Skill provides the exact patterns to make Clerk auth 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 a token cache backed by chrome.storage.local. - syncHost for OAuth/SAML: Delegate OAuth, SAML, and magic-link sign-in to a companion web app by syncing the Clerk session cookie via host_permissions and the syncHost prop. - Background and headless auth: Use createClerkClient with background: true in service workers to keep session tokens fresh, and message passing so content scripts can request tokens. - Stable CRX ID: Pin the extension ID with a manifest key so allowed origins survive rebuilds. - Use Case: You are building a Plasmo extension whose users sign in with Google. This Skill walks you through setting PLASMO_PUBLIC_CLERK_SYNC_HOST, adding host_permissions, registering the extension origin via the Clerk API, and hiding unsupported social buttons in the popup. ## Quick Start Set up Clerk authentication in my Plasmo Chrome extension popup with a stable extension ID and Google sign-in delegated to my web app.

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 your publishableKey and redirect URLs built from chrome.runtime.getURL('.'). Use SignInButton with mode="modal" so the popup flow is not broken by page navigation.

How to 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 prop to delegate sign-in to your web app, then sync the session cookie back 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 Chrome extension ID change after every rebuild?▼

Chrome derives the extension ID from the manifest key, which is random unless pinned. Generate a keypair with Plasmo Itero, set CRX_PUBLIC_KEY in .env.chrome, reference it as the manifest key, and add the stable chrome-extension:// origin in Clerk.

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

Tokens expire about 60 seconds after the popup 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.

Does Clerk syncHost work with Chrome extension side panels?▼

Partially. Side panels do not auto-refresh auth state, so after a user signs in via the web app they must close and reopen the side panel to see the updated session. This is a known limitation of the SDK.