skills.rest
RajAryanIITBHU
RajAryanIITBHUCOMMUNITY
Explore all skills by this author →
GitHub

clerk-chrome-extension-patterns

Implement secure Clerk authentication for Chrome extensions with session syncing and token caching.

1|Updated Apr 11, 2026
Search Tags:#auth#clerk#chrome-extension#service-worker#content-scripts#synchost#createclerkclient
One-click install
npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-chrome-extension-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/RajAryanIITBHU/bny/tree/main/.continue/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-chrome-extension-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Chrome extensions cannot run standard web-based identity provider redirects and have strict origin restrictions, which breaks common OAuth, SAML, and magic-link flows and makes session management fragile across popups, side panels, background workers, and content scripts. This Skill consolidates reliable patterns for integrating Clerk into Chrome extensions so extensions can obtain and refresh session tokens, delegate OAuth to a web app, and avoid rebuild-related auth breakage.

Core Features & Use Cases

  • Popup & Sidepanel Integration: Wrap UI in ClerkProvider and use chrome.runtime.getURL for redirect URLs so sign-in and sign-out redirect flows work inside extension pages.
  • syncHost Delegation: Delegate OAuth and SAML to your web app using syncHost, host_permissions, and allowed_origins to enable social login and magic links.
  • Background & Headless Clients: Use createClerkClient with background:true in service workers to keep sessions fresh and provide tokens to content scripts via message passing.
  • Stable Deployment & Token Caching: Pin a stable CRX ID in the manifest, configure a persistent token cache (chrome.storage.local), and disable incompatible bot protection to prevent auth failures.
  • Use Case: A Plasmo-based extension that needs Google OAuth via a web app, background API calls on behalf of the user, and content-script overlays that require authenticated requests.

Quick Start

Add PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and PLASMO_PUBLIC_CLERK_SYNC_HOST to your env files, wrap your popup with ClerkProvider using chrome.runtime.getURL for redirect props, and configure host_permissions plus a stable CRX key in the manifest.

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 implement Clerk authentication in a Chrome extension service worker?▼

To implement Clerk authentication in a Chrome extension service worker, use createClerkClient with background:true to maintain sessions and provide tokens via message passing to content scripts. This pattern ensures background API calls remain authenticated without standard web redirects.

How does syncHost delegation work for OAuth in Chrome extensions?▼

SyncHost delegation works by routing OAuth and SAML flows through your web app using syncHost, host_permissions, and allowed_origins. This mechanism enables social login and magic links by bypassing the strict origin restrictions of Chrome extension environments.

Why does Clerk authentication break after rebuilding my Plasmo extension?▼

Clerk authentication breaks after rebuilding because the extension ID changes, invalidating redirect URLs. Pin a stable CRX ID in your manifest and disable incompatible bot protection to prevent these auth failures and maintain persistent sessions.

Can I use ClerkProvider in a Chrome extension popup or side panel?▼

Yes, you can use ClerkProvider in a Chrome extension popup or side panel. Wrap your UI in ClerkProvider and use chrome.runtime.getURL for redirect URLs so that sign-in and sign-out redirect flows execute correctly inside extension pages.

What is the best way to cache Clerk session tokens in a Chrome extension?▼

The best way to cache Clerk session tokens in a Chrome extension is configuring a persistent token cache using chrome.storage.local. This allows background service workers to retrieve and refresh tokens for authenticated API calls reliably.

Do I need host_permissions to enable magic links in a Chrome extension?▼

Yes, you need host_permissions and allowed_origins configured to enable magic links in a Chrome extension. These settings allow the extension to delegate authentication to your web app's syncHost, bypassing standard web identity provider redirect restrictions.

Related Skills

Explore More Software Engineering Skills→
clerkclerk
66

clerk-chrome-extension-patterns

Authenticate Chrome extension users with Clerk across popup, background, and content-script contexts.

Official
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-chrome-extension-patterns

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

Community
Advanced
SylphxAISylphxAI
4

pwa

Guide service worker caching strategies for offline-capable Next.js PWAs on Vercel.

Official
Intermediate
DevHive1DevHive1
18

clerk-auth

Integrate Clerk authentication into web and mobile applications.

Community
Advanced