clerk-chrome-extension-patterns

Chrome Extension auth with @clerk/chrome-extension -- popup/sidepanel setup, syncHost for OAuth/SAML via web app, createClerkClient for service workers and headless extensions, stable CRX ID. Triggers on: Chrome extension auth, Plasmo clerk, popup sign-in, syncHost, background service worker token, createClerkClient, headless extension.

44stars3forksUpdated 6/2/2026

Security Web Development #authentication #react #oauth #clerk #chrome-extension #javascript

Security Assessment

Medium Risk(50/100)

Detected risks:

Secret Exposure([SKILL.md] token =, [references/content-scripts.md] token =, [references/headless-extension.md] token =)

Sensitive File Access([SKILL.md] .env, [references/content-scripts.md] .env, [references/sync-host.md] .env)

Security Score50/100

About clerk-chrome-extension-patterns

The `clerk-chrome-extension-patterns` skill provides a structured approach to integrating authentication workflows into Chrome extensions using the @clerk/chrome-extension library. It addresses common challenges encountered when implementing secure sign-in flows within the constrained environment of browser extensions, such as handling OAuth and SAML protocols, dealing with popup and side panel limitations, and maintaining session consistency across service workers and content scripts. By offering guidelines for environment setup, stable CRX IDs, and proper handling of redirect URLs, this skill ensures that developers can implement authentication reliably without breaking user sessions or encountering origin restrictions.

The skill includes multiple authentication options, such as email/password, magic links, OTP, passkeys, and web3, and clearly delineates which methods are supported in popups, side panels, or via the `syncHost` delegation to a web app. Key features include `createClerkClient()` for service workers and headless extensions, popup-specific sign-in handling using modals, and synchronization with web app sessions to enable OAuth or SAML login flows. Critical rules emphasize best practices for handling bot protection, side panel state refreshes, and extension-specific URL constraints.

Targeted at developers building Chrome extensions with the Plasmo framework, this skill is particularly useful for those who need robust, multi-environment authentication support. It is ideal for extension authors who require seamless integration with web app sessions, reliable token handling in background service workers, and adherence to security and origin constraints enforced by Clerk. This skill enables developers to provide a smooth and consistent authentication experience for end users, regardless of the extension interface they interact with.

FAQ

Can I use OAuth or SAML directly in popups or side panels?

No. OAuth and SAML are not supported directly in popups or side panels. You must use `syncHost` to delegate authentication to your web app.

How do I handle email magic links in the popup?

Email magic links do not work in popups because the popup closes when clicking outside. Use `syncHost` via the web app to support magic link sign-ins.

Do service workers and content scripts have access to Clerk React hooks?

No. Service workers and content scripts cannot use Clerk React hooks. Use `createClerkClient()` or message passing to interact with Clerk in these contexts.