clerk-chrome-extension-patterns

Configure Clerk authentication across Chrome extension contexts with syncHost and messaging.

Updated May 4, 2026
One-click install
npx skills add https://github.com/Endsi3g/Uprising-AOS --skill clerk-chrome-extension-patterns-endsi3g
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/Endsi3g/Uprising-AOS/tree/main/.agents/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/Endsi3g/Uprising-AOS --skill clerk-chrome-extension-patterns-endsi3g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents Chrome extension authentication failures by providing correct Clerk integration patterns for popups, side panels, service workers, and content scripts.

Core Features & Use Cases

  • Popup/Side Panel Redirect Rules: Ensures OAuth and SAML are delegated correctly using syncHost, while using chrome.runtime.getURL for extension-safe redirect URLs.
  • Background Token Access: Uses createClerkClient with background: true to retrieve fresh session tokens from a service worker for authenticated API calls.
  • Content Script Auth via Message Passing: Avoids origin restrictions by having content scripts request auth state from the background worker before injecting UI or making requests.
  • Stable CRX ID & Allowed Origins: Reduces auth breakage across rebuilds by pinning a stable extension key and registering the stable chrome-extension:// origin with Clerk.

Quick Start

Set up your extension’s ClerkProvider using publishableKey plus chrome.runtime.getURL-based redirect URLs for popup auth, then enable syncHost and host_permissions to support OAuth/SAML through your 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 get Clerk authentication working in a Chrome extension service worker?

Clerk authentication in a Chrome extension service worker requires using createClerkClient with background: true to retrieve fresh session tokens. This approach bypasses React hooks limitations, ensuring the service worker maintains valid auth state for background API calls.

Why does my Clerk OAuth redirect fail in a Chrome extension popup?

Clerk OAuth redirects fail in popups when redirect URLs are not formatted as extension-safe chrome-extension:// paths. Resolve this by using chrome.runtime.getURL for redirect URLs and configuring syncHost to delegate OAuth and SAML flows through your web app.

How do I access Clerk auth state from a content script?

Access Clerk auth state from a content script by using chrome.runtime messaging to request the current user state from the background service worker. This avoids origin restrictions and prevents misusing Clerk React hooks in unsupported content script runtimes.

How do I prevent Clerk authentication from breaking across Chrome extension rebuilds?

Prevent Clerk authentication breakage across extension rebuilds by pinning a stable CRX ID using a fixed extension key. You must also register the stable chrome-extension:// origin with Clerk and configure required env vars plus host_permissions and allowed_origins.

Does Clerk authentication work with Chrome extension side panels?

Clerk authentication works with Chrome extension side panels by applying the same redirect rules as popups. You must use chrome.runtime.getURL for extension-safe redirect URLs and enable syncHost to support OAuth and SAML delegation through your web app.