clerk-chrome-extension-patterns

Implement Clerk authentication in Chrome Extensions with service workers and content scripts.

1|Updated Jun 5, 2026
One-click install
npx skills add https://github.com/aaravmin/fineprint --skill clerk-chrome-extension-patterns-aaravmin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-chrome-extension-patterns
Source: https://github.com/aaravmin/fineprint/tree/main/client/.agents/skills/clerk-chrome-extension-patterns
Command: npx skills add https://github.com/aaravmin/fineprint --skill clerk-chrome-extension-patterns-aaravmin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/chrome-extension, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of implementing secure and efficient authentication in Chrome Extensions using Clerk's Chrome Extension SDK.

Core Features & Use Cases

  • Popup/Sidepanel Setup: Guide for setting up authentication popups and side panels.
  • Sync Host for OAuth/SAML: Syncs auth state with a web app for OAuth, SAML, and magic links.
  • Service Workers and Content Scripts: Instructions for creating and using service workers and content scripts with Clerk authentication.
  • Stable CRX ID: Guidance on configuring a stable CRX ID for consistent authentication.
  • Token Cache: Explanation of token caching for persisting authentication state.
  • Authentication Options: Comparison of authentication methods supported by Clerk in Chrome Extensions.
  • Quick Start: Step-by-step guide for creating a basic Clerk Chrome Extension with authentication.

Quick Start

Run the following commands to set up a basic Clerk Chrome Extension:

npx create-plasmo --with-tailwindcss --with-src my-extension
cd my-extension
npm install @clerk/chrome-extension

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?

You implement Clerk authentication by installing the @clerk/chrome-extension SDK, configuring your PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY, and setting up a sync host for auth state.

Can I use OAuth and SAML with Clerk in my Chrome extension?

Yes, Clerk supports OAuth and SAML in Chrome extensions by syncing the authentication state with a web app host for enterprise SSO and magic links.

How do I set up a Clerk Chrome extension with Plasmo?

Create a Plasmo extension using `npx create-plasmo`, install the `@clerk/chrome-extension` package, and configure the required CLERK_FRONTEND_API environment variables to start authenticating users.

Does Clerk authentication work with Chrome extension service workers and content scripts?

Yes, the Clerk Chrome extension SDK provides specific instructions for integrating authentication into both background service workers and content scripts to secure API requests.

Why do I need a stable CRX ID for Clerk authentication in my Chrome extension?

A stable CRX ID ensures consistent authentication behavior across extension updates, preventing Clerk token invalidation and maintaining a reliable sync host configuration.

What environment variables are required for Clerk Chrome extension authentication?

You must configure the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_FRONTEND_API environment variables to authenticate users and sync auth state with your web app.