feat(chrome-extension): Create js only create clerk client for extensions by royanger · Pull Request #7935 · clerk/javascript

royanger · 2026-02-25T23:07:57Z

Description

Customers want to be able to use Clerk in JS-only Chrome Extensions, either when building new or when switching an existing extension to Clerk.

This PR adds the /client import path for using createClerkClient() without React.

import { createClerkClient } from '@clerk/chrome-extension/client';

const publishableKey = process.env.CLERK_PUBLISHABLE_KEY;
if (!publishableKey) {
  throw new Error('Missing CLERK_PUBLISHABLE_KEY in .env');
}

const clerk = createClerkClient({ publishableKey });

This deprecates the previous /background only import:

 * // Before (deprecated):
 * import { createClerkClient } from '@clerk/chrome-extension/background';
 * const clerk = await createClerkClient({ publishableKey: 'pk_...' });
 *
 * // After:
 * import { createClerkClient } from '@clerk/chrome-extension/client';
 * const clerk = await createClerkClient({ publishableKey: 'pk_...', background: true });
 */

This also adds a JS only Chrome Extension playground in playground/browser-extension-js.

The latest snapshot works with the new Chrome Extension JS Quickstart repo

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated
- Documentation PR - Added guide for new JS only createClerkClient for Chrome Extensions clerk-docs#3146

Type of change

Summary by CodeRabbit

New Features
- Exposed createClerkClient() from the chrome-extension client package
- New browser-extension JS playground with a working popup UI and build artifacts
Deprecations
- createClerkClient() from the background package is deprecated
Documentation
- README updates and playground usage/examples added
Tests
- Added API surface and client behavior tests for the chrome-extension client

…ilable

vercel · 2026-02-25T23:08:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 28, 2026 0:54am

changeset-bot · 2026-02-25T23:08:02Z

🦋 Changeset detected

Latest commit: a978267

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/chrome-extension	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

royanger · 2026-02-26T18:49:55Z

!snapshot

clerk-cookie · 2026-02-26T18:52:22Z

Hey @royanger - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.3.0-snapshot.v20260226185040
@clerk/astro	3.0.0-snapshot.v20260226185040
@clerk/backend	3.0.0-snapshot.v20260226185040
@clerk/chrome-extension	3.0.0-snapshot.v20260226185040
@clerk/clerk-js	6.0.0-snapshot.v20260226185040
@clerk/dev-cli	1.0.0-snapshot.v20260226185040
@clerk/expo	3.0.0-snapshot.v20260226185040
@clerk/expo-passkeys	1.0.0-snapshot.v20260226185040
@clerk/express	2.0.0-snapshot.v20260226185040
@clerk/fastify	2.7.0-snapshot.v20260226185040
@clerk/localizations	4.0.0-snapshot.v20260226185040
@clerk/msw	0.0.1-snapshot.v20260226185040
@clerk/nextjs	7.0.0-snapshot.v20260226185040
@clerk/nuxt	2.0.0-snapshot.v20260226185040
@clerk/react	6.0.0-snapshot.v20260226185040
@clerk/react-router	3.0.0-snapshot.v20260226185040
@clerk/shared	4.0.0-snapshot.v20260226185040
@clerk/tanstack-react-start	1.0.0-snapshot.v20260226185040
@clerk/testing	2.0.0-snapshot.v20260226185040
@clerk/ui	1.0.0-snapshot.v20260226185040
@clerk/upgrade	2.0.0-snapshot.v20260226185040
@clerk/vue	2.0.0-snapshot.v20260226185040

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226185040 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260226185040 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260226185040 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260226185040 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260226185040 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260226185040 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260226185040 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260226185040 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260226185040 --save-exact

…ensions

royanger · 2026-02-26T22:01:18Z

!snapshot

clerk-cookie · 2026-02-26T22:03:43Z

Hey @royanger - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.3.0-snapshot.v20260226220202
@clerk/astro	3.0.0-snapshot.v20260226220202
@clerk/backend	3.0.0-snapshot.v20260226220202
@clerk/chrome-extension	3.0.0-snapshot.v20260226220202
@clerk/clerk-js	6.0.0-snapshot.v20260226220202
@clerk/dev-cli	1.0.0-snapshot.v20260226220202
@clerk/expo	3.0.0-snapshot.v20260226220202
@clerk/expo-passkeys	1.0.0-snapshot.v20260226220202
@clerk/express	2.0.0-snapshot.v20260226220202
@clerk/fastify	2.7.0-snapshot.v20260226220202
@clerk/localizations	4.0.0-snapshot.v20260226220202
@clerk/msw	0.0.1-snapshot.v20260226220202
@clerk/nextjs	7.0.0-snapshot.v20260226220202
@clerk/nuxt	2.0.0-snapshot.v20260226220202
@clerk/react	6.0.0-snapshot.v20260226220202
@clerk/react-router	3.0.0-snapshot.v20260226220202
@clerk/shared	4.0.0-snapshot.v20260226220202
@clerk/tanstack-react-start	1.0.0-snapshot.v20260226220202
@clerk/testing	2.0.0-snapshot.v20260226220202
@clerk/ui	1.0.0-snapshot.v20260226220202
@clerk/upgrade	2.0.0-snapshot.v20260226220202
@clerk/vue	2.0.0-snapshot.v20260226220202

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226220202 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260226220202 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260226220202 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260226220202 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260226220202 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260226220202 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260226220202 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260226220202 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260226220202 --save-exact

coderabbitai · 2026-02-26T22:57:15Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 188a2f6 and a978267.

📒 Files selected for processing (4)

playground/browser-extension-js/esbuild.config.mjs
playground/browser-extension-js/package.json
playground/browser-extension-js/src/env.d.ts
playground/browser-extension-js/src/popup.ts

📝 Walkthrough

Walkthrough

Adds a shared utility src/utils/clerk-client.ts and a new public subpath export chrome-extension/client exposing createClerkClient(), while deprecating the previous background export. createClerkClient is overloaded: foreground callers receive a Clerk instance with UI injected; background callers (opts.background = true) return a Promise<Clerk> and load with background semantics. Package exports and build entrypoints (tsup) were updated to include the client subpath. New tests cover client exports and clerk-client behavior. A browser-extension playground (playground/browser-extension-js) with manifest, popup HTML/CSS/TS, build config, env, and docs was added.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: introducing a JavaScript-only createClerkClient export path for Chrome Extensions, enabling extensions to use Clerk without React.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/wild-pianos-matter.md:
- Around line 12-15: Fix the typos in the changeset: remove the stray trailing
single quote after the semicolon in the line declaring const clerk =
createClerkClient({ publishableKey }); and correct the misspelled function name
createClerkCleint to createClerkClient in the background worker example (the
line starting with const clerk = await createClerkClient(...)); keep the
existing await and background: true options intact.

In `@packages/chrome-extension/README.md`:
- Line 81: Typo in the README: replace the misspelled token `reasct-router` with
the correct `react-router` in the bullet that begins "SyncHost, Service Workers
and `react-router`" so the displayed link text and code-formatted token read
"react-router" consistently; update only the README.md bullet text containing
`reasct-router`.

In `@playground/browser-extension-js/src/popup.ts`:
- Around line 95-100: The createInfoRow function uses innerHTML with
interpolated label/value which can allow XSS if those strings are ever
untrusted; change createInfoRow to build the row with createElement and assign
textContent (or setAttribute for classes) to the label and value spans instead
of using innerHTML so the values are escaped and not interpreted as HTML.

ℹ️ Review info

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 64af60c and 99b151a.

⛔ Files ignored due to path filters (1)

packages/chrome-extension/src/__tests__/__snapshots__/client-exports.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (25)

.changeset/wild-pianos-matter.md
.gitignore
packages/chrome-extension/README.md
packages/chrome-extension/client/package.json
packages/chrome-extension/package.json
packages/chrome-extension/src/__tests__/client-exports.test.ts
packages/chrome-extension/src/background/clerk.ts
packages/chrome-extension/src/client/index.ts
packages/chrome-extension/src/utils/__tests__/clerk-client.test.ts
packages/chrome-extension/src/utils/clerk-client.ts
packages/chrome-extension/tsup.config.ts
playground/browser-extension-js/.env
playground/browser-extension-js/.env.example
playground/browser-extension-js/.gitignore
playground/browser-extension-js/README.md
playground/browser-extension-js/build/manifest.json
playground/browser-extension-js/build/popup.css
playground/browser-extension-js/build/popup.html
playground/browser-extension-js/esbuild.config.mjs
playground/browser-extension-js/package.json
playground/browser-extension-js/pnpm-workspace.yaml
playground/browser-extension-js/src/popup.ts
playground/browser-extension-js/tsconfig.json
playground/browser-extension/README.md
playground/browser-extension/package.json

.changeset/wild-pianos-matter.md

packages/chrome-extension/README.md

playground/browser-extension-js/src/popup.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

tmilewski

This LGTM! Just check the .env and the one CR comment. 🚀

playground/browser-extension-js/.env

playground/browser-extension-js/src/popup.ts

pkg-pr-new · 2026-02-27T20:00:47Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7935

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7935

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7935

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7935

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7935

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7935

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7935

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7935

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7935

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7935

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@7935

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7935

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7935

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7935

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7935

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7935

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7935

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7935

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7935

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7935

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7935

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7935

commit: a978267

…ensions

tmilewski

🚢

royanger · 2026-02-28T01:00:06Z

!snapshot

royanger added 3 commits February 13, 2026 20:05

feat: Refactor createClerkClient to make a client JS only version ava…

85fb518

…ilable

Merge branch 'main' into roy/create-new-extension-js-package

3c386e9

feat: Added JS only Chrome Extension to playground apps

dc81846

github-actions bot added chrome-extension playground core-3 labels Feb 25, 2026

royanger changed the title ~~Create js only create clerk client for extensions~~ feat(chrome-extension): Create js only create clerk client for extensions Feb 25, 2026

royanger added 2 commits February 26, 2026 15:34

fix: Enable UI components in client createClerkClient

768bbd1

refactor: Swapped from bun to esbuild, other changes to playground app

772fe39

vercel bot deployed to Preview February 26, 2026 21:48 View deployment

Merge branch 'main' into roy/create-js-only-createClerkClient-for-ext…

2f5d4ca

…ensions

vercel bot deployed to Preview February 26, 2026 21:51 View deployment

royanger added 2 commits February 26, 2026 17:39

test: Added tests

8f6f41e

chore: Added changeset

99b151a

royanger marked this pull request as ready for review February 26, 2026 22:53

royanger requested a review from tmilewski February 26, 2026 22:53

vercel bot deployed to Preview February 26, 2026 22:53 View deployment

coderabbitai bot reviewed Feb 26, 2026

View reviewed changes

.changeset/wild-pianos-matter.md Outdated Show resolved Hide resolved

packages/chrome-extension/README.md Outdated Show resolved Hide resolved

playground/browser-extension-js/src/popup.ts Show resolved Hide resolved

royanger mentioned this pull request Feb 26, 2026

Added guide for new JS only createClerkClient for Chrome Extensions clerk/clerk-docs#3146

Open

Apply suggestions from code review

605434a

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

vercel bot deployed to Preview February 27, 2026 19:57 View deployment

tmilewski requested changes Feb 27, 2026

View reviewed changes

playground/browser-extension-js/.env Outdated Show resolved Hide resolved

playground/browser-extension-js/src/popup.ts Show resolved Hide resolved

royanger added 2 commits February 27, 2026 15:43

Merge branch 'main' into roy/create-js-only-createClerkClient-for-ext…

e323a52

…ensions

fix: Applied review suggestions

176f5ba

vercel bot deployed to Preview February 27, 2026 20:47 View deployment

royanger added 2 commits February 27, 2026 19:04

Merge branch 'main' into roy/create-js-only-createClerkClient-for-ext…

514c682

…ensions

fix: Fix static analysis linting error

188a2f6

royanger requested a review from tmilewski February 28, 2026 00:09

vercel bot deployed to Preview February 28, 2026 00:09 View deployment

tmilewski approved these changes Feb 28, 2026

View reviewed changes

refactor: Swap from dotenv to process.loadEnvFile in new playground app

a978267

vercel bot deployed to Preview February 28, 2026 00:54 View deployment

Conversation

royanger commented Feb 25, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

royanger commented Feb 26, 2026

Uh oh!

clerk-cookie commented Feb 26, 2026

Uh oh!

royanger commented Feb 26, 2026

Uh oh!

clerk-cookie commented Feb 26, 2026

Uh oh!

coderabbitai bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tmilewski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tmilewski left a comment

Choose a reason for hiding this comment

Uh oh!

royanger commented Feb 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

royanger commented Feb 25, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 25, 2026 •

edited

Loading

changeset-bot bot commented Feb 25, 2026 •

edited

Loading

coderabbitai bot commented Feb 26, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 27, 2026 •

edited

Loading