clerk-chrome-extension-patterns
Chrome Extension Patterns
CRITICAL RULES
- OAuth (Google, GitHub, etc.) and SAML are NOT supported in popups or side panels -- use
syncHostto delegate auth to your web app - Email links (magic links) don't work in popups -- the popup closes when the user clicks outside, resetting sign-in state
- Side panels don't auto-refresh auth state -- users must close and reopen the side panel after signing in via the web app
- Service workers and content scripts have NO access to Clerk React hooks -- use
createClerkClient()or message passing - Extension URLs use
chrome-extension://nothttp://-- all redirect URLs must usechrome.runtime.getURL('.') - Without a stable CRX ID, every rebuild breaks auth -- configure
keyin manifest BEFORE deploying - Content scripts cannot use Clerk directly due to origin restrictions -- Clerk enforces strict allowed origins
- Bot protection must be DISABLED in Clerk Dashboard -- Cloudflare bot detection is not supported in extension environments
Authentication Options
| Method | Popup | Side Panel | syncHost (with web app) |
|---|---|---|---|
| Email + OTP | Yes | Yes | Yes |
| Email + Link | No | No | Yes |
More from midudev/autoskills
bun
Use when building, testing, and deploying JavaScript/TypeScript applications. Reach for Bun when you need to run scripts, manage dependencies, bundle code, or test applications with a single unified tool.
19react-hook-form
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, and useFieldArray. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
15pydantic
Python data validation using type hints and runtime type checking with Pydantic v2's Rust-powered core for high-performance validation in FastAPI, Django, and configuration management.
13nestjs-best-practices
NestJS best practices and architecture patterns for building production-ready applications. This skill should be used when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, and performance.
11prisma-postgres
Prisma Postgres setup and operations guidance across Console, create-db CLI, Management API, and Management API SDK. Use when creating Prisma Postgres databases, working in Prisma Console, provisioning with create-db/create-pg/create-postgres, or integrating programmatic provisioning with service tokens or OAuth.
11frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
10