clerk-chrome-extension-patterns Skill: What It Does and How to Install It

Makes your coding agent add Clerk sign-in to a Chrome extension: popup auth, syncHost, service workers and a stable ID.

Installs: 14.7K; on skills.sh
Stars: 89; on GitHub
Files: 8; besides SKILL.md
Updated: Oct 2026; last repo commit

The SKILL.md tells the agent to use @clerk/chrome-extension, with Plasmo as its quick start. It lists eight critical rules, such as OAuth and SAML not working in popups or side panels, so those sign-ins go through syncHost and your web app. It also covers createClerkClient() for service workers, headless extensions, content scripts through message passing, a stable extension ID and a token cache.

It loads on Chrome extension auth, Plasmo Clerk, syncHost and background service worker token questions. You need a Clerk publishable key and the frontend API URL of your Clerk app.

Good for

Chrome extension developers adding Clerk
Teams that need OAuth or SAML sign-in for an extension
Anyone sharing a Clerk session between an extension and a web app

Install clerk-chrome-extension-patterns

Claude Code

Copy this prompt.

Install the clerk-chrome-extension-patterns skill in Claude Code. Run this command:

/plugin marketplace add clerk/skills
/plugin install clerk@clerk-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin installs all 20 skills in the Clerk repo (counted from the repo tree) and adds the Clerk MCP server from the repo's .mcp.json, which points at https://mcp.clerk.com/mcp. The skills-only routes install just this skill and no MCP server config. The README says to open /plugin, go to Marketplaces, select clerk-skills and enable auto-update if you want updates.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

CRITICAL RULES
Authentication Options
Quick Start (Plasmo)
syncHost -- Sync Auth with Web App
createClerkClient() for Vanilla JS / Service Workers
Headless Extension (no popup, no side panel)
Content Scripts
Stable CRX ID
Token Cache (persist across popup closes)
Common Pitfalls
Plan Requirements
See Also

Key facts

Author: Clerk (the skill is in Clerk's own clerk/skills repo)
License: MIT (README, plugin.json and SKILL.md frontmatter; the repo has no LICENSE file)
Installs on skills.sh: 14,651 (Nov 2, 2026)
GitHub stars: 89 for the whole clerk/skills repo (Nov 2, 2026)
Last repo commit: Oct 30, 2026
What it includes: 9 files including SKILL.md: 4 reference files, an evals/evals.json file and 3 files in a Chrome extension starter template
Needs: `@clerk/chrome-extension`; PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_FRONTEND_API (SKILL.md compatibility line); Native API enabled in the Clerk Dashboard
Works in: Claude Code, Codex, Cursor and GitHub Copilot CLI through the plugin; any agent through npx skills

What it includes

Scaffold with create-plasmo and add ClerkProvider to the popup.
The SKILL.md runs npx create-plasmo, installs @clerk/chrome-extension and renders sign-in buttons in modal mode.
Try: “Add Clerk sign-in to my Chrome extension popup”
Runs code · Popup quick start
Sync sign-in from your web app for OAuth and SAML.
The extension reads your web app's Clerk session cookie through host_permissions. Source: SKILL.md and references/sync-host.md.
Try: “Let my extension use the sign-in from my web app”
Write · syncHost
Show a curl PATCH that adds the extension origin to Clerk.
The SKILL.md shows a curl request to the Clerk API with a secret key to set allowed_origins.
Network · Allowed origins call
Get tokens in service workers and vanilla JS popups.
Uses background: true to keep sessions fresh when the popup is closed. Source: references/create-clerk-client.md.
Write · createClerkClient
Read auth state from the web app with no popup or side panel.
Combines syncHost with createClerkClient. Source: references/headless-extension.md.
Write · Headless extension
Ask the background worker for a token by message passing.
Content scripts cannot use Clerk directly because of origin restrictions. Source: references/content-scripts.md.
Write · Content scripts
Pin the extension key so rebuilds keep the same ID.
Offers Plasmo Itero or an openssl genrsa command, then puts the public key in the manifest.
Runs code · Stable CRX ID
Persist tokens in chrome.storage so popup closes keep the session.
A tokenCache backed by chrome.storage.local.
Write · Token cache

From the official docs

Permissions

Medium risk

The skill shows a command that changes your Clerk instance settings with a secret key, and it builds an extension that can read your web app's session cookie. Run the instance command yourself against a development instance and check the manifest permissions before you publish.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It shows a call that changes your Clerk instance
The SKILL.md and two references show a curl PATCH to https://api.clerk.com/v1/instance with your secret key that sets allowed_origins. Run it yourself against a development instance first, and keep the secret key out of chat logs. github.com
The extension it builds can read your web app cookies
With syncHost, the SKILL.md adds the cookies and storage permissions and host_permissions for your web app's domain to the manifest. Check the host list before you publish. github.com
Key generation writes a private key file
The SKILL.md offers openssl genrsa -out key.pem 2048 for a stable extension ID and says to save the private key securely. Keep key.pem out of git. github.com
It edits files in your project
The SKILL.md runs `npx create-plasmo`, installs `@clerk/chrome-extension`, edits the extension manifest and writes keys into `.env.development`. Review the diff before you commit it. github.com
The plugin route also adds the Clerk MCP server
The plugin's .mcp.json registers https://mcp.clerk.com/mcp. Use the skills CLI route if you only want this skill. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode.
Talks to	api.clerk.com (curl PATCH shown in SKILL.md). itero.plasmo.com (key generator link in SKILL.md). WebFetch tool (the frontmatter allows it)
Sign-in and keys	The SKILL.md shows Clerk keys going into your project's env file.
Scopes	Your project files Clerk keys in your env file

Questions

What does clerk-chrome-extension-patterns do?

It makes your coding agent write Clerk sign-in code for a Chrome extension: popup and side panel auth, syncHost for OAuth and SAML, service worker tokens and a stable extension ID.

How do I install clerk-chrome-extension-patterns?

Use the install box above. The Claude Code plugin route installs every Clerk skill and the Clerk MCP server, and the skills CLI route installs only this skill. Pick one route, not both, or you get the skills twice.

Is clerk-chrome-extension-patterns official?

Yes. It is published in Clerk's own clerk/skills repository, and the plugin.json in that repo lists Clerk as the author.

Does clerk-chrome-extension-patterns work in the Claude app or Codex?

Codex, Cursor and GitHub Copilot CLI each have a plugin install in the README. The README does not document uploading Clerk skills to the Claude app, and this skill's job is to change code in a local project, so the install box has no Claude app tab.

Does it need a Clerk account or API key?

You need a Clerk publishable key and the frontend API URL of your Clerk app. The SKILL.md's compatibility line names PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_FRONTEND_API, and it says to enable Native API in the Clerk Dashboard.

Is clerk-chrome-extension-patterns safe to install?

Its SKILL.md makes the agent change files in your project and use Clerk keys from your env file, and its frontmatter allows the WebFetch tool. Our advice: read each change before you commit it, and keep the secret key out of git.

Why does Google sign-in fail in my extension popup?

The SKILL.md lists OAuth and SAML as not supported in popups or side panels. Its fix is syncHost, which delegates sign-in to your web app and reads the session cookie from it.

Information

updated Nov 2, 2026

Repository: clerk/skills
Folder: skills/clerk-chrome-extension-patterns

clerk/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

clerk-chrome-extension-patterns SKILL.md · github.com
clerk/skills README · github.com
clerk plugin.json · github.com
clerk .mcp.json · github.com