skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

clerk-chrome-extension-patterns

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

Updated Apr 19, 2026
Search Tags:#authentication#oauth#service worker#chrome extension#clerk#plasmo#synchost
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill clerk-chrome-extension-patterns-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/divinaarmuela/Content --skill clerk-chrome-extension-patterns-divinaarmuela

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 web auth flows: OAuth redirects fail in popups, service workers lose sessions after 60 seconds, content scripts cannot call Clerk directly, and rebuilding the extension rotates its ID and breaks allowed origins. This Skill provides the correct @clerk/chrome-extension patterns for each extension context. ## Core Features & Use Cases - Popup and side panel auth: Configure ClerkProvider with chrome.runtime.getURL redirect URLs, modal sign-in buttons, and token caching via chrome.storage. - syncHost for OAuth and SAML: Delegate unsupported auth methods to a companion web app by syncing the Clerk session cookie through host_permissions. - Background and headless auth: Use createClerkClient with background: true to keep sessions fresh in service workers and message passing for content scripts. - Stable CRX ID: Pin the extension ID with a manifest key so Clerk allowed origins survive rebuilds. - Use Case: You are building a Plasmo extension that needs Google sign-in. The Skill guides you to set up syncHost with your web app, configure host_permissions, and register the extension origin via the Clerk API. ## Quick Start Set up Clerk authentication in my Plasmo Chrome extension popup with the correct redirect URLs and publishable key configuration.

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 with mode="modal" so the popup flow is not broken by page navigation.

How do I use Google OAuth in a Chrome extension with Clerk?▼

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

How can a Chrome extension background service worker get a Clerk session token?▼

Import createClerkClient from @clerk/chrome-extension/client and call it with background: true, which keeps the session fresh even when the popup is closed. Check clerk.session before calling getToken, and return true from the message listener for async responses.

Can content scripts use Clerk directly?▼

No, content scripts cannot use Clerk directly because they run in an isolated world on arbitrary origins that Clerk cannot allowlist. Use chrome.runtime.sendMessage to request the token from the background service worker, which calls createClerkClient.

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 per 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 variable, then register that fixed origin in Clerk.

Why does my side panel show signed-out after web app sign-in?▼

This is a known syncHost limitation: side panels do not automatically refresh auth state when the user signs in through the web app. The user must close and reopen the side panel to see the updated session.

Related Skills

Explore More Software Engineering Skills→
Rajaryan1726Rajaryan1726

clerk-android

Implements Clerk authentication in native Android apps using Kotlin and Jetpack Compose.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-chrome-extension-patterns

Implement Clerk authentication in Chrome extensions with syncHost and message passing.

Community
Advanced
EricJamesCrowEricJamesCrow

clerk-custom-ui

Customize Clerk component appearance with theming and layout options.

Community
Intermediate
koushik-haitkoushik-hait

clerk-react-patterns

Implement Clerk authentication patterns for React SPAs with protected routes.

Community
Intermediate